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

I'm using the new v7 Toolbar and for the life of me can't figure out how to change the color of the title. I've set the @style of the Toolbar to a style declared in styles.xml and applied a titleTextStyle with a textColor. Am I missing something? I'm coding for Lollipop but testing currently on a Kitkat device.

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="ActionBar" parent="Theme.AppCompat">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleTextStyle</item>
    </style>

    <style name="ActionBar.TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_title_text</item>
    </style>

</resources>

actionbar.xml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    style="@style/ActionBar"/>

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 SearchView
TextView 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);

Setting app:titleTextColor on my android.support.v7.widget.Toolbar works for me on Android 4.4 and on 6.0 too with com.android.support:appcompat-v7:23.1.0:

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

This was annoying me a while and I didn't like any of the answers given, so I had a look at the source to see how it works.

FractalWrench is on the right path, but it can be used below API 23 and doesn't have to be set on the toolbar it's self.

As others have said you can set a style on the toolbar with

app:theme="@style/ActionBar"

and in that style you can set the title text colour with

<item name="titleTextColor">#00f</item>

for pre API 23 or for 23+

<item name="android:titleTextColor">your colour</item>

Full xml

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


<style name="ActionBar" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
    <item name="titleTextColor">your colour</item>
    <item name="android:background">#ff9900</item>
</style>

Heres all the attributes that can be set for a toolbar

<declare-styleable name="Toolbar">
    <attr name="titleTextAppearance" format="reference" />
    <attr name="subtitleTextAppearance" format="reference" />
    <attr name="title" />
    <attr name="subtitle" />
    <attr name="gravity" />
    <attr name="titleMargins" format="dimension" />
    <attr name="titleMarginStart" format="dimension" />
    <attr name="titleMarginEnd" format="dimension" />
    <attr name="titleMarginTop" format="dimension" />
    <attr name="titleMarginBottom" format="dimension" />
    <attr name="contentInsetStart" />
    <attr name="contentInsetEnd" />
    <attr name="contentInsetLeft" />
    <attr name="contentInsetRight" />
    <attr name="maxButtonHeight" format="dimension" />
    <attr name="navigationButtonStyle" format="reference" />
    <attr name="buttonGravity">
        <!-- Push object to the top of its container, not changing its size. -->
        <flag name="top" value="0x30" />
        <!-- Push object to the bottom of its container, not changing its size. -->
        <flag name="bottom" value="0x50" />
    </attr>
    <!-- Icon drawable to use for the collapse button. -->
    <attr name="collapseIcon" format="reference" />
    <!-- Text to set as the content description for the collapse button. -->
    <attr name="collapseContentDescription" format="string" />
    <!-- Reference to a theme that should be used to inflate popups
         shown by widgets in the toolbar. -->
    <attr name="popupTheme" format="reference" />
    <!-- Icon drawable to use for the navigation button located at
         the start of the toolbar. -->
    <attr name="navigationIcon" format="reference" />
    <!-- Text to set as the content description for the navigation button
         located at the start of the toolbar. -->
    <attr name="navigationContentDescription" format="string" />
    <!-- Drawable to set as the logo that appears at the starting side of
         the Toolbar, just after the navigation button. -->
    <attr name="logo" />
    <!-- A content description string to describe the appearance of the
         associated logo image. -->
    <attr name="logoDescription" format="string" />
    <!-- A color to apply to the title string. -->
    <attr name="titleTextColor" format="color" />
    <!-- A color to apply to the subtitle string. -->
    <attr name="subtitleTextColor" format="color" />
</declare-styleable>

Surender Kumar

If you can use appcompat-v7 app:titleTextColor="#fff">

<android.support.v7.widget.Toolbar  
        android:id="@+id/toolbar"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/colorPrimary"   
        android:visibility="gone"   
        app:titleTextColor="#fff">   
    </android.support.v7.widget.Toolbar>

Simplest way to change Toolbar title color with in CollapsingToolbarLayout.

Add below styles to CollapsingToolbarLayout

<android.support.design.widget.CollapsingToolbarLayout
        app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
        app:expandedTitleTextAppearance="@style/ExpandedAppBar">

styles.xml

<style name="ExpandedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

    <style name="CollapsedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

Hitesh Sahu

This worked for me

<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:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:navigationIcon="@drawable/ic_back"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:subtitleTextColor="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:title="This week stats"
    app:titleTextColor="@color/white">


    <ImageView
        android:id="@+id/submitEditNote"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:src="@android:drawable/ic_menu_manage" />
</android.support.v7.widget.Toolbar>

Create a toolbar in your xml...toolbar.xml:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"

    </android.support.v7.widget.Toolbar>

Then add the following in your toolbar.xml:

app:titleTextColor="@color/colorText"
app:title="@string/app_name">

Remeber @color/colorText is simply your color.xml file with the color attribute named colorText and your color.This is the best way to calll your strings rather than hardcoding your color inside your toolbar.xml. You also have other options to modify your text,such as:textAppearance...etc...just type app:text...and intelisense will give you options in android studio.

your final toolbar should look like this:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/Theme.AppCompat"
       app:subtitleTextAppearance="@drawable/icon"
        app:title="@string/app_name">
    </android.support.v7.widget.Toolbar>

NB:This toolbar should be inside your activity_main.xml.Easy Peasie

Another option is to do it all in your class:

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

Good Luck

For Change The color

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

Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
        myToolbar.setTitleTextColor(ContextCompat.getColor(getApplicationContext(), R.color.Auth_Background));
        setSupportActionBar(myToolbar);

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          xmlns:app="http://schemas.android.com/apk/res-auto">

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

public class MyToolbar extends android.support.v7.widget.Toolbar {

public MyToolbar(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    AppCompatTextView textView = (AppCompatTextView) getChildAt(0);
    if (textView!=null) textView.setTextAppearance(getContext(), R.style.TitleStyle);
}

}

Or simple use from MainActivity:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain);
setSupportActionBar(toolbar);
((AppCompatTextView) toolbar.getChildAt(0)).setTextAppearance(this, R.style.TitleStyle);

style.xml

<style name="TileStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/White</item>
    <item name="android:shadowColor">@color/Black</item>
    <item name="android:shadowDx">-1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
</style>

Do it withtoolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

//this is style where you can customize your color scheme

 <style name="TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:fontFamily">@string/you_font_family</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAppearance">@style/you_text_style</item>
    <item name="android:textColor">#000000</item>
    <item name="android:textSize">20sp</item>
</style>

Very simple, this worked for me (title and icon white):

    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@color/PrimaryColor"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="4dp" />

来源：https://stackoverflow.com/questions/26852108/how-do-you-set-the-title-color-for-the-new-toolbar

标签

android

themes

toolbar