How to show shadow around the linearlayout in Android

Question

How can I show shadow for my linear layout  I want white colored rounded background with shadow around the linearlayout  I have done this so far     lt LinearLayout  android layout width  fill parent  android layout height  wrap content  android layout margin  10dp  android background   xml rounded rect shape  android orientation  vertical  android padding  10dp  gt   lt -- My buttons  textviews  Imageviews go here -- gt   lt  LinearLayout gt    And rounded rect shape xml under xml directory    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   ffffff    gt       lt corners       android bottomLeftRadius  3dp        android bottomRightRadius  3dp        android topLeftRadius  3dp        android topRightRadius  3dp    gt   lt  shape gt

User · Answer

For lollipop and above you can use elevation.

For older versions:

Here is a lazy hack from: http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

(toast_frame does not work on KitKat, shadow was removed from toasts)

just use:

android:background="@android:drawable/toast_frame"

or:

android:background="@android:drawable/dialog_frame"

as a background

examples:

<TextView
        android:layout_width="fill_parent"
        android:text="I am a simple textview with a shadow"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:padding="16dp"
        android:textColor="#fff"
        android:background="@android:drawable/toast_frame"
        />

and with different bg color:

<LinearLayout
        android:layout_height="64dp"
        android:layout_width="fill_parent"
        android:gravity="center"
        android:background="@android:drawable/toast_frame"
        android:padding="4dp"
        >
    <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="Button shadow"
            android:background="#33b5e5"
            android:textSize="24sp"
            android:textStyle="bold"
            android:textColor="#fff"
            android:layout_gravity="center|bottom"
            />

</LinearLayout>

User · Answer

Well  this is easy to achieve    Just build a GradientDrawable that comes from black and goes to a transparent color  than use parent relationship to place your shape close to the View that you want to have a shadow  then you just have to give any values to height or width    Here is an example  this file have to be created inside res drawable   I name it as shadow xml     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   9444          android endColor   0000          android type  linear          android angle  90  gt   lt  -- Change this value to have the correct shadow angle  must be multiple from 45 -- gt       lt  gradient gt    lt  shape gt    Place the following code above from a LinearLayout   for example  set the android layout width and android layout height to fill parent and 2 3dp  you ll have a nice shadow effect on your LinearLayout     lt View     android id    id shadow      android layout width  fill parent      android layout height  2 3dp        android layout above    id id from your LinearLayout       android background   drawable shadow  gt   lt  View gt    Note 1  If you increase android layout height more shadow will be shown     Note 2  Use android layout above    id id from your LinearLayout  attribute if you are placing this code inside a RelativeLayout  otherwise ignore it   Hope it help someone

User · Answer

set this xml drwable as your background ---   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 -- gt Your shadow color lt --           lt corners android radius  15dp    gt       lt  shape gt   lt  item gt    lt  -- White Top color -- gt   lt item android bottom  3px  android left  3px  android right  3px  android top  3px  gt -- gt here you can customize the shadow size lt ---      lt shape android shape  rectangle   gt           lt solid android color   FFFFFF    gt            lt corners android radius  15dp    gt       lt  shape gt   lt  item gt    lt  layer-list gt

User · Answer

I know this is old  but most of these answers require a ton of extra code   If you have a light colored background  you can simply use this   android elevation  25dp

User · Answer

i know this is way too late  but i had the same requirement  i solved like this   lt android support v7 widget CardView xmlns app  http   schemas android com apk res-auto  android layout width  match parent  android layout height  match parent  app cardUseCompatPadding  true  app cardElevation  4dp  app cardCornerRadius  3dp   gt    lt  -- put whatever you want -- gt    lt  android support v7 widget CardView gt    you need to add dependency   compile  com android support cardview-v7 25 0 1

User · Answer

Actually I agree with  odedbreiner but I put the dialog frame inside the first layer and hide the black background under the white layer        lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item         android drawable   android drawable dialog frame          android right  2dp  android left  2dp  android bottom  2dp  android top  5dp   gt           lt shape android shape  rectangle  gt               lt corners android radius  5dp   gt           lt  shape gt       lt  item gt       lt item gt           lt shape             android shape  rectangle  gt               lt solid android color   android color white   gt               lt corners android radius  5dp   gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

