Styling the android.support.v7.widget.Toolbar with AppCompat from styles.xml

Question

I've got a problem with styling a Toolbar inside a CoordinatorLayout / AppBarLayout from my styles.xml file in combination with using AppCompat from the 23.1.1 support libraries.

The problem I want to solve: My activity is used from different app projects, all of which use Theme.AppCompat.Light.NoActionBar. Some apps have light primary colors where everything is fine. Some, however, have dark primary colors that would require setting android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" on the Toolbar in the activity's layout file - which I cannot do as the same code and resource files are used by the other apps as well.

EDIT: I think I got this solved now. Keeping the styles.xml as it was, in the Activity I now inherit the actionBarTheme as follows (got the idea from reading http://developer.android.com/reference/android/R.styleable.html#Theme_toolbarStyle):

<android.support.v7.widget.Toolbar
    android:id="@+id/webview_toolbar"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="?attr/actionBarTheme"/>

See the following related questions and blog posts:

After reading all of the above, I tried to solve my problem by deriving an app theme from Theme.AppCompat.Light.DarkActionBar (instead of *.NoActionBar) in those apps that have dark primary colors and applying all styles that let the action bar go away. Out of despair, I have even tried to set actionBarTheme and actionBarStyle.

My app has a styles.xml file that looks like this:

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimaryDark">@color/myDarkRed</item>
    <item name="colorPrimary">@color/myRed</item>
    <item name="colorAccent">@color/myOrange</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="actionBarTheme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    <item name="actionBarStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

My activity (derived from AppCompatActivity) has a layout.xml that looks like this:

<android.support.v7.widget.Toolbar
    android:id="@+id/webview_toolbar"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Unfortunately, my Activity still has dark text color on the toolbar. What am I doing wrong?

Now, after being desperate enough to ask for help, I finally found something that might be what I need: use "?attr" to inherit the theme from the app does work. Will edit my post. — Mark Asbach

Aditya Vyas-Lakhan Aditya Vyas-Lakhan · Accepted Answer · 2015-12-03T08:21:51

this one work for me

<style name="MyToolbarTheme">
        <!-- Used to tint the back arrow, menu and spinner arrow -->
        <item name="colorPrimary">#ffffff</item>
        <item name="colorPrimaryDark">#ffffff</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <item name="colorControlNormal">#ff0000</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:textColorHighlight">#ffffff</item>
        <item name="actionOverflowMenuStyle">@style/CMOptionsMenu</item>
        <item name="searchViewStyle">@style/MySearchViewStyle</item>

    </style>

    <style name="CMOptionsMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
        <item name="android:popupBackground">#ffffff</item>
    </style>

    <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
        <item name="android:textColor">@android:color/black</item>
    </style>

Styling the android.support.v7.widget.Toolbar with AppCompat from styles.xml

2 Answers