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

Question

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?

Answer 1

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>