save this 9 png   change name it to 9 png      2 save it in your drawable   3 set it to your layout   4 set padding   For example     lt LinearLayout     android layout width  fill parent    android layout height  wrap content    android background   drawable shadow    android paddingBottom  6dp    android paddingLeft  5dp    android paddingRight  5dp    android paddingTop  6dp   gt          lt  LinearLayout gt

User · Answer

You can use following class for xml tag   import android annotation SuppressLint  import android content Context  import android content res TypedArray  import android graphics Bitmap  import android graphics BlurMaskFilter  import android graphics Canvas  import android graphics Color  import android graphics Paint  import android graphics PorterDuff  import android graphics Rect  import android os Build  import android support annotation FloatRange  import android util AttributeSet  import android view ViewGroup  import android view ViewTreeObserver  import android widget FrameLayout   import com webappmate weeassure R          Created by GIGAMOLE on 13 04 2016      public class ShadowLayout extends FrameLayout           Default shadow values     private final static float DEFAULT SHADOW RADIUS   30 0F      private final static float DEFAULT SHADOW DISTANCE   15 0F      private final static float DEFAULT SHADOW ANGLE   45 0F      private final static int DEFAULT SHADOW COLOR   Color DKGRAY          Shadow bounds values     private final static int MAX ALPHA   255      private final static float MAX ANGLE   360 0F      private final static float MIN RADIUS   0 1F      private final static float MIN ANGLE   0 0F         Shadow paint     private final Paint mPaint   new Paint Paint ANTI ALIAS FLAG                          setDither true               setFilterBitmap true                           Shadow bitmap and canvas     private Bitmap mBitmap      private final Canvas mCanvas   new Canvas           View bounds     private final Rect mBounds   new Rect           Check whether need to redraw shadow     private boolean mInvalidateShadow   true          Detect if shadow is visible     private boolean mIsShadowed          Shadow variables     private int mShadowColor      private int mShadowAlpha      private float mShadowRadius      private float mShadowDistance      private float mShadowAngle      private float mShadowDx      private float mShadowDy       public ShadowLayout final Context context            this context  null              public ShadowLayout final Context context  final AttributeSet attrs            this context  attrs  0              public ShadowLayout final Context context  final AttributeSet attrs  final int defStyleAttr            super context  attrs  defStyleAttr            setWillNotDraw false           setLayerType LAYER TYPE HARDWARE  mPaint               Retrieve attributes from xml         final TypedArray typedArray   context obtainStyledAttributes attrs  R styleable ShadowLayout            try               setIsShadowed typedArray getBoolean R styleable ShadowLayout sl shadowed  true                setShadowRadius                      typedArray getDimension                              R styleable ShadowLayout sl shadow radius  DEFAULT SHADOW RADIUS                                                  setShadowDistance                      typedArray getDimension                              R styleable ShadowLayout sl shadow distance  DEFAULT SHADOW DISTANCE                                                  setShadowAngle                      typedArray getInteger                              R styleable ShadowLayout sl shadow angle   int  DEFAULT SHADOW ANGLE                                                  setShadowColor                      typedArray getColor                              R styleable ShadowLayout sl shadow color  DEFAULT SHADOW COLOR                                                finally               typedArray recycle                          Override     protected void onDetachedFromWindow             super onDetachedFromWindow               Clear shadow bitmap         if  mBitmap    null                mBitmap recycle                mBitmap   null                       public boolean isShadowed             return mIsShadowed             public void setIsShadowed final boolean isShadowed            mIsShadowed   isShadowed          postInvalidate               public float getShadowDistance             return mShadowDistance             public void setShadowDistance final float shadowDistance            mShadowDistance   shadowDistance          resetShadow               public float getShadowAngle             return mShadowAngle              SuppressLint  SupportAnnotationUsage        FloatRange     public void setShadowAngle  FloatRange from   MIN ANGLE  to   MAX ANGLE  final float shadowAngle            mShadowAngle   Math max MIN ANGLE  Math min shadowAngle  MAX ANGLE            resetShadow               public float getShadowRadius             return mShadowRadius             public void setShadowRadius final float shadowRadius            mShadowRadius   Math max MIN RADIUS  shadowRadius            if  isInEditMode    return             Set blur filter to paint         mPaint setMaskFilter new BlurMaskFilter mShadowRadius  BlurMaskFilter Blur NORMAL            resetShadow               public int getShadowColor             return mShadowColor             public void setShadowColor final int shadowColor            mShadowColor   shadowColor          mShadowAlpha   Color alpha shadowColor            resetShadow               public float getShadowDx             return mShadowDx             public float getShadowDy             return mShadowDy                Reset shadow layer     private void resetShadow                Detect shadow axis offset         mShadowDx    float    mShadowDistance    Math cos mShadowAngle   180 0F   Math PI            mShadowDy    float    mShadowDistance    Math sin mShadowAngle   180 0F   Math PI                Set padding for shadow bitmap         final int padding    int   mShadowDistance   mShadowRadius           setPadding padding  padding  padding  padding           requestLayout               private int adjustShadowAlpha final boolean adjust            return Color argb                  adjust   MAX ALPHA   mShadowAlpha                  Color red mShadowColor                   Color green mShadowColor                   Color blue mShadowColor                         Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure widthMeasureSpec  heightMeasureSpec               Set ShadowLayout bounds         mBounds set                  0  0  MeasureSpec getSize widthMeasureSpec   MeasureSpec getSize heightMeasureSpec                         Override     public void requestLayout                Redraw shadow         mInvalidateShadow   true          super requestLayout                Override     protected void dispatchDraw final Canvas canvas               If is not shadowed  skip         if  mIsShadowed                   If need to redraw shadow             if  mInvalidateShadow                       If bounds is zero                 if  mBounds width      0  amp  amp  mBounds height      0                           Reset bitmap to bounds                     mBitmap   Bitmap createBitmap                              mBounds width    mBounds height    Bitmap Config ARGB 8888                                               Canvas reset                     mCanvas setBitmap mBitmap                           We just redraw                     mInvalidateShadow   false                         Main feature of this lib  We create the local copy of all content  so now                        we can draw bitmap as a bottom layer of natural canvas                         We draw shadow like blur effect on bitmap  cause of setShadowLayer   method of                        paint does t draw shadow  it draw another copy of bitmap                     super dispatchDraw mCanvas                           Get the alpha bounds of bitmap                     final Bitmap extractedAlpha   mBitmap extractAlpha                           Clear past content content to draw shadow                     mCanvas drawColor 0  PorterDuff Mode CLEAR                           Draw extracted alpha bounds of our local canvas                     mPaint setColor adjustShadowAlpha false                        mCanvas drawBitmap extractedAlpha  mShadowDx  mShadowDy  mPaint                           Recycle and clear extracted alpha                     extractedAlpha recycle                      else                          Create placeholder bitmap when size is zero and wait until new size coming up                     mBitmap   Bitmap createBitmap 1  1  Bitmap Config RGB 565                                                   Reset alpha to draw child with full alpha             mPaint setColor adjustShadowAlpha true                   Draw shadow bitmap             if  mCanvas    null  amp  amp  mBitmap    null  amp  amp   mBitmap isRecycled                    canvas drawBitmap mBitmap  0 0F  0 0F  mPaint                         Draw child s         super dispatchDraw canvas               use Tag in xml like this    lt yourpackagename ShadowLayout         android layout width  wrap content          android layout height  wrap content          android layout alignParentBottom  true          android layout centerHorizontal  true          android layout gravity  center horizontal          app sl shadow color   9e000000          app sl shadow radius  4dp  gt   lt child views gt   lt  yourpackagename ShadowLayout gt    UPDATE  put the below code in attrs xml in resource  values     lt declare-styleable name  ShadowLayout  gt       lt attr name  sl shadowed  format  boolean   gt       lt attr name  sl shadow distance  format  dimension   gt       lt attr name  sl shadow angle  format  integer   gt       lt attr name  sl shadow radius  format  dimension   gt       lt attr name  sl shadow color  format  color   gt   lt  declare-styleable gt

