How to set toolbar text and back arrow color

Question

The background of the toolbar is dark, I want the text and the back arrow to be white. I tried to follow, but it does not work.

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/blue</item> <item name="colorPrimaryDark">@color/blue_darker</item> <item name="colorAccent">@color/purple</item> <!-- item name="android:textColorPrimary">@color/white</item--> // I don't want to set this, changes everywhere. <item name="android:textColorSecondary">@color/white</item> <item name="android:toolbarStyle">@style/AppTheme.ToolbarStyle</item> <item name="toolbarStyle">@style/AppTheme.ToolbarStyle</item> <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowStyle</item> </style> <style name="AppTheme.ToolbarStyle" parent="Base.Widget.AppCompat.Toolbar"> <!--<item name="actionOverflowButtonStyle">@style/AppTheme.OverflowButtonStyle</item>--> <item name="android:textColor">@color/white</item> // doesn't work <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item> <item name="android:titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item> <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item> </style> 

Answer 1

Most likely, you extend from the unfaithful parent. If not, you can try adding the style layout to the toolbar layout if you want to override the theme settings.

In the toolbar layout:

  <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="?attr/actionBarSize" android:minHeight="?attr/actionBarSize" app:theme="@style/ToolBarStyle" app:popupTheme="@style/ToolBarPopupStyle" android:background="@color/actionbar_color" /> 

In your styles:

  <!-- ToolBar --> <style name="ToolBarStyle" parent="Theme.AppCompat"> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> </style> 

Answer 2

Add the following as toolbar.xml

 <?xml version="1.0" encoding="utf-8"?> <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_height="wrap_content" android:layout_width="match_parent" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" android:background="?attr/colorPrimary"> </android.support.v7.widget.Toolbar> 

Then in the layout where you need

 <include layout="@layout/toolbar"/> 

Enjoy

Answer 3

Inside the activity you can use

  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); toolbar.setTitleTextColor(getResources().getColor(android.R.color.white)); 

If you want to choose xml for the title and white, just add this style to style.xml.

  <style name="ToolBarStyle" parent="Theme.AppCompat"> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> </style> 

And the toolbar looks like this:

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

Answer 4

This solution could be simpler. But this requires a higher version of the API (23). just add this code to the toolbar in XML:

 <Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?android:attr/actionBarSize" android:background="?android:attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" android:titleTextColor="#ffffffff" /> 

Answer 5

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

Answer 6

 <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="?attr/actionBarSize" android:background="@color/actionBar" app:titleTextAppearance="@style/ToolbarTitleText" app:theme="@style/ToolBarStyle"> <TextView android:id="@+id/title" style="@style/ToolbarTitleText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="hh"/> 

 <!-- ToolBar --> <style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar"> <item name="actionMenuTextColor">#ff63BBF7</item> </style> 

use application: theme = "@ style / ToolBarStyle"

Reference resources: http://blog.csdn.net/wyyl1/article/details/45972371

Answer 7

this method helped me.

 <style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primaryDark</item> <item name="colorAccent">@color/highlightRed</item> <item name="actionBarTheme">@style/ToolbarStyle</item> </style> <style name="ToolbarStyle" parent="Widget.AppCompat.ActionBar"> <item name="android:textColorPrimary">@color/white</item> </style> 

Answer 8

Try this in an XML file

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" app:titleTextColor="@color/colorAccent" app:theme="@style/ToolbarColoredBackArrow" app:subtitleTextColor="@color/colorAccent" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> 

And add this to your colors.xml file

  <color name="colorAccent">YOUR_COLOR</color> 

Answer 9

Try many methods, in the lower version of the API, the valid method is <item name="actionMenuTextColor">@color/your_color</item> and does not use the Android namespace

ps:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!-- change the textColor --> <item name="actionMenuTextColor">@color/actionMenuTextColor</item> </style> 

Answer 10

I used placeholders to just follow them, as you might want to keep inheritance from the original style.

Before

 <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/{{originalBaseStyle}}" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

After:

styles.xml

 <style name="{{yourToolbarStyle}}" parent="{{originalBaseStyle}}"> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:textColorSecondary">@android:color/white</item> <item name="actionMenuTextColor">@android:color/white</item> <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> </style> 

therefore

 <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/{{yourToolbarStyle}}" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

Answer 11

If we follow the activity pattern created in Android Studios, then this is AppBarLayout, which should have an Android theme AppBarOverlay, which you must define in your styles.xml file. This should give you the white color toobar / actionbar color text.

 <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> ... 

In the styles.xml file, verify that the following exists:

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> 

Answer 12

add this line to the toolbar tag. 100% working android: theme = "@ style / Theme.AppCompat.Light.DarkActionBar"

Answer 13

If you use the latest iteration of Android Studio 3.0 and generate your activity classes, change this in the stylesheets:

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> 

For this:

 <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" /> 

Answer 14

If you are using AndroidX (as of July 2019), you can add them:

 <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="pin" app:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/> 

NOTE! This has been tested to work if your Toolbar is located directly inside the AppBarLayout but not inside the CollapsingToolbarLayout

Answer 15

To change the back toolbar icon, you can use this:
Add <item name="toolbarStyle">@style/ToolbarStyle</item> to your theme.
And here is the ToolbarStyle itself:

 <style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar"> <item name="navigationIcon">@drawable/ic_up_indicator</item> </style>