androidandroid-buttonmaterial-components-androidmaterial-componentsandroid-shapedrawable

How to give Material Button ShapeAppearance seperate to Edittext Shape Appearance?


In android, you could setup a theme with ShapeAppearance.MaterialComponents.SmallComponent so if I set,

<style name="Some.Theme" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.MyShape.SmallComponent</item>
    ...
</style>

If I defined ShapeAppearance.MyShape.SmallComponent to be rounded as so:

<style name="ShapeAppearance.MyShape.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/someDPValue</item>
</style>

I could get my MaterialButton to a rounded shape.

My problem is that this also affects the shapeAppearance of all of my Edittext which is not what I want.

Is it possible to provide a different shapeAppearance for Button and a different one for Edittext?


Solution

  • You can change the component's shape by overriding the style of the component and defining a custom shapeAppearanceOverlay.

    For example for the MaterialButton you can use the materialButtonStyle attribute in the app theme:

    <style name="Some.Theme" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
       <item name="materialButtonStyle">@style/MyApp.Button</item>
    </style>
    

    where:

    <style name="MyApp.Button" parent="@style/Widget.MaterialComponents.Button">
       <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.MaterialButton</item>
    </style>
    
    <style name="ShapeAppearanceOverlay.MyApp.MaterialButton" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">@dimen/...</item>
    </style>