No shadow by default on Toolbar

Question

I m updating my app with the new Toolbar from the support library v21  My problem is that the toolbar does not cast any shadow if I don t set the  elevation  attribute  Is that the normal behavior or I m doing something wrong   My code is    lt LinearLayout xmlns android  http   schemas android com apk res android     android layout width  fill parent     android layout height  fill parent     android orientation  vertical  gt       lt android support v7 widget Toolbar        xmlns app  http   schemas android com apk res-auto         android id    id my awesome toolbar         android layout width  match parent         android layout height  wrap content         android background   attr colorPrimary         android elevation  4dp         android minHeight   attr actionBarSize         app theme   style ThemeOverlay AppCompat Dark ActionBar         app popupTheme   style ThemeOverlay AppCompat Light    gt       lt FrameLayout        android id    id FrameLayout1         android layout width  match parent         android layout height  match parent  gt                               And in my Activity - OnCreate method       Toolbar toolbar    Toolbar  findViewById R id my awesome toolbar       setSupportActionBar toolbar

User · Answer

In my situation elevation doesn t work well because I haven t given any background to the toolbar  Try giving background color to the toolbar then set elevation and it will work well

User · Answer

My problem is that the toolbar does not cast any shadow if I don t set the  elevation  attribute  Is that the normal behavior or I m doing something wrong    That s the normal behavior  Also see the FAQ at the end of this post

User · Answer

For 5 0     You can use AppBarLayout with Toolbar  AppBarLayout has  elevation  attribure     lt android support design widget AppBarLayout         android id    id appbar          android layout width  match parent          android elevation  4dp          android layout height  wrap content          android orientation  vertical  gt           lt include layout   layout toolbar    gt       lt  android support design widget AppBarLayout gt

User · Answer

I am posting this because this took me hours to find so i hope it may help someone  I had a problem that the shadow elevation was not showing though i created a simple activity and placed the toolbar as follows    lt androidx appcompat widget Toolbar         android id  quot   id mt toolbar quot          android layout width  quot match parent quot          android layout height  quot  attr actionBarSize quot          app layout collapseMode  quot pin quot          android background  quot  color colorPrimaryDark quot          android elevation  quot 12dp quot   gt   It turns out that in the manifest setting android hardwareAccelerated  quot false quot  was causing it  once i removed it  the shadow appeared

User · Answer

i added    lt android support v7 widget Toolbar     android translationZ  5dp   gt    in toolbar description and it works for me  Using 5 0

User · Answer

I ended up setting my own drop shadow for the toolbar  thought it might helpful for anyone looking for it    lt LinearLayout xmlns android  http   schemas android com apk res android                xmlns app  http   schemas android com apk res-auto                android layout width  wrap content                android layout height  wrap content                android layout gravity  top                android orientation  vertical  gt        lt android support v7 widget Toolbar android id    id toolbar                                         android layout width  match parent                                         android layout height  wrap content                                         android background   color color alizarin                                         android titleTextAppearance   color White                                         app theme   style ThemeOverlay AppCompat Dark ActionBar   gt        lt FrameLayout android layout width  match parent                   android layout height  match parent  gt            lt  --      Place Your Content Here      -- gt            lt View android layout width  match parent                android layout height  5dp                android background   drawable toolbar dropshadow   gt        lt  FrameLayout gt    lt  LinearLayout gt     drawable toolbar dropshadow    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android          android shape  rectangle  gt        lt gradient android startColor   android color transparent                android endColor   88333333                android angle  90   gt    lt  shape gt     color color alizarin   lt color name  color alizarin  gt  e74c3c lt  color gt

User · Answer

Was toying with this for hours  here s what worked for me   Remove all the elevation attributes from the appBarLayout and Toolbar widgets  including styles xml if you are applying any styling    Now inside activity apply the elvation on your actionBar   Toolbar toolbar    Toolbar findViewById R id toolbar   setSupportActionBar toolbar   getSupportActionBar   setElevation 3 0f     This should work

