Add shadow to custom shape on Android

Question

Is it possible to add a drop shadow to a custom shape in Android  After looking through the documentation  I only see a way to apply a text shadow   I ve tried this with no luck    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 solid android color   90ffffff   gt          lt corners android radius  12dp    gt        lt item name  android shadowColor  gt  000000 lt  item gt         lt item name  android shadowRadius  gt 5 lt  item gt         lt item name  android shadowDy  gt 3 lt  item gt       lt  shape gt

User · Answer

The following worked for me  Just save as custom shape xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt        lt  --  shadow  -- gt       lt item gt           lt shape android shape  rectangle   gt              lt solid android color   000000   gt              lt corners android radius  12dp    gt           lt  shape gt       lt  item gt         lt item android bottom  3px  gt           lt shape android shape  rectangle  gt                lt solid android color   90ffffff   gt               lt corners android radius  12dp    gt            lt  shape gt       lt  item gt    lt  layer-list gt

User · Answer

If you don t mind doing some custom drawing with the Canvas API  check out this answer about drop shadows   Here s a follow-up question to that one which fixes a problem in the original

User · Answer

I think this drop shadow value is good for most cases    lt solid android color   20000000    gt

User · Answer

9 patch to the rescue  nice shadow could be achieved easily especially with this awesome tool -  Android 9-patch shadow generator  PS  if project won t be able to compile you will need to move black lines in android studio editor a little bit

User · Answer

This is my version of a drop shadow  I was going for a hazy shadow all around the shape and used this answer by Joakim Lundborg as my starting point  What I changed is to add corners to all the shadow items and to increase the radius of the corner for each subsequent shadow item  So here is the xml    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt  -- Drop Shadow Stack -- gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   02000000    gt               lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   05000000    gt               lt corners android radius  7dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   10000000    gt               lt corners android radius  6dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   15000000    gt               lt corners android radius  5dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   20000000    gt               lt corners android radius  4dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   25000000    gt               lt corners android radius  3dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt solid android color   30000000    gt               lt corners android radius  3dp    gt           lt  shape gt       lt  item gt        lt  -- Background -- gt       lt item gt       lt shape gt               lt solid android color   0099CC    gt           lt corners android radius  3dp    gt       lt  shape gt      lt  item gt   lt  layer-list gt

User · Answer

This question may be old  but for anybody in future that wants a simple way to achieve complex shadow effects check out my library here https   github com BluRe-CN ComplexView  Using the library  you can change shadow colors  tweak edges and so much more  Here s an example to achieve what you seek for    lt com blure complexview ComplexView         android layout width  400dp          android layout height  600dp          app radius  10dp          app shadow  true          app shadowSpread  2  gt            lt com blure complexview ComplexView             android layout width  match parent              android layout height  match parent              app color   fdfcfc              app radius  10dp    gt       lt  com blure complexview ComplexView gt    To change the shadow color  use app shadowColor  your color code

User · Answer

I would suggest a small improvement to Bruce s solution which is to prevent overdrawing the same shape on top of each other and to simply use stroke instead of solid  It would look like this    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt  -- Drop Shadow Stack -- gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   02000000  android width  1dp     gt               lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   05000000  android width  1dp    gt               lt corners android radius  7dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   10000000  android width  1dp    gt               lt corners android radius  6dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   15000000  android width  1dp    gt               lt corners android radius  5dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   20000000  android width  1dp    gt               lt corners android radius  4dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   25000000  android width  1dp    gt               lt corners android radius  3dp    gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt padding android top  1dp  android right  1dp  android bottom  1dp  android left  1dp    gt               lt stroke android color   30000000  android width  1dp    gt               lt corners android radius  3dp    gt           lt  shape gt       lt  item gt        lt  -- Background -- gt       lt item gt           lt shape gt               lt solid android color   FFF    gt               lt corners android radius  3dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt     Lastly I wanted to point out for people who would like a shadow in a specific direction that all you have to do is set the top  bottom  left or right to 0dp  for a solid line  or -1dp  for nothing

User · Answer

After Lots of search finally I got this      lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt    lt  -- Bottom 2dp Shadow -- gt   lt item gt       lt shape  android shape  rectangle  gt            lt solid android color   d8d8d8    gt           lt corners android radius  7dp    gt        lt  shape gt   lt  item gt    lt  -- White Top color -- gt   lt item android bottom  3px  gt        lt shape  android shape  rectangle  gt        lt solid android color   FFFFFF    gt       lt corners android radius  7dp    gt         lt  shape gt    lt  item gt     lt  layer-list gt

User · Answer

Old question  but Elevation  available with Material Design now provides a shadow to any views    lt TextView android id    id myview      android elevation  2dp  android background   drawable myrect    gt    See the docs at https   developer android com training material shadows-clipping html

User · Answer

