Tint CheckBox and Toolbar with different colors in nested preference activity

Question

When I first start looking over this question I found this question, but the answer didn't work for me. I am working on a KitKat phone, but from what I read, this can be done on a pre-lollipop versions using the AppCompat library. I am using this GitHub repo, and more specificaly this code sample to create nested preference screen.

Here is my AppTheme.SettingsTheme for the SettingActivity in the code sample:

<style name="AppTheme.SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="titleTextStyle">@android:color/white</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlNormal">#fff</item>
</style>

This line: <item name="colorControlNormal">#fff</item> changes the Toolbar from having a white text and black back arrow, to having both the text and back arrow appear white (which is good).

The issue is that I have a CheckBoxPreference which is tinted with this line also, so when it in not check, I can barely see it (box color is white).

I tried creating a special theme just for the toolbar (again from this answer) and doing the <item name="colorControlNormal">COLOR</item>, but its just doesn't affect to toolbar.

I also tried to tint the CheckBoxPreference alone, but it seems that in involves creating a custom layout for it, and this brings a lot more work.

Here is my toolbar layout, currently with no specific theme:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".ui.activities.settingsActivity.SettingsActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="?colorPrimary"
        android:minHeight="?actionBarSize"
        app:navigationContentDescription="@string/abc_action_bar_up_description"
        app:navigationIcon="?homeAsUpIndicator"
        app:title="@string/activity_settings_title"
        app:titleTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>

Can anybody explain how to tint the CheckBoxPreference and Toolbar seperatly? I don't care which one of them I tint using the ActivityTheme and which one I tint on its custom theme. The answers I found didn't work.

score 1 · Answer 1 · answered Nov 01 '16 at 13:46

Use the theme for your Toolbar specifically, instead of for your entire Activity. This is what the ThemeOverlay styles are meant for (they use the colorControlNormal attribute when necessary). You can also define a separate "popup" theme if you would like light-themed pop-ups from your dark Toolbar:

<style name="SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="SettingsTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

<style name="SettingsTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

Then you can apply these styles in your layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/SettingsTheme.AppBarOverlay"
    tools:context=".ui.activities.settingsActivity.SettingsActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?colorPrimary"
        android:minHeight="?actionBarSize"
        app:navigationContentDescription="@string/abc_action_bar_up_description"
        app:navigationIcon="?homeAsUpIndicator"
        app:title="@string/activity_settings_title"
        app:popupTheme="@style/SettingsTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

thanks for your answer. can you please provide an example on how exactly to theme only the toolbar to have both the text and the back arrow colors white, while activity theme is not affected? I tried copying the code you provided, it made my toolbar's text and back arrow black — Ofek Agmon, Nov 01 '16 at 14:53
@OfekAgmon This is the code I use in my build. The `ThemeOverlay.AppCompat.Dark.ActionBar` style should make the text and icons white in your `AppBarLayout` and `Toolbar`. Are you positive you applied the theme correctly? — Bryan, Nov 01 '16 at 14:56
yes, I copied your exactly the way it is.. if the ThemeOverlay.AppCompat.Dark.ActionBar should make the toolbar and icons white, what is the ThemeOverlay.AppCompat.Light for? anyway, its still black in my app.. — Ofek Agmon, Nov 01 '16 at 15:00
@OfekAgmon Any `ThemeOverlay` is used to override the current theme with another. I use `ThemeOverlay.AppCompat.Light` to override the `ThemeOverlay.AppCompat.Dark.ActionBar` for any pop-ups that the `Toolbar` produces (such as the overflow menu). — Bryan, Nov 01 '16 at 15:03
@OfekAgmon This is actually the default theme that Android Studio provides for a new project. If you start a brand new project, with a new `Activity`, Android Studio will generate the same theme for you. Along with an `Activity` that uses the `ThemeOverlay.AppCompat.Dark.ActionBar` for the `AppBarLayout` theme. — Bryan, Nov 01 '16 at 15:05
So, apparently the Github repo for the nested settings screen caused the issues. I switched to ferrannp/material-preferences https://github.com/ferrannp/material-preferences and didn't need to set any teme for the toolbar. its really is the default theme — Ofek Agmon, Nov 01 '16 at 21:17

Tint CheckBox and Toolbar with different colors in nested preference activity

1 Answers1