Manuel Ohlendorf

Things from and about me

Material Design Buttons with AppCompat

Posted at — Sep 3, 2015

With the new release v23.0.0 of the AppCompat library it is now possible to create Material Design Buttons for Lollipop and Pre-Lollipop devices.

If you just want to define the color of all Buttons you can set a special theme property called colorButtonNormal:

<style name="AppTheme" parent="Theme.AppCompat.Light">
  <item name="android:windowBackground">@android:color/white</item>
  <item name="colorPrimary">@color/primary</item>
  <item name="colorPrimaryDark">@color/primary_dark</item>
  <item name="colorAccent">@color/accent</item>
  <item name="colorButtonNormal">@color/button_normal</item>
</style>

Now every Button has the color @color/button_normal and looks like a nice Material Design Button. But what if you have different Button types with different colors? No problem! Just define a new style for your special button:

<style name="SpecialButton" parent="Widget.AppCompat.Button.Colored">
  <item name="colorButtonNormal">#555</item>
  <item name="android:textColorPrimary">#fff</item>
</style>

You can use this style on a Button element like that:

<Button
  android:theme="@style/SpecialButton"
  android:id="@+id/special"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/special" />

As you can see, the style is not used as a style but as a theme. This is because the attributes colorButtonNormal and android:textColorPrimary are not properties of the Button. Instead they are applied by the magic theme mechanism from Android. I am not entirely sure how it works but it seems to work…

For more information on styling and not on theming you should read Styling Views on Android (Without Going Crazy).