CODEWITHSUNDEEP
androidmaterial-design
kace91
kace91

Reputation: 853

material design: buttons won't take theme color?

After extending the material.light theme,and setting up the colors like this: 

<resources>
    <!-- inherit from the material theme -->
    <style name="MiTemaMaterial" parent="android:Theme.Material.Light">
        <!-- Main theme colors -->
        <!--   your app branding color for the app bar -->
        <item name="android:colorPrimary">#4DB6AC</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="android:colorPrimaryDark">#009688</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="android:colorAccent">#FFAB40</item>
    </style> </resources>

I get a material desing-like navigation bar, but views like buttons don't take the color scheme and appear default. I'm wondering if this is standard behavior, since in the design guides like here http://www.google.com/design/spec/components/buttons.html it seems that butttons use the accent color.

Do I have to style them manually?

Upvotes: 1

Views: 847

Answers (1)

ianhanniballake
ianhanniballake

Reputation: 199825

Yes, you need to theme the buttons yourself. To provide a button that takes on your primary color use a drawable in your v21 directory for your background such as:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

This will ensure your background color is ?attr/colorPrimary and has the default ripple animation using the default ?attr/colorControlHighlight (which you can also set in your theme if you'd like).

Note: you'll have to create a custom selector for less than v21:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
</selector>

Assuming you have some colors you'd like for the default, pressed, and focused state. Personally, I took a screenshot of a ripple midway through being selected and pulled the primary/focused state out of that.

Upvotes: 3

Related Questions