This is how I do it     Code bellow for one button STATE    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt  --  background shadow  -- gt       lt item gt           lt shape android shape  rectangle   gt               lt solid android color   000000    gt                lt corners android radius  15dp    gt           lt  shape gt       lt  item gt       lt  -- background color -- gt       lt item         android bottom  3px          android left  3px          android right  3px          android top  3px  gt           lt shape android shape  rectangle   gt               lt solid android color   cc2b2b    gt                 lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt  -- over left shadow -- gt       lt item gt           lt shape android shape  rectangle   gt               lt gradient                 android angle  180                  android centerColor   00FF0000                  android centerX  0 9                  android endColor   99000000                  android startColor   00FF0000    gt                lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt  -- over right shadow -- gt       lt item gt           lt shape android shape  rectangle   gt               lt gradient                 android angle  360                  android centerColor   00FF0000                  android centerX  0 9                  android endColor   99000000                  android startColor   00FF0000    gt                lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt  -- over top shadow -- gt       lt item gt           lt shape android shape  rectangle   gt               lt gradient                 android angle  -90                  android centerColor   00FF0000                  android centerY  0 9                  android endColor   00FF0000                  android startColor   99000000                  android type  linear    gt                lt corners android radius  8dp    gt           lt  shape gt       lt  item gt       lt  -- over bottom shadow -- gt       lt item gt           lt shape android shape  rectangle   gt               lt gradient                 android angle  90                  android centerColor   00FF0000                  android centerY  0 9                  android endColor   00FF0000                  android startColor   99000000                  android type  linear    gt                lt corners android radius  8dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    Then you should have a selector with diferent versions of the button  something like    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt        lt item android drawable   drawable ic button red pressed  android state pressed  true   gt   lt  -- pressed -- gt       lt item android drawable   drawable ic button red selected  android state focused  true   gt   lt  -- focused -- gt       lt item android drawable   drawable ic button red selected  android state selected  true   gt   lt  -- selected -- gt       lt item android drawable   drawable ic button red default   gt   lt  -- default -- gt    lt  selector gt    hope this can help you  good luck

User · Answer

if you need a straight line shadow  like in bottom of toolbar  you can also use gradient xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt gradient         android type  linear          android angle  -90          android startColor   19000000   lt  -- black transparent -- gt          android endColor   00000000    gt   lt  -- full transparent -- gt   lt  shape gt    hope this help some one

User · Answer

I think this method produces very good results   lt  -- Drop Shadow Stack -- gt   lt item gt       lt shape gt           lt padding                 android top  quot 1dp quot                  android right  quot 1dp quot                  android bottom  quot 1dp quot                  android left  quot 1dp quot   gt           lt solid android color  quot  00CCCCCC quot   gt       lt  shape gt   lt  item gt   lt item gt       lt shape gt           lt padding                 android top  quot 1dp quot                  android right  quot 1dp quot                  android bottom  quot 1dp quot                  android left  quot 1dp quot   gt           lt solid android color  quot  10CCCCCC quot   gt       lt  shape gt   lt  item gt   lt item gt       lt shape gt           lt padding                 android top  quot 1dp quot                  android right  quot 1dp quot                  android bottom  quot 1dp quot                  android left  quot 1dp quot   gt           lt solid android color  quot  20CCCCCC quot   gt       lt  shape gt   lt  item gt   lt item gt       lt shape gt           lt padding                 android top  quot 1dp quot                  android right  quot 1dp quot                  android bottom  quot 1dp quot                  android left  quot 1dp quot   gt           lt solid android color  quot  30CCCCCC quot   gt       lt  shape gt   lt  item gt   lt item gt       lt shape gt           lt padding                 android top  quot 1dp quot                  android right  quot 1dp quot                  android bottom  quot 1dp quot                  android left  quot 1dp quot   gt           lt solid android color  quot  50CCCCCC quot   gt       lt  shape gt   lt  item gt    lt item gt        lt shape android shape  quot rectangle quot  gt           lt stroke android color  quot  CCC quot  android width  quot 1dp quot   gt           lt solid android color  quot  FFF quot    gt           lt corners android radius  quot 2dp quot    gt        lt  shape gt    lt  item gt

User · Answer

For some reason shadows don t work if you set  lt solid gt  AND  lt stroke gt  on your custom background drawable  Creating a  lt layer-list gt  with separate layers for fill and borders fixes the issue   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  -- Separate layers for solid and stroke  because no shadows get drawn otherwise  using elevation  -- gt   lt layer-list xmlns android  quot http   schemas android com apk res android quot  gt       lt item gt           lt shape android shape  quot rectangle quot  gt               lt solid android color  quot  color card default quot    gt               lt corners android radius  quot  dimen card corner radius quot    gt           lt  shape gt       lt  item gt       lt item gt           lt shape android shape  quot rectangle quot  gt               lt stroke android color  quot  color card border quot  android width  quot  dimen card border width quot   gt               lt corners android radius  quot  dimen card corner radius quot    gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

lt  xml version  1 0  encoding  utf-8   gt       lt shape xmlns android  http   schemas android com apk res android   gt            lt solid android color   android color white   gt           lt  solid gt            lt stroke             android width  1dp              android color   color LightGrey   gt           lt  stroke gt            lt padding             android bottom  5dp              android left  2dp              android right  2dp              android top  5dp   gt           lt  padding gt            lt corners             android bottomLeftRadius  20dp              android bottomRightRadius  20dp              android radius  12dp              android topLeftRadius  20dp              android topRightRadius  20dp    gt            lt gradient             android angle  90              android centerColor   android color white              android centerY  0 2              android endColor   99e0e0e0              android startColor   android color white              android type  linear    gt        lt  shape gt

[android] Add shadow to custom shape on Android

Examples related to android

Examples related to android-layout