Android color of back arrow, menu text color and component default colors

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.

It's already blue, but the underline only gets blue when you focus on it, it is white when its not focused — Barışcan Kayaoğlu

Destiner Destiner · Accepted Answer · 2015-11-20T18:47:56

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.

Android color of back arrow, menu text color and component default colors

1 Answers