How to have Material design buttons with different colors in API 21?

Question

Coming from this thread: Android Material Design Button Styles

I couldn't understand how to individually change the colors of the buttons, so that not all buttons are with the same color.

<item name="android:colorButtonNormal">@color/blue</item>

This solution works nice, but it changes the color of all buttons.

In API 22, we can change the color of the different buttons by using the backgroundTint, like so:

<Button
   android:id="@+id/button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:elevation="3dp"
   android:backgroundTint="@color/orange" 
   android:text="@string/button1_text"
   android:textAllCaps="true"
   android:textColor="@color/white"
   android:textSize="18sp" />

How can we do it in API 21 ?

That's the styles.xml that I have:

<style name="AppTheme" parent="@android:style/Theme.Material.Light">
    <item name="android:actionBarStyle">@style/actionBarCustomization</item>
    <item name="android:spinnerDropDownItemStyle">@style/mySpinnerDropDownItemStyle</item>
    <item name="android:spinnerItemStyle">@style/mySpinnerItemStyle</item>
    <item name="android:colorButtonNormal">@color/myDarkBlue</item>
</style>

<style name="actionBarCustomization" parent="@android:style/Widget.Material.Light.ActionBar">
    <item name="android:background">@color/white</item>
    <item name="android:titleTextStyle">@style/actionBarTextColor</item>
</style>

<style name="actionBarTextColor" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/black</item>
</style>

http://stackoverflow.com/questions/26346727/android-material-design-button-styles — USKMobility, Oct 08 '15 at 18:23
@USKMobility That's the topic that I have quoted in the beginning of my post. — Apostrofix, Oct 08 '15 at 18:35

score 0 · Accepted Answer · answered Oct 08 '15 at 19:14

Okay, I figured it out. Here is the way I solved it, I hope it helps someone else too (I am not saying that it's perfect).

I created a drawable material_ripple_effect.xml that looks like that:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/black">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="2dp" />
            <solid android:color="@color/myOrange" />
        </shape>
    </item>
</ripple>

And then in the layout, where I have the button, I just set the ripple drawable as a background. In activity_main.xml:

<Button
   android:id="@+id/button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:elevation="3dp"
   android:backgroundTint="@color/orange" 
   android:background="@drawable/material_ripple_effect"
   android:text="@string/button1_text"
   android:textAllCaps="true"
   android:textColor="@color/white"
   android:textSize="18sp" />

How to have Material design buttons with different colors in API 21?

1 Answers1