How to Customize AppCompat Material Button Style?

Question

I am using the AppCompat theme and I want set the minHeight attribute on my buttons:

<style name="Theme.MyTheme" parent="Theme.AppCompat">
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="...?">
    <item name="android:minHeight">60dp</item>
</style>

However, there is no Widget.AppCompat.Button style to set as the parent for MyButtonStyle. If I use android:Widget.Button, then all my buttons look like the old crappy style. I tried various other AppCompat themes like TextAppearance.AppCompat.Button, but they do not work.

Leaving out a parent theme for the button style also causes the button not to be styled correctly.

How can I customize the default Theme.AppCompat buttonStyle?

Answer 1

You can have Base.MyButtonStyle extend android:Widget.Holo.Button on API 14+ (in res/values-v14/styles.xml) and android:Widget.Material.Button on API 21+ (in res/values-v21/styles.xml. This style will change according to the device system version. Put your platform specific modifications here.

Then have MyButtonStyle extend Base.MyButtonStyle and define the android:minHeight here (in res/values/styles.xml). This will apply to all platforms.

You buttons then can use style MyButtonStyle.

This example assumes your minimum SDK is 14.

And yes, there's no appcompat-v7 button style (well, at least not yet).

EDIT

This assumes you're OK with Holo button on platforms older than Lollipop. It feels unobtrusive and if you can do without ripples, it should be just fine. If you want ripples I suggest you google for a third party lollipop button library.

Answer 2

To answer my own question, it appears AppCompat does not in fact support the Button widget presently:

AppCompat provides similar behaviour on earlier versions of Android for a subset of UI widgets:

• Everything provided by AppCompat’s toolbar (action modes, etc)
• EditText
• Spinner
• CheckBox
• RadioButton
• Switch (use the new android.support.v7.widget.SwitchCompat)
• CheckedTextView

The only workaround I see would be to recreate the Material button style from the Android source code, a task which extends outside the scope of my desire.

Answer 3

Custom Button Style With AppCompat +22 in your styles.xml

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
        <item name="colorControlHighlight">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item> </style>

in your layout.xml

<Button
        android:id="@+id/but_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/but_continue"
        android:theme="@style/Button.Tinted" />

Answer 4

With new MaterialComponent it is convenient to use com.google.android.material.button.MaterialButton instead of regular Button.

But to style it, there is used the different attribute in the theme - materialButtonStyle, with this parent theme Theme.MaterialComponents.DayNight.NoActionBar.

Then the theme should look like this:

<style name="NewAppTheme" 
       parent="Theme.MaterialComponents.DayNight.NoActionBar">
    .......
    <-- IMPORTANT if you are using com.google.android.material.button.MaterialButton to style them use this parameter
    <item name="materialButtonStyle">@style/ButtonStyle</item>
</style>

And in ButtonStyle you can change button attributes like this:

<style name="ButtonStyle" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:minHeight">60dp</item>
</style>