How to set Toolbar text and back arrow color

Question

Toolbar background is dark color  I want text and back arrow to be white  I tried following  but it doesnt work    lt style name  Theme MyTheme  parent  Theme AppCompat Light NoActionBar  gt            lt item name  colorPrimary  gt  color blue lt  item gt           lt item name  colorPrimaryDark  gt  color blue darker lt  item gt           lt item name  colorAccent  gt  color purple lt  item gt           lt  -- item name  android textColorPrimary  gt  color white lt  item-- gt     I don t want to set this  changes everywhere            lt item name  android textColorSecondary  gt  color white lt  item gt           lt item name  android toolbarStyle  gt  style AppTheme ToolbarStyle lt  item gt           lt item name  toolbarStyle  gt  style AppTheme ToolbarStyle lt  item gt            lt item name  drawerArrowStyle  gt  style AppTheme DrawerArrowStyle lt  item gt        lt  style gt        lt style name  AppTheme ToolbarStyle  parent  Base Widget AppCompat Toolbar  gt           lt  -- lt item name  actionOverflowButtonStyle  gt  style AppTheme OverflowButtonStyle lt  item gt -- gt           lt item name  android textColor  gt  color white lt  item gt     doesn t work          lt item name  titleTextAppearance  gt  style TextAppearance AppCompat Widget ActionBar Title Inverse lt  item gt           lt item name  android titleTextAppearance  gt  style TextAppearance AppCompat Widget ActionBar Title Inverse lt  item gt           lt item name  subtitleTextAppearance  gt  style TextAppearance Widget AppCompat Toolbar Subtitle lt  item gt       lt  style gt

User · Answer

This approach worked for me using the Material Components library:

In styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your styles here -->

    <item name="toolbarStyle">@style/AppTheme.Toolbar</item>
</style>

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">@android:color/white</item>
</style>

Adapted from this answer: https://stackoverflow.com/a/48205577/238753

User · Answer

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 toolbar  android layout width  match parent  android layout height   attr actionBarSize  android background   color actionBar  app titleTextAppearance   style ToolbarTitleText  app theme   style ToolBarStyle  gt    lt 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   gt       lt  -- ToolBar -- gt   lt style name  ToolBarStyle  parent  Widget AppCompat Toolbar  gt       lt item name  actionMenuTextColor  gt  ff63BBF7 lt  item gt   lt  style gt    use app theme   style ToolBarStyle   Reference resources http   blog csdn net wyyl1 article details 45972371

User · Answer

Try a lot of methods  in the low version of the API a feasible method is  lt item name  actionMenuTextColor  gt  color your color lt  item gt  and don t use the Android namespace  ps      lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt       lt  -- Customize your theme here  -- gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorAccent lt  item gt        lt  -- change the textColor -- gt       lt item name  actionMenuTextColor  gt  color actionMenuTextColor lt  item gt   lt  style gt

User · Answer

Add this line to Toolbar  100  working  android theme   style Theme AppCompat Light DarkActionBar

User · Answer

To change the Toolbar s back icon drawable you can use this  Add the  lt item name  toolbarStyle  gt  style ToolbarStyle lt  item gt  into your Theme  And here is the ToolbarStyle itself    lt style name  ToolbarStyle  parent  Widget AppCompat Toolbar  gt       lt item name  navigationIcon  gt  drawable ic up indicator lt  item gt   lt  style gt

User · Answer

If you use AndroidX  as of July 2019   you may add these     lt 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   gt    NOTE  This was tested to work if your Toolbar is placed directly inside AppBarLayout but not inside CollapsingToolbarLayout

User · Answer

If using the latest iteration of Android Studio 3 0 and generating your Activity classes  in your styles files change this    lt style name  AppTheme AppBarOverlay  parent  ThemeOverlay AppCompat Dark ActionBar    gt    To this    lt style name  AppTheme AppBarOverlay  parent  ThemeOverlay AppCompat ActionBar    gt

User · Answer

lt android support v7 widget Toolbar xmlns android  quot http   schemas android com apk res android quot    xmlns app  quot http   schemas android com apk res-auto quot    android id  quot   id toolbar quot    android layout width  quot match parent quot    android layout height  quot wrap content quot    android background  quot  color color primary quot    android theme  quot  style GalaxyZooThemeToolbarDarkOverflow quot    app popupTheme  quot  style Theme AppCompat NoActionBar quot    gt   That toolbar theme specifies a textColorPrimary and textColorSecondary to change the color of the title text and of the menu overflow button  You could just specify the standard Theme AppCompat Light NoActionBar theme for the toolbar  to get the dark text and overflow icon   but I wanted to derive from my own theme and make only small changes  because I have no idea what else might be affected   lt style name  quot GalaxyZooThemeToolbarDarkOverflow quot  parent  quot Theme AppCompat NoActionBar quot  gt     lt  -- android textColorPrimary is the  color of the title text    in the Toolbar  in the Theme AppCompat theme   -- gt     lt item name  quot android textColorPrimary quot  gt  color abc primary text material light lt  item gt      lt  -- android textColorPrimaryInverse is the  color of the title    text in the Toolbar  in the Theme AppCompat Light theme   -- gt     lt  --  lt item name  quot android textColorPrimaryInverse quot  gt  color abc primary text material light lt  item gt  -- gt    This is how you can change the color of text and icons on toolbar  For more Ref  https   www murrayc com permalink 2014 10 28 android-changing-the-toolbars-text-color-and-overflow-icon-color

