Lollipop's backgroundTint has no effect on a Button

BoD picture BoD · Jan 2, 2015 · Viewed 80.4k times · Source

I have a Button in my Activity, and I'd like it to have my theme's accent color. Instead of making my own drawables like we had to do pre-Lollipop, naturally I'd like to use the new backgroundTint attribute.

<Button
    android:id="@+id/btnAddCode"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/accent"
    android:text="@string/addressInfo_edit_addCode" />

Unfortunately it has no effect, the button stays gray.

I tried different values for backgroundTintMode, which didn't change anything.

I also tried doing it programmatically in my Activity, which didn't change anything.

addCodeView.findViewById(R.id.btnAddCode).setBackgroundTintList(
     getResources().getColorStateList(R.color.accent));

Why is my tint ignored?

EDIT: Just to clarify, I am indeed testing on a Lollipop device. Other widgets (e.g. EditText) are correctly and automatically tinted.

Answer

Snild Dolkow picture Snild Dolkow · Apr 20, 2015

The bad news

Like BoD says, it's meaningless to tint a Button's background in Lollipop 5.0 (API level 21).

The good news

Lollipop 5.1 (API level 22) seems to have fixed this by changing btn_mtrl_default_shape.xml (among other files): https://android.googlesource.com/platform/frameworks/base/+/6dfa60f33ca6018959ebff1efde82db7d2aed1e3%5E!/#F0

The great news

The new support library (version 22.1+) adds backward-compatible tinting support to lots of components, including AppCompatButton!

Unfortunately, the android:backgroundTint property still doesn't work (maybe I'm doing something wrong) -- so you have to set the ColorStateList in code, using setSupportBackgroundTintList(). It'd be really nice to see android:backgroundTint supported in the future. Update: Marcio Granzotto commented that app:backgroundTint works on AppCompatButton! Note that it's app:, not android:, because it's in the app/library.

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <AppCompatButton
        android:id="@+id/mybutton"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="Testing, testing"
        app:backgroundTint="#ff00ff"/>

</LinearLayout>

Your activity will automatically inflate an AppCompatButton instead of the normal Button if you let it inherit from AppCompatActivity.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        AppCompatButton v = (AppCompatButton) findViewById(R.id.mybutton);
        ColorStateList csl = new ColorStateList(new int[][]{new int[0]}, new int[]{0xffffcc00});
        v.setSupportBackgroundTintList(csl);
    }
}

You should of course get the ColorStateList from a color resource, but I was lazy, so...

Oh, and don't forget to base your app theme on one of the Theme.AppCompat themes, or the compat views will be very, very sad... ;)

This worked on both 2.3.7 (Gingerbread MR1) and 5.0 (Lollipop 'Classic').