How to make shadow around LinearLayout?

Question

I tring to make shadow around linearLayout like on image below (on top):

I`m using layer-list with shape, but all bottom shadow owerlapping by white area (see image above). All this view looks like:

  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:background="@android:color/transparent" >

 <LinearLayout
     android:id="@+id/listView_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:layout_marginLeft="10dp"
     android:layout_marginRight="10dp"
     android:layout_marginTop="45dp"
     android:background="@color/text_white">
 <!-- ListView to be shown on widget -->
         <ListView
             android:id="@+id/listViewWidget"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

         <!-- Empty view is show if list items are empty -->
         <TextView
             android:id="@+id/empty_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:gravity="center"
             android:textColor="#ffffff"
             android:textSize="20sp"
             android:visibility="gone" />
 </LinearLayout>

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:id="@+id/widget_toolbar"
     android:orientation="vertical"
     android:background="@drawable/layout_card_view"/>

 </FrameLayout>

How to make this?

score 2 · Answer 1 · answered Sep 15 '15 at 11:39

You must use , this example has a shadow and item with background white, you can use and adjust to your preference.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#50CCCCCC" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

You can add more drop shadow how you need. Check out the color in every one.

Unfortunately, it is not appropriate – Александр Шевчук Sep 16 '15 at 17:40 — Александр Шевчук, Sep 16 '15 at 17:40

score 1 · Answer 2 · answered Sep 15 '15 at 11:04

1

Shadow effect using drawable :

1) Create a shadow 9 patch image.

2) Set that 9 patch image as the layout background.

use this generator to create 9 patch shadow image.

answered Sep 15 '15 at 11:04

uday

1,348
12
27

score 0 · Answer 3 · answered Sep 15 '15 at 11:11

You can use this 1 st way

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item><layer-list>
        <item android:right="7dp" android:top="3dp"><shape>


        </shape></item>
        <item ><shape>
         <gradient android:angle="270" android:endColor="#FFFFFF" android:startColor="#BABABA" />
          <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
        </shape></item>

    </layer-list></item>

</layer-list>

2nd way

You can use 9 Patch Image .

Unfortunately, it is not appropriate – Александр Шевчук Sep 16 '15 at 17:40 — Александр Шевчук, Sep 16 '15 at 17:40

score 0 · Answer 4 · edited Oct 11 '16 at 10:44

0

Add ll_shadow.xml file to res/drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape 
      android:shape="rectangle">
    <solid android:color="@android:color/darker_gray"/>
    <corners android:radius="5dp"/>
    </shape>
  </item>
  <item android:right="1dp" android:left="1dp" android:bottom="2dp">
    <shape 
      android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="5dp"/>
    </shape>
  </item>
</layer-list>

USE

<LinearLayout
    android:background="@drawable/ll_shadow"/>

edited Oct 11 '16 at 10:44

Krzysztof Kosiński

4,225
2
18
23

answered Sep 15 '15 at 11:19

Pankaj Arora

10,224
2
37
59

Unfortunately, it is not appropriate – Александр Шевчук Sep 16 '15 at 17:40
please specify reason also. – Pankaj Arora Sep 17 '15 at 04:44
http://stackoverflow.com/questions/32625737/how-to-make-shadow-in-layer-list – Александр Шевчук Sep 17 '15 at 08:30
its new post with this problem – Александр Шевчук Sep 17 '15 at 08:30

score 0 · Answer 5 · answered Jan 25 '19 at 12:06

Use this code and create one shedow.xml file in drawable and then use as a background in your layout file to get desire output.

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom 2dp Shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#your_shadow_color" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <!-- Green Top color -->
    <item android:bottom="3px">
        <shape android:shape="rectangle">
            <solid android:color="#your_view_background_color" />
            <corners android:radius="7dp" />
        </shape>
    </item>
</layer-list>

How to make shadow around LinearLayout?

5 Answers5

USE