User · Answer

There is no such attribute in Android  to show a shadow  But possible ways to do it are    Add a plain LinearLayout with grey color  over which add your actual layout  with margin at bottom and right equal to 1 or 2 dp Have a 9-patch image with a shadow and set it as the background to your Linear layout

User · Answer

Create a new XML by example named  shadow xml  at DRAWABLE with the following code  you can modify it or find another better     lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item gt           lt shape android shape  rectangle  gt               lt solid android color   color middle grey   gt           lt  shape gt       lt  item gt        lt item android left  2dp            android right  2dp            android bottom  2dp  gt           lt shape android shape  rectangle  gt               lt solid android color   color white   gt           lt  shape gt       lt  item gt    lt  layer-list gt    After creating the XML in the LinearLayout or another Widget you want to create shade  you use the BACKGROUND property to see the efect  It would be something like     lt LinearLayout     android orientation  horizontal      android layout height  wrap content      android layout width  match parent      android paddingRight   dimen margin med      android background   drawable shadow      android minHeight   attr actionBarSize      android gravity  center vertical  gt

User · Answer

One possible solution is  using nine patch image like this  http   developer android com guide topics graphics 2d-graphics html nine-patch  OR  I have done this in the following way  This is my main layout in which round corner xml and drop shadow xml used as background resource  round corner two is same like round corner xml only the color attribute is different  copy the round corner xml drop shadow xml and round conere two xml into drawable folder    lt RelativeLayout     android id    id facebook id      android layout width  250dp      android layout height  52dp      android layout centerHorizontal  true      android layout marginTop  28dp      android background   drawable round corner   gt        lt LinearLayout         android id    id shadow id          android layout width  match parent          android layout height  48dp          android layout margin  1dp          android background   drawable drop shadow   gt            lt TextView             android layout width  match parent              android layout height  match parent              android layout gravity  center              android layout marginBottom  2dp              android background   drawable round corner two              android gravity  center              android text   string fb butn text              android textColor   color white   gt           lt  TextView gt       lt  LinearLayout gt   lt  RelativeLayout gt    round corner xml    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  -- view background color -- gt   lt solid     android color   ffffff   gt   lt  solid gt    lt  -- view border color and width -- gt   lt stroke     android width  0dp      android color   3b5998   gt   lt  stroke gt    lt  -- If you want to add some padding -- gt   lt padding     android left  1dp      android top  1dp      android right  1dp      android bottom  1dp      gt   lt  padding gt    lt  -- Here is the corner radius -- gt   lt corners     android radius  10dp     gt   lt  corners gt    lt  shape gt    drop shadow xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt   lt item  gt       lt shape          android shape  rectangle  gt       lt solid android color   android color darker gray    gt       lt corners android radius  12dp   gt       lt  shape gt   lt  item gt   lt item android right  1dp  android left  1dp  android bottom  5dp  gt       lt shape          android shape  rectangle  gt       lt solid android color   android color white   gt       lt corners android radius  5dp   gt       lt  shape gt   lt  item gt   lt  layer-list gt

User · Answer

There is also another solution to the problem by implementing a layer-list that will act as the background for the LinearLayoout   Add background with shadow xml file to res drawable  Containing    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item  gt           lt shape              android shape  rectangle  gt           lt solid android color   android color darker gray    gt           lt corners android radius  5dp   gt           lt  shape gt       lt  item gt       lt item android right  1dp  android left  1dp  android bottom  2dp  gt           lt shape              android shape  rectangle  gt           lt solid android color   android color white   gt           lt corners android radius  5dp   gt           lt  shape gt       lt  item gt   lt  layer-list gt    Then add the the layer-list as background in your LinearLayout     lt LinearLayout   android layout width  wrap content    android layout height  wrap content    android background   drawable background with shadow   gt

User · Answer

Try this     layout shadow xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item gt           lt shape android shape  rectangle  gt               lt solid android color   CABBBBBB   gt               lt corners android radius  2dp    gt           lt  shape gt       lt  item gt        lt item         android left  0dp          android right  0dp          android top  0dp          android bottom  2dp  gt           lt shape android shape  rectangle  gt               lt solid android color   android color white   gt               lt corners android radius  2dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt    Apply to your layout like this   android background   drawable layout shadow

[android] How to show shadow around the linearlayout in Android?

Examples related to android

Examples related to android-linearlayout

Examples related to roundedcorners-dropshadow