AppCompat Material Style widget tint error

Question

Im using the appcompat_v7 library.

In the documentation say:

[...] 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 You don’t need to do anything special to make these work, just use these controls in your layouts as usual and AppCompat will do the rest (with some caveats; see the FAQ below).

This is my code:

values/styles.xml

<style name="AppBaseTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/material_blue_grey_800</item>
    <item name="colorPrimaryDark">@color/material_blue_grey_950</item>
    <item name="colorAccent">@color/material_deep_teal_200</item>
</style>

layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.lollipoptest.MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

<CheckBox
    android:id="@+id/checkBox1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="28dp"
    android:text="CheckBox" />

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/checkBox1"
    android:layout_centerHorizontal="true"
    android:text="RadioButton" />

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/radioButton1"
    android:layout_centerHorizontal="true"
    android:ems="10" >

    <requestFocus />
</EditText>

No changes in the default MainActivity.java

The actionbar show the new Material style. The edittext too. But the checkbox and the radiobutton not. What im doing wrong?

Photo: https://drive.google.com/file/d/0B1jx6rK5CDqTRnhYVDU3V21JRlk/view?usp=sharing

Answer 1

I found a solution:

 <CheckBox
        android:id="@+id/chbDevuelto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:button="@drawable/abc_btn_check_material"
        android:buttonTint="@color/colorAccent"
        android:layout_marginStart="16dp"
        android:focusable="false" />

this lines do the trick:

android:button="@drawable/abc_btn_check_material" android:buttonTint="@color/colorAccent"

works in all versions :3

Answer 2

I don't think it will work for these versions. It simulates the tint used in lollipop. In versions lower than 4.0 radio buttons and checkboxes are just images. This is difficult to tint. Appcompat tints what it can tint. Try version 4.0 (Ice Cream Sandwich), from that version it will probably work.

Take a look at this, it is an article written by Chris Banes about Appcompat v21. https://chris.banes.me/2014/10/17/appcompat-v21/

You could use 4.0 as minimum SDK version. You have approximately 85% of the devices with supporting from 4.0. It also saves you a lot of trouble. Here is a link for more information: https://developer.android.com/about/dashboards/index.html