Android LinearLayout Add border with shadow around a LinearLayout

Question

I would like to create the same border of this LinearLayout as the example      In this example  we can see that the border is not the same all around the linearLayout  How can I create this using an XML drawable file   For now  I have only able to create a simple border all around the LinearLayout like this     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 corners       android radius  1dp        android topRightRadius  0dp        android bottomRightRadius  0dp        android bottomLeftRadius  0dp    gt     lt stroke       android width  1dp        android color   E3E3E1    gt      lt solid android color   color blanc    gt    lt  shape gt

User · Answer

Use this single line and hopefully you will achieve the best result;

use: android:elevation="3dp" Adjust the size as much as you need and this is the best and simplest way to achieve the shadow like buttons and other default android shadows. Let me know if it worked!

User · Answer

1 First create a xml file name  shadow xml in  drawable  folder and copy the below code into it     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  10dp    gt               lt  shape gt           lt  item gt            lt item             android bottom  6dp              android left  0dp              android right  6dp              android top  0dp  gt               lt shape android shape  rectangle  gt                   lt solid android color   android color white    gt                   lt corners android radius  4dp    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 id    id header bar          android layout width  match parent          android layout height  wrap content          android background   drawable shadow          android orientation  vertical  gt

User · Answer

As an alternative  you might use a 9 patch image as the background for your layout  allowing for more  natural  shadows     Result     Put the image in your  res drawable folder  Make sure the file extension is  9 png  not  png  By the way  this is a modified  reduced to the minimum square size  of an existing resource found in the API 19 sdk resources folder  I left the red markers  since they don t seem to be harmful  as shown in the draw9patch tool    EDIT   About 9 patches  in case you never had anything to do with them   Simply add it as the background of your View     The black-marked areas  left and top  will stretch  vertically  horizontally   The black-marked areas  right  bottom  define the  content area   where it s possible to add text or Views - you can call the unmarked regions  padding   if you like to    Tutorial  http   radleymarx com blog simple-guide-to-9-patch

User · Answer

I get the best looking results by using a 9 patch graphic   You can simply create an individual 9 patch graphic by using the following editor  http   inloop github io shadow4android   Example   The 9 patch graphic     The result     The source    lt LinearLayout android layout width  200dp  android layout height  200dp  android orientation  vertical  android background   drawable my nine patch

User · Answer

okay  i know this is way too late  but i had the same requirement  i solved like this  1 First create a xml file  example  border shadow xml  in  drawable      folder and copy the   below code into it    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  android shape  rectangle   gt    lt item gt       lt shape gt           lt  -- set the shadow color here -- gt           lt stroke             android width  2dp              android color   7000    gt            lt  -- setting the thickness of shadow  positive value will give shadow on that side  -- gt            lt padding             android bottom  2dp              android left  2dp              android right  -1dp              android top  -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      2 now on the layout where you want the shadow example  LinearLayout  add this in android background   lt LinearLayout     android layout width  fill parent      android layout height  wrap content      android layout margin  8dip      android background   drawable border shadow      android orientation  vertical  gt    and that worked for me

User · Answer

Try this     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

User · Answer

I found the best way to tackle this     You need to set a solid rectangle background on the layout  Use this code - ViewCompat setElevation view   value  On the parent layout set android clipToPadding  false

User · Answer

I know this is late but it could help somebody   You can use a constraintLayout and add the following property in the xml           android elevation  4dp

User · Answer

Ya Mahdi aj---for RelativeLayout    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 gradient                 android startColor   7d000000                  android endColor   android color transparent                  android angle  90   gt               lt  gradient gt               lt corners android radius  2dp    gt           lt  shape gt       lt  item gt        lt item         android left  0dp          android right  3dp          android top  0dp          android bottom  3dp  gt           lt shape android shape  rectangle  gt               lt padding                 android bottom  40dp                  android top  40dp                  android right  10dp                  android left  10dp                   gt               lt  padding gt               lt solid android color   color Whitetransparent   gt               lt corners android radius  2dp    gt           lt  shape gt       lt  item gt   lt  layer-list gt

User · Answer

This is so simple   Create a drawable file with a gradient like this   for shadow below a view below shadow 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 startColor   20000000      android endColor   android color transparent      android angle  270   gt   lt  gradient gt   lt  shape gt    for shadow above a view above shadow 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 startColor   20000000      android endColor   android color transparent      android angle  90   gt   lt  gradient gt   lt  shape gt    and so on for right and left shadow just change the angle of the gradient

User · Answer

You create a file  xml in drawable with name drop shadow xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt  -- lt item android state pressed  true  gt           lt layer-list gt               lt item android left  4dp  android top  4dp  gt                   lt shape gt                       lt solid android color   35000000    gt                       lt corners android radius  2dp   gt                   lt  shape gt               lt  item gt                           lt  layer-list gt       lt  item gt -- gt       lt item gt           lt layer-list gt               lt  -- SHADOW LAYER -- gt               lt  -- lt item android top  4dp  android left  4dp  gt                   lt shape gt                       lt solid android color   35000000    gt                       lt corners android radius  2dp    gt                   lt  shape gt               lt  item gt -- gt               lt  -- SHADOW LAYER -- gt               lt item gt                   lt shape gt                       lt solid android color   35000000    gt                       lt corners android radius  2dp    gt                   lt  shape gt               lt  item gt               lt  -- CONTENT LAYER -- gt               lt item android bottom  3dp  android left  1dp  android right  3dp  android top  1dp  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       lt  item gt   lt  selector gt    Then    lt LinearLayout     android background   drawable drop shadow   gt

User · Answer

If you already have the border from shape just add elevation    lt LinearLayout     android id    id layout              android elevation  2dp      android background   drawable rectangle    gt

User · Answer

That s why CardView exists  CardView   Android Developers It s just a FrameLayout that supports elevation in pre-lollipop devices    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    To use this you need to add dependency to build gradle   compile  com android support cardview-v7 23

[android] Android LinearLayout : Add border with shadow around a LinearLayout

Examples related to android

Examples related to border

Examples related to android-linearlayout