AppCompat v21 Dark ToolBar style

Yoni Levy picture Yoni Levy · Oct 23, 2014 · Viewed 15.9k times · Source

I want my ToolBar to serve as an ActionBar and I want it to look like a light theme with a dark action bar. I can't seem to find the right combination to do it.

This is what I have in styles.xml

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="windowActionBar">false</item>

    <item name="colorPrimary">@color/my_awesome_color</item>
    <item name="android:textColorPrimary">@color/my_awesome_text_color</item>
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>
    <item name="colorAccent">@color/accent</item>

</style> 

And My toolbar

 <android.support.v7.widget.Toolbar
    android:id="@+id/my_awesome_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" />

Currently I get this

enter image description here

What I want is that the menu items be white as well

Is there an elegant solution or do I have to choose a custom style for each one of the toolbar's items? It seems there should be.

Answer

MrEngineer13 picture MrEngineer13 · Oct 23, 2014

You can use the following theme on your Toolbar to get it to appear "dark". The first portion app:theme themes the color of the text on Toolbar to be light among other things. The app:popupTheme is for styling the overflow menu indicator to be light.

<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />