How to set title color for new toolbar?

Question

I use the new V7 toolbar, and for life it is impossible for me to understand how to change the color of the name. I set the toolbar @style to the style declared in styles.xml and applied titleTextStyle with textColor. Am I missing something? I encode Lollipop, but am currently testing 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"/> 

Answer 1

Option 1) 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 are using 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 accept an int color not a color resource identifier!

Option 2) Override toolbar style and 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 also changed color!

@PeterKnut reported that this affects the color of the overflow button, navigation box button, and return button. It also changes the color of the text SearchView .

Regarding icon colors: 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 theme, you can adjust the color of the icon.

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

An error occurred in appcompat-v7 with r23, which required you to also redefine the native instance as follows:

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

Help! My SearchView is a mess!

Note. This section may be outdated.

Since you are using a search widget that for some reason uses a different back arrow (not visually, technically) than the one included in appcompat-v7, you must install it manually in the application theme. Supported support libraries are correctly colored. Otherwise, it will always be white.

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

As for the text of the search view ... there is no easy way. After digging through its source, I found a way to get to the text view. I have not tested this, so please let me know in the comments if this does not 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 Style Attributes

The appropriate style for the appcompat-v7 action bar will look like this by default:

 <!-- 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> 

Answer 2

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

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"/> 

<strong> 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> 

Similarly, you can also set subtitleTextAppearance.

Answer 3

If you support API 23 and above, now you can use the titleTextColor attribute to set the title color of the toolbar.

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

Answer 4

Setting app:titleTextColor on my android.support.v7.widget.Toolbar works for me on Android 4.4 and 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" /> 

Answer 5

This annoyed me for a while, and I didn't like any of the answers, so I looked at the source to see how it works.

FractalWrench is on the right track, but it can be used below API 23 and does not need to be installed on the toolbar.

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

 app:theme="@style/ActionBar" 

and in this style you can set the title text color 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> 

Retains all attributes that can be set for the 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> 

Answer 6

The easiest way to change the color of a Toolbar header is with CollapsingToolbarLayout .

Add the styles below 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> 

Answer 7

It 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> 

Answer 8

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 to your toolbar.xml:

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

Remeber @ color / colorText is just your color.xml file with a color attribute named colorText and your color. This is the best way to call your lines, rather than hard code your color inside your toolbar.xml. You also have other options for changing text, such as: textAppearance ... etc ... just type app: text ... and intelisense will offer you options in Android Studio.

Your last 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> 

Note: this toolbar must 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

Answer 9

To change 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); 

Answer 10

 <?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" /> 

Answer 11

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> 

Answer 12

 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 a 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> 

Answer 13

Do this with toolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

// this is the style in which you can customize the 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> 

Answer 14

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

  <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" />