CODEWITHSUNDEEP
androidandroid-appcompatmaterial-design
user3420815
user3420815

Reputation: 805

Tint CheckBox and Toolbar stuff separately

I'm currently using the usually amazing appcompat-v7 library in my application and I'm trying to tint my CheckBoxes without changing the Icon-Colors in the Toolbar (like the back arrow or those three dots).

Following how it looks currently - as you can see not only the CheckBox is tinted pink, the back-arrow / three-dots are also tinted pink.

picture showing issue

My code:

Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?colorPrimary"
        android:elevation="4dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="My CheckBox" />

</LinearLayout>

Application-Theme

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#FFC107</item>
    <item name="colorPrimaryDark">#FFA000</item>
    <item name="android:textColorPrimary">#FFF</item>
    <item name="android:textColorSecondary">#FFF</item>
    <item name="colorControlNormal">#E91E63</item>
</style>

Question

What do I need to change so that the Checkbox gets pink and the Toolbar-stuff keeps being white?

Side-Note: I guess the main problem is that I simply can't find a page where every single appcompat attribute is described. It's basically just all-out trial and error since the names of those attributes are no clear indication.

Upvotes: 3

Views: 843

Answers (1)

reVerse
reVerse

Reputation: 35264

You're basically facing the same issue as described in this or this question.
So the only thing you need to do is to create a Style for your Toolbar which uses an other theme as the Activity.

Toolbar style / theme example

<style name="MyToolbarStyle">
    <!-- potential other attributes -->
    <item name="theme">@style/MyToolbarTheme</item>
</style>

<style name="MyToolbarTheme">
    <!-- Used to tint the back arrow, menu and spinner arrow -->
    <item name="colorControlNormal">#FFF</item>
</style>

Add this Style to your Toolbar and your issue should be fixed (it is important not to use the theme directly):

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/MyToolbarStyle"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?colorPrimary"
        android:elevation="4dp" />

Upvotes: 2

Related Questions