Android LinearLayout : Add border with shadow around a LinearLayout

Question

I would like to create the same border of this LinearLayout as the example :

enter image description here

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 :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

  <solid android:color="@color/blanc" />

</shape>

you can use `background` property for that...create one XML file with shape like rectangle, color and shadow effect for it and set it as background for your linear layout.. — Pragnesh Ghoda シ, Jun 07 '14 at 08:14
I think,that its two layout xml,say one is linear layout and inner is relative layout having padding — Giru Bhai, Jun 07 '14 at 08:16
@Prag's Could you help me for creating this xml file please ? — wawanopoulos, Jun 07 '14 at 08:17
An alternative way could be using a 9 patch image as the background for your layout. This would allow for a really smooth, fading shadow (much realistic, in my opinion). — Phantômaxx, Jun 07 '14 at 09:07
See my answer to the same question over here http://stackoverflow.com/a/34274763/3456841 — Ethan, Dec 15 '15 at 20:19

score 296 · Accepted Answer · edited May 10 '23 at 00:54

Try this, as shown in Android Developer Tips & Tricks by an anonymous contributor:

<?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="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

score 92 · Answer 2 · answered Jan 11 '16 at 08:11

92

That's why CardView exists. CardView | Android Developers
It's just a FrameLayout that supports elevation in pre-lollipop devices.

<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" >

    <!-- put whatever you want -->

</android.support.v7.widget.CardView>

To use this you need to add dependency to build.gradle:

compile 'com.android.support:cardview-v7:23.+'

answered Jan 11 '16 at 08:11

Ray Suhyun Lee

1,047
7
4

how can change shadow color – Aditay Kaushal Sep 20 '17 at 07:18
shadow is very weak https://stackoverflow.com/questions/49076188/cardview-shadow-for-imageview – user924 Mar 02 '18 at 20:05
1

very strange behavior in devices with 4.4.4 (or similar). A huge margin is added to cardview in and makes UI very ugly. – Morteza Rastgoo Mar 06 '18 at 07:24
This should be the accepted answer. One small update though. You should use the androidx one -> androidx.cardview.widget.CardView – bogdan May 21 '20 at 16:52

score 64 · Answer 3 · answered Jul 30 '15 at 11:09

64

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:

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

answered Jul 30 '15 at 11:09

funcoder

1,975
20
14

1

How can I hide the black line? Please help – Isaac Darlong Jun 02 '17 at 12:42
1

@Isaac save the image as my_nine_patch.9.png (.9.png is 9 batch image) – arun Nov 07 '17 at 11:00

score 42 · Answer 4 · edited Jun 18 '22 at 21:02

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.

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

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="-1dp"
            android:top="-1dp" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

</layer-list>

2.now on the layout where you want the shadow(example: LinearLayout) add this in android:background

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

and that worked for me.

score 28 · Answer 5 · answered Feb 15 '16 at 10:17

28

This is so simple:

Create a drawable file with a gradient like this:

for shadow below a view below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

for shadow above a view above_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="90" >
</gradient>
</shape>

and so on for right and left shadow just change the angle of the gradient :)

answered Feb 15 '16 at 10:17

Morteza Rastgoo

6,772
7
40
61

where I call the below_shadow? background of a view? – Arthur Melo May 05 '16 at 21:56
1

Create below_shadow xml file, then in your view, add a "View" in your layout and set below_shadow.xml as background of this view – Morteza Rastgoo May 07 '16 at 05:22
I did the same as you told, but my "above_shadow" is not transparent when i put that view in the custom view. It works fine separately. What should I do? – SoYoung Feb 21 '17 at 16:03

Phantômaxx · Answer 6 · 2014-06-07T14:13:54.663

As an alternative, you might use a 9 patch image as the background for your layout, allowing for more "natural" shadows:

enter image description here

Result:

enter image description here

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/

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 - call it "padding", if you like to). Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/ — Phantômaxx, Jun 07 '14 at 11:40

score 10 · Answer 7 · answered Aug 25 '16 at 08:22

You create a file .xml in drawable with name drop_shadow.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Then:

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

score 6 · Answer 8 · answered Jan 14 '20 at 09:51

1.First create a xml file name shadow.xml in "drawable" folder and copy the below code into it.

 <?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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

        <item
            android:bottom="6dp"
            android:left="0dp"
            android:right="6dp"
            android:top="0dp">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    </layer-list>

Then add the the layer-list as background in your LinearLayout.

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

score 4 · Answer 9 · answered Oct 07 '18 at 10:05

4

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!

answered Oct 07 '18 at 10:05

Tamim

181
1
12

@MichałZiobro Use it with your layouts like if you have a layout over another which is smaller and you want to show the shadow. it should work. You may find your texts and buttons get invisible but when you will run the app you will see the best shadow. I'm not sure it's some kind of bug or something but in my case when I use that code it makes all my Views invisible in the AS preview but works best in the app when I debug/launch it in my device. Let me know if it worked or not. Thanks. – Tamim Oct 31 '18 at 04:33

score 3 · Answer 10 · answered Feb 04 '19 at 23:35

3

If you already have the border from shape just add elevation:

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

answered Feb 04 '19 at 23:35

Krzynool

319
2
3

2

What is a behaviour on API < 21? – CoolMind Feb 11 '19 at 13:49
1

Unfortunately it does not work pre Lollipop so you should use some of the other answers from this question. But if you're targeting newer phones this is a pretty easy way to do it that works well. – Krzynool Feb 13 '19 at 09:40

score 3 · Answer 11 · answered Dec 17 '19 at 07:38

3

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"

answered Dec 17 '19 at 07:38

harishanth raveendren

534
5
8

score 2 · Answer 12 · edited Nov 04 '17 at 01:09

Ya Mahdi aj---for RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="3dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="40dp"
                android:top="40dp"
                android:right="10dp"
                android:left="10dp"
                >
            </padding>
            <solid android:color="@color/Whitetransparent"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

score 1 · Answer 13 · answered Apr 14 '17 at 05:10

1

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"

answered Apr 14 '17 at 05:10

Sarthak Gandhi

2,130
1
16
23

2

In case you didn't know, this is the current implementation of `ViewCompat.setElevation()` method on the ViewCompat class: `public void setElevation(View view, float elevation) {}`. As you can see, it's not implemented. I really doubt it'll be of any help, and truly wonder if you actually tested your own answer, lol – mradzinski Jul 13 '17 at 03:23
`ViewCompat.setElevation(view, value)` worked and solved my problem. I'm coding for min api level 16. – Yunus Emre INCE Jan 04 '22 at 08:52

King Coder · Answer 14 · 2023-04-15T15:19:52.880

Just add this in your element : where android:translationZ="5dp" is most important

<LinearLayout 
android:background="@drawable/rounded_background"
android:translationZ="5dp"></LinearLayout>

@drawable/rounded_background.xml file code :

<?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="#fef8f0"/>
        <corners android:radius="10dp" />
    </shape>
</item>
</layer-list>

Android LinearLayout : Add border with shadow around a LinearLayout

14 Answers14

Linked

Related