How To Add Shadow To Linear Layout - Android?

April 16, 2024 Post a Comment

In my android application I have to implement something like the image given below : I have tried using shadow xmls for a linear layout but it doesn't seem to work out the way i

Solution 1:

You can take an 9-patchImage with shadow as background or you can use the following xml as background of linearlayout for shadow

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><!-- Drop Shadow Stack --><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#02000000" /><cornersandroid:radius="8dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#05000000" /><cornersandroid:radius="7dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#10000000" /><cornersandroid:radius="6dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#15000000" /><cornersandroid:radius="5dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#20000000" /><cornersandroid:radius="4dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#25000000" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:top="1dp"android:right="1dp"android:bottom="1dp"android:left="1dp" /><solidandroid:color="#30000000" /><cornersandroid:radius="3dp" /></shape></item><!-- Background --><item><shape><solidandroid:color="#ffffff" /><cornersandroid:radius="3dp" /></shape></item></layer-list>

remove padding from what ever side you don't need shadow

Note:

This is not mine , I copied it from somewhere long back and cannot find it back to give proper credit . If you know where its from then feel free to edit and keep credits

Solution 2:

One simple way is put your layout in cardview.Provide elevations etc to make more realistic.

<android.support.v7.widget.CardViewxmlns:card_view="http://schemas.android.com/apk/res-auto"android:id="@+id/card_view"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"card_view:cardCornerRadius="4dp"><LinearLayoutandroid:text="Hello Card"android:layout_width="match_parent"android:layout_height="match_parent">

        ...............

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

Solution 3:

I might be late to this but in case someone else is needs it. You can use this tool http://inloop.github.io/shadow4android/ It allows you to make an image with shadow but treated not as a normal image but as a special one. You will get an image ending with .9.png instead of .png You should keep that .9 as it will direct Android Studio to treat as 9 patch

Then add this image to your drawables folder. Use it as a background for your Layout & you will get a nice natural shadow effect that until now I've never seen any drawable able to do the same

Solution 4:

Maybe you can use CardView instead of LinearLayout,it provides som apis to implement the shadow

Baca Juga

Solution 5:

Something like this should do the trick:

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item ><shapeandroid:shape="rectangle"><solidandroid:color="@android:color/darker_gray" /><cornersandroid:radius="5dp"/></shape></item><itemandroid:right="5dp"android:left="5dp"android:bottom="15dp"><shapeandroid:shape="rectangle"><solidandroid:color="@android:color/white"/><cornersandroid:radius="5dp"/></shape></item></layer-list>

And then add the the layer-list as background in your LinearLayout.

<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/background_with_shadow"/>

Also you can refer this post for reference.

EDIT: Add background_with_shadow.xml file to res/drawable.

For Android 5.0 and above refer this: Defining Shadows and Clipping Views

Android Coder