User · Answer

Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library   Add the Design Support library as a dependency in build gradle    compile  com android support design 22 2 0    Add AppBarLayout supplied by the library as a wrapper around your Toolbar layout to generate a drop shadow        lt android support design widget AppBarLayout         android layout width  match parent          android layout height  wrap content  gt          lt android support v7 widget Toolbar                 gt       lt  android support design widget AppBarLayout gt    Here is the result      There are lots of other tricks with the design support library    http   inthecheesefactory com blog android-design-support-library-codelab en http   android-developers blogspot in 2015 05 android-design-support-library html   AndroidX  As above but with dependency   implementation  com google android material material 1 0 0     and com google android material appbar AppBarLayout

User · Answer

This worked for me very well    lt android support v7 widget CardView     xmlns card view  http   schemas android com apk res-auto      android layout width  match parent      android layout height  wrap content      android background   color primary      card view cardElevation  4dp      card view cardCornerRadius  0dp  gt        lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height  wrap content          android background   color primary          android minHeight   attr actionBarSize    gt    lt  android support v7 widget CardView gt

User · Answer

Use  values folders to apply the correct shadow style based on OS version   For under 5 0 devices  use  values styles xml to add windowContentOverlay to the body of your activity    lt style name  MyViewArea  gt       lt item name  android foreground  gt  android windowContentOverlay lt  item gt   lt  style gt    lt style name  MyToolbar  gt       lt item name  android background  gt  attr colorPrimary lt  item gt   lt  style gt    Then add your own custom shadow by changing your Theme to include    lt item name  android windowContentOverlay  gt  drawable bottom shadow lt  item gt    You can grab Google s IO app shadow resource here  https   github com google iosched blob master android src main res drawable-xxhdpi bottom shadow 9 png  For 5 0 devices  amp  later  use  values-v21 styles xml to add elevation to your toolbar using a custom header style    lt style name  MyViewArea  gt   lt  style gt    lt style name  MyToolbar  gt       lt item name  android background  gt  attr colorPrimary lt  item gt       lt item name  android elevation  gt 4dp lt  item gt   lt  style gt    Note that in the second case  I had to create an empty MyViewArea style so the windowContentOverlay wouldn t show up too    Update  changed resource names and added Google shadow

User · Answer

If you are seting the ToolBar as ActionBar then just call   getSupportActionBar   setElevation YOUR ELEVATION     Note  This must be called after setSupportActionBar toolbar

User · Answer

actionbar background xml              lt item gt           lt shape gt               lt solid android color   color black    gt               lt corners android radius  2dp    gt               lt gradient                 android startColor   color black                  android centerColor   color black                  android endColor   color white                  android angle  270    gt           lt  shape gt       lt  item gt        lt item android bottom  3dp   gt           lt shape gt                lt solid android color   ffffff    gt               lt corners android radius  1dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    add to actionbar style background   lt style name  Theme ActionBar  parent  style Widget AppCompat Light ActionBar Solid  gt       lt item name  background  gt  drawable actionbar background lt  item gt       lt item name  android elevation  gt 0dp lt  item gt       lt item name  android windowContentOverlay  gt  null lt  item gt       lt item name  android layout marginBottom  gt 5dp lt  item gt    name  displayOptions  useLogo showHome showTitle showCustom       add to Basetheme   lt style name  BaseTheme  parent  Theme AppCompat Light  gt      lt item name  android homeAsUpIndicator  gt  drawable home back lt  item gt      lt item name  actionBarStyle  gt  style Theme ActionBar lt  item gt   lt  style gt

User · Answer

All you need is a android margin bottom equal to the android elevation value  No AppBarLayout  clipToPadding  etc  required   Example    lt  xml version  1 0  encoding  utf-8   gt   lt androidx appcompat widget Toolbar     xmlns android  http   schemas android com apk res android      android id    id toolbar      android layout width  match parent      android layout height   attr actionBarSize      android layout marginBottom  4dp      android background   android color white      android elevation  4dp  gt        lt androidx constraintlayout widget ConstraintLayout         android layout width  match parent          android layout height  match parent  gt            lt  --Inner layout goes here-- gt        lt  androidx constraintlayout widget ConstraintLayout gt   lt  androidx appcompat widget Toolbar gt

