How do you set the title color for the new Toolbar? How do you set the title color for the new Toolbar? android android

How do you set the title color for the new Toolbar?


Option 1) The quick and easy way (Toolbar only)

Since appcompat-v7-r23 you can use the following attributes directly on your Toolbar or its style:

app:titleTextColor="@color/primary_text"app:subtitleTextColor="@color/secondary_text"

If your minimum SDK is 23 and you use native Toolbar just change the namespace prefix to android.

In Java you can use the following methods:

toolbar.setTitleTextColor(Color.WHITE);toolbar.setSubtitleTextColor(Color.WHITE);

These methods take a color int not a color resource ID!

Option 2) Override Toolbar style and theme attributes

layout/xxx.xml

<android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"    android:theme="@style/ThemeOverlay.MyApp.ActionBar"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    style="@style/Widget.MyApp.Toolbar.Solid"/>

values/styles.xml

<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar">    <item name="android:background">@color/actionbar_color</item>    <item name="android:elevation" tools:ignore="NewApi">4dp</item>    <item name="titleTextAppearance">...</item></style><style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">    <!-- Parent theme sets colorControlNormal to textColorPrimary. -->    <item name="android:textColorPrimary">@color/actionbar_title_text</item></style>

Help! My icons changed color too!

@PeterKnut reported this affects the color of overflow button, navigation drawer button and back button. It also changes text color of SearchView.

Concerning the icon colors: The colorControlNormal inherits from

  • android:textColorPrimary for dark themes (white on black)
  • android:textColorSecondary for light themes (black on white)

If you apply this to the action bar's theme, you can customize the icon color.

<item name="colorControlNormal">#de000000</item>

There was a bug in appcompat-v7 up to r23 which required you to also override the native counterpart like so:

<item name="android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>

Help! My SearchView is a mess!

Note: This section is possibly obsolete.

Since you use the search widget which for some reason uses different back arrow (not visually, technically) than the one included with appcompat-v7, you have to set it manually in the app's theme. Support library's drawables get tinted correctly. Otherwise it would be always white.

<item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>

As for the search view text...there's no easy way. After digging through its source I found a way to get to the text view. I haven't tested this so please let me know in the comments if this didn't work.

SearchView sv = ...; // get your search view instance in onCreateOptionsMenu// prefix identifier with "android:" if you're using native SearchViewTextView tv = sv.findViewById(getResources().getIdentifier("id/search_src_text", null, null));tv.setTextColor(Color.GREEN); // and of course specify your own color

Bonus: Override ActionBar style and theme attributes

Appropriate styling for a default action appcompat-v7 action bar would look like this:

<!-- ActionBar vs Toolbar. --><style name="Widget.MyApp.ActionBar.Solid" parent="Widget.AppCompat.ActionBar.Solid">    <item name="background">@color/actionbar_color</item> <!-- No prefix. -->    <item name="elevation">4dp</item> <!-- No prefix. -->    <item name="titleTextStyle">...</item> <!-- Style vs appearance. --></style><style name="Theme.MyApp" parent="Theme.AppCompat">    <item name="actionBarStyle">@style/Widget.MyApp.ActionBar.Solid</item>    <item name="actionBarTheme">@style/ThemeOverlay.MyApp.ActionBar</item>    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item></style>


Here is my solution if you need to change only color of title and not color of text in search widget.

layout/toolbar.xml

<android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/toolbar"    android:background="@color/toolbar_bg"    app:theme="@style/AppTheme.Toolbar"    app:titleTextAppearance="@style/AppTheme.Toolbar.Title"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"/>

values/themes.xml

<resources>    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <item name="windowActionBar">false</item>    </style>    <style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">        <!-- Customize color of navigation drawer icon and back arrow -->         <item name="colorControlNormal">@color/toolbar_icon</item>    </style>    <style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">        <!-- Set proper title size -->        <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>        <!-- Set title color -->        <item name="android:textColor">@color/toolbar_title</item>    </style></resources>

In the similar way, you can set also subtitleTextAppearance.


If you are supporting API 23 and above, you can now use the titleTextColor attribute to set the Toolbar's title color.

layout/toolbar.xml

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:titleTextColor="@color/colorPrimary"        />

MyActivity.java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar)toolbar.setTitleTextColor(Color.WHITE);