Styling Toolbar does not work using AppCompat

Question

I am trying as best I can to style the ActionBar (i.e. an android.support.v7.widget.Toolbar) in my app, but it just won't work. I am following the official documentation when trying to achieve this. What I am really trying to do is to make the title color white. It is currently displayed in black. My target API is 11.

What am I doing wrong?

res/values/themes.xml

<resources>

    <!-- Base theme applied no matter what API -->
    <style name="MMTheme.Base" parent="Theme.AppCompat.Light">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>

        <item name="android:textColor">@color/mm_dark_gray</item>
        <item name="colorPrimary">@color/mm_brown</item>
        <item name="colorPrimaryDark">@color/mm_dark_gray</item>
        <item name="colorAccent">@color/mm_green</item>

        <item name="android:actionBarStyle">@style/MMActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MMActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/mm_green</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MMActionBar</item>
        <item name="actionBarTabTextStyle">@style/MMActionBarTabText</item>
        <item name="actionMenuTextColor">@color/mm_green</item>
    </style>

    <style name="MMTheme" parent="MMTheme.Base"></style>

    <!-- ActionBar style -->
    <style name="MMActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@color/mm_green</item>

        <item name="android:titleTextStyle">@style/MMActionBarTitleText</item>

        <!-- Support library compatibility -->
        <item name="titleTextStyle">@style/MMActionBarTitleText</item>
    </style>

    <!-- ActionBar title text -->
    <style name="MMActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/mm_white</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>

    <!-- ActionBar tabs text -->
    <style name="MMActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@color/mm_green</item>
        <!-- The textColor property is backward compatible with the Support Library -->
    </style>

</resources>

The inflated android.support.v7.widget.Toolbar

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mm_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"/>

In the Activity

// Setup main Toolbar
Toolbar toolbar = (Toolbar) mInflatedActivity.findViewById(R.id.mm_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.ic_launcher);

I have tried everything I can think of and searched a lot online, but I cannot make it work. What am I missing?

Current result is (nevermind the search icon):

Adding style="@style/MMActionBar" to the xml properties of the android.support.v7.widget.Toolbar results in this:

Changing main parent theme to Theme.AppCompat.Light.DarkActionBar does nothing.

Answer 1

Just use this in yout layout xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/red600"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Set theme in xml itself to ThemeOverlay.AppCompat.Dark.ActionBar which will make title text white.

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

And I guess this is the right way to theme Toolbar, since according to official Android Developer blog

Styling of Toolbar is done differently to the standard action bar, and is set directly onto the view.

Here's a basic style you should be using when you're using a Toolbar as your action bar:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

The app:theme declaration will make sure that your text and items are using solid colors (i.e 100% opacity white).

Answer 2

I have faced same problem. The following solution solved my problem. For this you need to make changes at two places.

1.Modify your toolbar xml like this,

<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="@color/ColorPrimary"
android:elevation="2dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
    android:id="@+id/TV_tool_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="My App Name"
    android:textSize="18sp"
    android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>

2. Modify like this in your activity file.

   Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
   setSupportActionBar(toolbar);
   getSupportActionBar().setTitle(null);
   

Thats it. This will make your title color white. Cheers..!