User · Answer

You can t use the elevation attribute before API 21  Android Lollipop   You can however add the shadow programmatically  for example using a custom view placed below the Toolbar    layout toolbar      lt android support v7 widget Toolbar     android id    id toolbar      android layout width  match parent      android layout height  wrap content      android background   color blue      android minHeight   attr actionBarSize      app theme   style ThemeOverlay AppCompat ActionBar    gt    lt View     android id    id toolbar shadow      android layout width  match parent      android layout height  3dp      android background   drawable toolbar dropshadow    gt       drawable toolbar dropshadow   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt       lt gradient         android startColor   android color transparent          android endColor   88333333          android angle  90   gt   lt  shape gt    in your activity layout      lt include layout   layout toolbar    gt

User · Answer

Most solutions work fine here  Would like to show another  similar alternative    gradle   implementation  androidx appcompat appcompat 1 0 0-rc02  implementation  com google android material material 1 0 0-rc02  implementation  androidx core core-ktx 1 0 0-rc02  implementation  androidx constraintlayout constraintlayout 1 1 3    You layout can have a Toolbar View  and a shadow for it  below  similar to this  need modification of course      lt LinearLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent      android orientation  vertical  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          android theme   style ThemeOverlay AppCompat Dark ActionBar          app theme   style ThemeOverlay AppCompat Dark ActionBar          app titleTextAppearance   style Base TextAppearance Widget AppCompat Toolbar Title   gt        lt include         layout   layout toolbar action bar shadow          android layout width  match parent          android layout height  wrap content   gt    lt  LinearLayout gt    res drawable-v21 toolbar action bar shadow xml   lt androidx appcompat widget AppCompatImageView     xmlns android  http   schemas android com apk res android  android layout width  match parent      android layout height  wrap content  android src   drawable msl  action bar shadow   gt    res drawable toolbar action bar shadow xml   lt FrameLayout     xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools      android layout width  match parent  android layout height  wrap content      android foreground   android windowContentOverlay  tools ignore  UnusedAttribute   gt    res drawable msl  action bar shadow xml   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt shape             android dither  true              android shape  rectangle   gt               lt gradient                 android angle  270                  android endColor   00000000                  android startColor   33000000    gt                lt size android height  10dp    gt           lt  shape gt       lt  item gt    lt  layer-list gt    styles xml   lt resources gt       lt style name  AppTheme  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  colorAccent  gt  color colorAccent lt  item gt       lt  style gt   lt  resources gt    MainActivity kt  class MainActivity   AppCompatActivity          override fun onCreate savedInstanceState  Bundle             super onCreate savedInstanceState          setContentView R layout activity main          setSupportActionBar toolbar as Toolbar            Full sample here  as I ve noticed the IDE has a bug of saying foreground attribute is too new to be used here

User · Answer

The correct answer will be to add android backgroundTint   ff00ff  to the tool bar with  android background   android color white   If you use other color then white for the background it will remove the shadow  Nice one Google

User · Answer

I had similar problem with the shadow  The shadow is drawn by direct parent of AppBarLayout in my case  If height of the parent is the same as AppBarLayout s the shadow cannot be drawn  So checking size of the parent layout and maybe layout remake can solve the problem  https   www reddit com r androiddev comments 6xddb0 having a toolbar as a fragment the shadow

User · Answer

You can also make it work with RelativeLayout  This reduces layout nesting a little bit      lt RelativeLayout     android layout width  match parent      android layout height  match parent  gt        lt include         android id    id toolbar          layout   layout toolbar    gt        lt FrameLayout         android id    id container          android layout width  match parent          android layout height  match parent          android layout below   id toolbar    gt        lt View         android layout width  match parent          android layout height  5dp          android layout below   id toolbar          android background   drawable toolbar shadow    gt   lt  RelativeLayout gt

[android] No shadow by default on Toolbar?

Examples related to android

Examples related to android-5.0-lollipop

Examples related to material-design

[android] No shadow by default on Toolbar?

Examples related to android

Examples related to android-5.0-lollipop

Examples related to material-design

Examples related to android-toolbar