User · Answer

Chances are you are extending from the wrong parent  If not  you can try adding the style to the toolbar layout directly  if you want to override the theme s settings   In your toolbar layout     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 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    gt    In your styles     lt  -- ToolBar -- gt     lt style name  ToolBarStyle  parent  Theme AppCompat  gt         lt item name  android textColorPrimary  gt  android color white lt  item gt         lt item name  android textColorSecondary  gt  android color white lt  item gt         lt item name  actionMenuTextColor  gt  android color white lt  item gt               lt item name  actionOverflowButtonStyle  gt  style ActionButtonOverflowStyle lt  item gt         lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt    lt  style gt

User · Answer

If we follow the activity template created by Android Studios  it s the AppBarLayout that needs to have an android theme of AppBarOverlay  which you should define in the your styles xml  That should give you your white color toobar actionbar color text    lt 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  gt         In styles xml  make sure the following exists    lt style name  AppTheme AppBarOverlay  parent  ThemeOverlay AppCompat Dark ActionBar    gt

User · Answer

I used placeholders so just follow along  as you might want to still keep the inheritance from the original style   Before   lt 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   gt    After   styles xml   lt style name    yourToolbarStyle    parent    originalBaseStyle    gt       lt item name  android textColorPrimary  gt  android color white lt  item gt       lt item name  android textColorSecondary  gt  android color white lt  item gt       lt item name  actionMenuTextColor  gt  android color white lt  item gt       lt item name  actionOverflowButtonStyle  gt  style ActionButtonOverflowStyle lt  item gt       lt item name  drawerArrowStyle  gt  style DrawerArrowStyle lt  item gt   lt  style gt    Therefore   lt 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   gt

User · Answer

this method helped me     lt style name  AppTheme  parent  Theme AppCompat Light  gt           lt item name  colorPrimary  gt  color primary lt  item gt           lt item name  colorPrimaryDark  gt  color primaryDark lt  item gt           lt item name  colorAccent  gt  color highlightRed lt  item gt           lt item name  actionBarTheme  gt  style ToolbarStyle lt  item gt   lt  style gt    lt style name  ToolbarStyle  parent  Widget AppCompat ActionBar  gt           lt item name  android textColorPrimary  gt  color white lt  item gt   lt  style gt

User · Answer

lt android support design widget AppBarLayout         android layout width  match parent          android layout height  wrap content          android theme   style ThemeOverlay AppCompat Dark ActionBar  gt            lt 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    gt   lt  android support design widget AppBarLayout gt

User · Answer

Inside Activity  you can use       Toolbar toolbar    Toolbar  findViewById R id toolbar       setSupportActionBar toolbar       toolbar setTitleTextColor getResources   getColor android R color white      If you love to choose xml for both title color  amp  back arrow white just add this style in style xml       lt style name  ToolBarStyle  parent  Theme AppCompat  gt       lt item name  android textColorPrimary  gt  android color white lt  item gt       lt item name  android textColorSecondary  gt  android color white lt  item gt       lt item name  actionMenuTextColor  gt  android color white lt  item gt   lt  style gt    And toolbar look like      lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          app theme   style ToolBarStyle          android layout height   attr actionBarSize      gt

User · Answer

Add the following as toolbar xml   lt  xml version  1 0  encoding  utf-8   gt   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 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  gt    lt  android support v7 widget Toolbar gt    Then in the layout where you needed   lt include layout   layout toolbar   gt    Enjoy

User · Answer

This solution might be easier  But it does require a higher API version 23   simply add this code to your toolbar in XML    lt 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    gt

User · Answer

Try this on your XML file   lt 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    gt    And add this is your colors xml file       lt color name  colorAccent  gt YOUR COLOR lt  color gt

[android] How to set Toolbar text and back arrow color

Examples related to android

Examples related to android-layout

Examples related to android-theme

Examples related to android-styles

[android] How to set Toolbar text and back arrow color

Examples related to android

Examples related to android-layout

Examples related to toolbar

Examples related to android-theme

Examples related to android-styles