Change toolbar color in Appcompat 21

Question

I am testing the new Appcompat 21 Material Design design features. Therefore, I created a toolbar as follows:

<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/activity_my_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/> 

and included it in my main layout file.

Then I set it as supportActionBar as follows:

 Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar); setSupportActionBar(toolBar); 

This works, but for some reason I cannot figure out how to customize the toolbar. It is gray, and the text on it is black. How to change the background color and text?

I followed the instructions below:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

What did I observe the color change?

  <style name="AppTheme" parent="Theme.AppCompat.Light"> <item name="android:windowActionBar" tools:ignore="NewApi">false</item> <item name="windowActionBar">false</item> </style> 

EDIT

I managed to change the background color by adding these lines of code to the theme:

 <item name="colorPrimary">@color/actionbar</item> <item name="colorPrimaryDark">@color/actionbar_dark</item> 

But they will not affect the color of the text. What am I missing? Instead of black text and a black menu button, I prefer white text and white menu buttons:

Answer 1

again it's all in the link you provided

to change the text to white, all you have to do is change the theme.

use this theme

 <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/activity_my_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

Answer 2

You can use the theme app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" as suggested in other answers, but you can also use a solution like this:

 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" style="@style/HeaderBar" app:theme="@style/ActionBarThemeOverlay" app:popupTheme="@style/ActionBarPopupThemeOverlay"/> 

And you can fully control your ui elements with these styles:

 <style name="ActionBarThemeOverlay" parent=""> <item name="android:textColorPrimary">#fff</item> <item name="colorControlNormal">#fff</item> <item name="colorControlHighlight">#3fff</item> </style> <style name="HeaderBar"> <item name="android:background">?colorPrimary</item> </style> <style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" > <item name="android:background">@android:color/white</item> <item name="android:textColor">#000</item> </style> 

Answer 3

Hey, if you want to apply the theme material only for Android version 5.0, you can add this theme to

 <style name="AppHomeTheme" parent="@android:style/Theme.Material.Light"> <!-- customize the color palette --> <item name="android:colorPrimary">@color/blue_dark_bg</item> <item name="android:colorPrimaryDark">@color/blue_status_bar</item> <item name="android:colorAccent">@color/blue_color_accent</item> <item name="android:textColor">@android:color/white</item> <item name="android:textColorPrimary">@android:color/white</item> <item name="android:actionMenuTextColor">@android:color/black</item> </style> 

Below is the line responsible for the color of the text in the Actionbar of Material design.

 <item name="android:textColorPrimary">@android:color/white</item> 

Answer 4

This is what is known as DarkActionBar, which means you should use the following theme to get the style you want:

 <android.support.v7.widget.Toolbar android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="@dimen/triple_height_toolbar" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

Answer 5

