Android color of back arrow, menu text color and c

Question

I've been struggling to change the colors of some components with styles but seems every property affects another. Here's the styles that I'm using

Color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">@color/blue</color>
    <color name="colorPrimaryDark">@color/blue</color>
    <color name="colorAccent">@color/blue</color>

    <color name="blue">#032C60</color>
    <color name="grey">#e1e0e0</color>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:textColorPrimary">@color/colorPrimary</item>
        <item name="android:textColorSecondary">@color/colorPrimary</item>
        <item name="android:itemTextAppearance">@style/menuItemColor</item>
        <item name="colorControlNormal">@android:color/white</item>
    </style>
    <style name="menuItemColor">
        <item name="android:textColor">@color/blue</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

    <!--<style name="ToolbarTheme">-->
        <!--<item name="android:actionMenuTextColor">@color/blue
</resources>

styles.xml v21

<resources>>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@color/colorPrimary</item>
        <item name="android:textColorPrimary">@color/colorPrimary</item>
        <item name="android:textColorSecondary">@color/colorPrimary</item>
        <item name="android:itemTextAppearance">@style/menuItemColor</item>
    </style>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

I have a blue toolbar and made the arrow, ... menu action white, and toolbar title white with

app:titleTextColor="@android:color/white"

The only problem remains is that unfocused edittext underline and unchecked checkbox border color both is effected by control color white, which is on a white background so they need to be blue as well. But when I change the styles, back arrow and ... is also affected. Any helps are appreciated.

Answer 1

Add style for your Toolbar in both style.xml files:

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">?android:attr/colorPrimary</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Set style to your Toolbar layout:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    style="@style/AppTheme.Toolbar"/>

This will give you Toolbar that coloured in your Primary Colour and all elements will become light.

Then delete app:titleTextColor="@android:color/white" to restore checkbox and other elements colour.