Change Toolbar color in Appcompat 21

Question

I am testing out the new Appcompat 21 Material Design features  Therefore I ve created a Toolbar like this    lt 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   gt    and included it in my main layout file   Then I ve set it as supportActionBar like that   Toolbar toolBar    Toolbar findViewById R id activity my toolbar   setSupportActionBar toolBar     It s working  but somehow I can t quite figure out how to customize the toolbar  It s grey and the text on it is black  How should I change background and text color   I ve gone through this instructions   http   android-developers blogspot de 2014 10 appcompat-v21-material-design-for-pre html  What have I overseen to change colors     lt style name  AppTheme  parent  Theme AppCompat Light  gt       lt item name  android windowActionBar  tools ignore  NewApi  gt false lt  item gt       lt item name  windowActionBar  gt false lt  item gt   lt  style gt    EDIT   I was able to change the background color by adding these lines of code to the theme    lt item name  colorPrimary  gt  color actionbar lt  item gt   lt item name  colorPrimaryDark  gt  color actionbar dark lt  item gt    But they won t affect the text color  What am I missing  Instead of the black text and black menu button  I d rather prefer a white text and white menu buttons

User · Answer

For people who are using AppCompatActivity with Toolbar as white background. Do 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>

User · Answer

Achieve this by using the toolbar like this     lt 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   gt

User · Answer

UPDATE 12 11 2019  Material Components Library  With the Material Components and Androidx libraries you can use    the android background attribute in the layout    lt com google android material appbar MaterialToolbar     android id    id toolbar      android layout width  match parent      android layout height   attr actionBarSize      android background   attr colorPrimary   apply the default style  style   style Widget MaterialComponents Toolbar Primary  or customize the style inheriting from it    lt com google android material appbar MaterialToolbar     android id    id toolbar      android layout width  match parent      android layout height   attr actionBarSize      style   style Widget MaterialComponents Toolbar Primary   override the default color using the android theme attribute    lt com google android material appbar MaterialToolbar     android id    id toolbar      android layout width  match parent      android layout height   attr actionBarSize      android theme   style MyThemeOverlay Toolbar     with      lt style name  MyThemeOverlay Toolbar  parent  ThemeOverlay MaterialComponents Toolbar Primary  gt       lt item name  android textColorPrimary  gt      lt  item gt       lt item name  colorPrimary  gt  color            lt item name  colorOnPrimary  gt  color      lt  item gt     lt  style gt    OLD  Support libraries  You can use a app theme   style ThemeOverlay AppCompat Dark ActionBar  theme as suggested in other answers  but you can also use a solution like this    lt 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   gt    And you can have the full control of your ui elements with these styles    lt style name  ActionBarThemeOverlay  parent    gt       lt item name  android textColorPrimary  gt  fff lt  item gt       lt item name  colorControlNormal  gt  fff lt  item gt       lt item name  colorControlHighlight  gt  3fff lt  item gt   lt  style gt    lt style name  HeaderBar  gt       lt item name  android background  gt  colorPrimary lt  item gt   lt  style gt    lt style name  ActionBarPopupThemeOverlay  parent  ThemeOverlay AppCompat Light   gt       lt item name  android background  gt  android color white lt  item gt       lt item name  android textColor  gt  000 lt  item gt   lt  style gt

User · Answer

If you want to change the color of your toolbar all throughout your app  leverage the styles xml  In general  I avoid altering ui components in my java code unless I am trying to do something programatically  If this is a one time set  then you should be doing it in xml to make your code cleaner  Here is what your styles xml will look like        lt  -- Base application theme  -- gt   lt style name  YourAppName AppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt  -- Color Primary will be your toolbar color -- gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt  -- Color Primary Dark will be your default status bar color -- gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt   lt  style gt    Make sure you use the above style in your AndroidManifext xml as such        lt application         android theme   style YourAppName AppTheme  gt       lt  application gt    I wanted different toolbar colors for different activities  So I leveraged styles again like this        lt style name  YourAppName AppTheme Activity1  gt       lt item name  colorPrimary  gt  color activity1 primary lt  item gt       lt item name  colorPrimaryDark  gt  color activity1 primaryDark lt  item gt   lt  style gt    lt style name  YourAppName AppTheme Activity2  gt       lt item name  colorPrimary  gt  color activity2 primary lt  item gt       lt item name  colorPrimaryDark  gt  color activity2 primaryDark lt  item gt   lt  style gt    again  apply the styles to each activity in your AndroidManifest xml as such    lt activity     android name   Activity2      android theme   style YourAppName AppTheme Activity2   lt  activity gt    lt activity     android name   Activity1      android theme   style YourAppName AppTheme Activity1   lt  activity gt

User · Answer

You can change the color of the text in the toolbar with these    lt item name  android textColorPrimary  gt  FFFFFF lt  item gt   lt item name  android textColor  gt  FFFFFF lt  item gt

User · Answer

This is what is known as a DarkActionBar which means you should use the following theme to obtain your desired style    lt 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    gt

User · Answer

Try this in your styles xml   colorPrimary will be the toolbar color    lt resources gt    lt style name  AppTheme  parent  Theme AppCompat  gt       lt item name  colorPrimary  gt  color primary lt  item gt       lt item name  colorPrimaryDark  gt  color primary pressed lt  item gt       lt item name  colorAccent  gt  color accent lt  item gt   lt  style gt      Did you build this in Eclipse by the way

User · Answer

You can set a custom toolbar item color dynamically by creating a custom 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  lt  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 lt    ViewGroup v  getChildCount    lli                      doColorizing   ViewGroup v  getChildAt lli   colorFilter  toolbarIconsColor                                    if v instanceof ActionMenuView                for int j   0  j  lt    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  lt  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 your layout file  Now you can set a custom color using  toolbar setItemColor Color Red     Sources   I found the information to do this here  How to dynamicaly change Android Toolbar icons color  and then I edited it  improved upon it  and posted it here  GitHub AndroidDynamicToolbarItemColor

User · Answer

again this is all in the link you supplied  to change the text to white all you have to do is change the theme   use this theme   lt 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   gt

User · Answer

Hey if you want to apply Material theme for only android 5 0 then you can add this theme in  it   lt style name  AppHomeTheme  parent   android style Theme Material Light  gt            lt  -- customize the color palette -- gt           lt item name  android colorPrimary  gt  color blue dark bg lt  item gt           lt item name  android colorPrimaryDark  gt  color blue status bar lt  item gt           lt item name  android colorAccent  gt  color blue color accent lt  item gt           lt item name  android textColor  gt  android color white lt  item gt           lt item name  android textColorPrimary  gt  android color white lt  item gt           lt item name  android actionMenuTextColor  gt  android color black lt  item gt       lt  style gt     Here below line is responsibly for text color of Actionbar of Material design    lt item name  android textColorPrimary  gt  android color white lt  item gt

User · Answer

i solved this issue after more Study     for Api21 and more use      lt item name  android textColorPrimary  gt  color white lt  item gt    for Lower versions use      lt item name  actionMenuTextColor  gt  color white lt  item gt

[android] Change Toolbar color in Appcompat 21

Examples related to android

Examples related to android-actionbar

Examples related to android-appcompat

Examples related to android-actionbar-compat

[android] Change Toolbar color in Appcompat 21

Examples related to android

Examples related to android-actionbar

Examples related to android-appcompat

Examples related to android-actionbar-compat

Examples related to android-toolbar