CODEWITHSUNDEEP
androidandroid-support-libraryandroid-toolbarandroid-themepreferenceactivity
Ofek Agmon
Ofek Agmon

Reputation: 5198

Tint CheckBox and Toolbar with different colors in nested preference activity

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).

enter image description here

enter image description here

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.

Upvotes: 0

Views: 360

Answers (1)

Bryan
Bryan

Reputation: 15156

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>

Upvotes: 1

Related Questions