You can dynamically adjust the dynamic color of a toolbar item by creating your own toolbar class:

 package view; import android.app.Activity; import android.content.Context; import android.graphics.ColorFilter; import android.graphics.PorterDuff; import android.graphics.PorterDuffColorFilter; import android.support.v7.internal.view.menu.ActionMenuItemView; import android.support.v7.widget.ActionMenuView; import android.support.v7.widget.Toolbar; import android.util.AttributeSet; import android.util.Log; import android.view.View; import android.view.ViewGroup; import android.widget.AutoCompleteTextView; import android.widget.EditText; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.TextView; public class CustomToolbar extends Toolbar{ public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO Auto-generated constructor stub } public CustomToolbar(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public CustomToolbar(Context context) { super(context); // TODO Auto-generated constructor stub ctxt = context; } int itemColor; Context ctxt; @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { Log.d("LL", "onLayout"); super.onLayout(changed, l, t, r, b); colorizeToolbar(this, itemColor, (Activity) ctxt); } public void setItemColor(int color){ itemColor = color; colorizeToolbar(this, itemColor, (Activity) ctxt); } /** * Use this method to colorize toolbar icons to the desired target color * @param toolbarView toolbar view being colored * @param toolbarIconsColor the target color of toolbar icons * @param activity reference to activity needed to register observers */ public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) { final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN); for(int i = 0; i < toolbarView.getChildCount(); i++) { final View v = toolbarView.getChildAt(i); doColorizing(v, colorFilter, toolbarIconsColor); } //Step 3: Changing the color of title and subtitle. toolbarView.setTitleTextColor(toolbarIconsColor); toolbarView.setSubtitleTextColor(toolbarIconsColor); } public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){ if(v instanceof ImageButton) { ((ImageButton)v).getDrawable().setAlpha(255); ((ImageButton)v).getDrawable().setColorFilter(colorFilter); } if(v instanceof ImageView) { ((ImageView)v).getDrawable().setAlpha(255); ((ImageView)v).getDrawable().setColorFilter(colorFilter); } if(v instanceof AutoCompleteTextView) { ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor); } if(v instanceof TextView) { ((TextView)v).setTextColor(toolbarIconsColor); } if(v instanceof EditText) { ((EditText)v).setTextColor(toolbarIconsColor); } if (v instanceof ViewGroup){ for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){ doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor); } } if(v instanceof ActionMenuView) { for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) { //Step 2: Changing the color of any ActionMenuViews - icons that //are not back button, nor text, nor overflow menu icon. final View innerView = ((ActionMenuView)v).getChildAt(j); if(innerView instanceof ActionMenuItemView) { int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length; for(int k = 0; k < drawablesCount; k++) { if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) { final int finalK = k; //Important to set the color filter in seperate thread, //by adding it to the message queue //Won't work otherwise. //Works fine for my case but needs more testing ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter); // innerView.post(new Runnable() { // @Override // public void run() { // ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter); // } // }); } } } } } } } 

then refer to it in the layout file. Now you can set your own color using

 toolbar.setItemColor(Color.Red); 

Sources:

I found information to do this here: How to dynamically change the color of Android toolbar icons

and then I edited it, improved it and posted it here: GitHub: AndroidDynamicToolbarItemColor

Answer 6

You can change the color of the text on the toolbar in the following ways:

 <item name="android:textColorPrimary">#FFFFFF</item> <item name="android:textColor">#FFFFFF</item> 

Answer 7

Achieve this using the toolbar as follows:

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

Answer 8

Try this in your .xml styles:

colorPrimary will be the color of the toolbar.

 <resources> <style name="AppTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_pressed</item> <item name="colorAccent">@color/accent</item> </style> 

Did you build it in Eclipse, by the way?

Answer 9

I solved this problem after studying ...

for Api21 and more use

  <item name="android:textColorPrimary">@color/white</item> 

for lower versions use

  <item name="actionMenuTextColor">@color/white</item> 

Answer 10

If you want to change the color of your toolbar throughout your application, use styles.xml. In general, I avoid changing the ui components in my java code unless I try to do something programmatically. If this is a one-time set, then you should do it in xml to make your code cleaner. Here is what your .xml style will look like:

  <!-- Base application theme. --> <style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Color Primary will be your toolbar color --> <item name="colorPrimary">@color/colorPrimary</item> <!-- Color Primary Dark will be your default status bar color --> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> </style> 

Make sure you use this style in your AndroidManifext.xml as such:

  <application android:theme="@style/YourAppName.AppTheme"> </application> 

I need different toolbar colors for different actions. So I used the styles again:

  <style name="YourAppName.AppTheme.Activity1"> <item name="colorPrimary">@color/activity1_primary</item> <item name="colorPrimaryDark">@color/activity1_primaryDark</item> </style> <style name="YourAppName.AppTheme.Activity2"> <item name="colorPrimary">@color/activity2_primary</item> <item name="colorPrimaryDark">@color/activity2_primaryDark</item> </style> 

apply styles to each activity in your AndroidManifest.xml as such:

 <activity android:name=".Activity2" android:theme="@style/YourAppName.AppTheme.Activity2" </activity> <activity android:name=".Activity1" android:theme="@style/YourAppName.AppTheme.Activity1" </activity> 

Answer 11

For people who use AppCompatActivity with a toolbar as a white background. Use this code.

Updated: December 2017

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:theme="@style/ThemeOverlay.AppCompat.Light"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_edit" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/AppTheme.AppBarOverlay" app:title="Edit Your Profile"/> </android.support.design.widget.AppBarLayout>