How do I style appcompat-v7 Toolbar like Theme AppCompat Light DarkActionBar

Question

I m trying to recreate the look of Theme AppCompat Light DarkActionBar with the new support library Toolbar    If I choose Theme AppCompat Light my toolbar will be light and if I choose Theme AppCompat it will be dark   Technically you have to use the  NoActionBar version but as far as I can tell the only difference is   lt style name  Theme AppCompat NoActionBar  gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  android windowNoTitle  gt true lt  item gt   lt  style gt    Now there s no Theme AppCompat Light DarkActionBar but naively I thought it d be good enough to just make my own   lt style name  Theme AppCompat Light DarkActionBar NoActionBar  gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  android windowNoTitle  gt true lt  item gt   lt  style gt    However with this my toolbars are still Light themed  I ve spent hours now trying different combinations of mixing the Dark  base  theme and the Light theme but I just can t find a combination that will let me have light backgrounds on everything but the toolbars   Is there a way of getting the AppCompat Light DarkActionBar look with import android support v7 widget Toolbar s

User · Answer

To customize tool bar style  first create tool bar custom style inheriting Widget AppCompat Toolbar  override properties and then add it to custom app theme as shown below  see http   www zoftino com android-toolbar-tutorial for more information tool bar and styles       lt style name  MyAppTheme  parent  Theme AppCompat Light NoActionBar  gt           lt item name  colorPrimary  gt  color colorPrimary lt  item gt           lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt           lt item name  toolbarStyle  gt  style MyToolBarStyle lt  item gt       lt  style gt       lt style name  MyToolBarStyle  parent  Widget AppCompat Toolbar  gt           lt item name  android background  gt  80deea lt  item gt           lt item name  titleTextAppearance  gt  style MyTitleTextAppearance lt  item gt           lt item name  subtitleTextAppearance  gt  style MySubTitleTextAppearance lt  item gt       lt  style gt       lt style name  MyTitleTextAppearance  parent  TextAppearance Widget AppCompat Toolbar Title  gt           lt item name  android textSize  gt 35dp lt  item gt           lt item name  android textColor  gt  ff3d00 lt  item gt       lt  style gt       lt style name  MySubTitleTextAppearance  parent  TextAppearance Widget AppCompat Toolbar Subtitle  gt           lt item name  android textSize  gt 30dp lt  item gt           lt item name  android textColor  gt  1976d2 lt  item gt       lt  style gt

User · Answer

Edit  After updating to appcompat-v7 22 1 1 and using AppCompatActivity instead of ActionBarActivity my styles xml looks like    lt style name  AppBaseTheme  parent  Theme AppCompat Light  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 item name  theme  gt  style ThemeOverlay AppCompat Dark ActionBar lt  item gt   lt  style gt    Note  This means I am using a Toolbar provided by the framework  NOT included in an XML file    This worked for me  styles xml file    lt style name  AppBaseTheme  parent  Theme AppCompat Light  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 item name  windowActionBar  gt false lt  item gt       lt item name  theme  gt  style ThemeOverlay AppCompat Dark ActionBar lt  item gt   lt  style gt    Update  A quote from Gabriele Mariotti s blog      With the new Toolbar you can apply a style and a theme        They are different        The style is local to the Toolbar view  for example the background color        The app theme is instead global to all ui elements inflated in the Toolbar  for example the color of the title and icons

User · Answer

Ok after having sunk way to much time into this problem this is the way I managed to get the appearance I was hoping for  I m making it a separate answer so I can get everything in one place   It s a combination of factors   Firstly  don t try to get the toolbars to play nice through just themes  It seems to be impossible   So apply themes explicitly to your Toolbars like in oRRs answer  layout 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 layout alignParentTop  true      android layout width  match parent      android layout height   attr actionBarSize      app theme   style Dark Overlay      app popupTheme   style Dark Overlay LightPopup    gt    However this is the magic sauce  In order to actually get the background colors I was hoping for you have to override the background attribute in your Toolbar themes  values styles xml    lt  --      I expected android colorBackground to be what I was looking for but     it seems you have to override android background -- gt   lt style name  Dark Overlay  parent   style ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  android background  gt  attr colorPrimary lt  item gt   lt  style gt    lt style name  Dark Overlay LightPopup  parent  ThemeOverlay AppCompat Light  gt       lt item name  android background  gt  color material grey 200 lt  item gt   lt  style gt    then just include your toolbar layout in your other layouts   lt include android id    id mytoolbar  layout   layout toolbar    gt    and you re good to go   Hope this helps someone else so you don t have to spend as much time on this as I have    if anyone can figure out how to make this work using just themes  ie not having to apply the themes explicitly in the layout files I ll gladly support their answer instead   EDIT   So apparently posting a more complete answer was a downvote magnet so I ll just accept the imcomplete answer above but leave this answer here in case someone actually needs it  Feel free to keep downvoting if it makes you happy though

User · Answer

The cleanest way I found to do this is create a child of  ThemeOverlay AppCompat Dark ActionBar    In the example  I set the Toolbar s background color to RED and text s color to BLUE    lt style name  MyToolbar  parent  ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  android background  gt  FF0000 lt  item gt       lt item name  android textColorPrimary  gt  0000FF lt  item gt   lt  style gt    You can then apply your theme to the toolbar    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 layout height  wrap content      android layout width  match parent      app theme   style MyToolbar      android minHeight   attr actionBarSize   gt

User · Answer

Similar to Arnav Rao s  but with a different parent        lt style name  AppTheme  parent  Theme AppCompat Light DarkActionBar  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 item name  toolbarStyle  gt  style MyToolbar lt  item gt   lt  style gt    lt style name  MyToolbar  parent  ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  android background  gt  ff0000 lt  item gt   lt  style gt    With this approach  the appearance of the Toolbar is entirely defined in the app styles  so you don t need to place any styling on each toolbar

User · Answer

The recommended way to style the Toolbar for a Light DarkActionBar clone would be to use Theme AppCompat Light DarkActionbar as parent app theme and add the following attributes to the style to hide the default ActionBar    lt style name  AppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  windowNoTitle  gt true lt  item gt   lt  style gt    Then use the following as your Toolbar    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 colorPrimary          app popupTheme   style ThemeOverlay AppCompat Light    gt   lt  android support design widget AppBarLayout gt    For further modifications  you would create styles extending ThemeOverlay AppCompat Dark ActionBar and ThemeOverlay AppCompat Light replacing the ones within AppBarLayout- gt android theme and Toolbar- gt app popupTheme  Also note that this will pick up your  attr colorPrimary if you have set it in your main style so you might get a different background color   You will find a good example of this is in the current project template with an Empty Activity of Android Studio  1 4

User · Answer

Yout can try this below    lt style name  MyToolbar  parent  Widget AppCompat Toolbar  gt       lt  -- your code here -- gt   lt  style gt    And the detail elements you can find them in https   developer android com reference android support v7 appcompat R styleable html Toolbar  Here are some more TextAppearance Widget AppCompat Toolbar Title  TextAppearance Widget AppCompat Toolbar Subtitle  Widget AppCompat Toolbar Button Navigation   Hope this can help you

[android] How do I style appcompat-v7 Toolbar like Theme.AppCompat.Light.DarkActionBar?

Examples related to android

Examples related to android-appcompat

Examples related to android-theme

[android] How do I style appcompat-v7 Toolbar like Theme.AppCompat.Light.DarkActionBar?

Examples related to android

Examples related to android-appcompat

Examples related to android-theme

Examples related to android-toolbar