How do add shadow above a view in android

Question

I have a view that is to server as a footer title. It is just a view, that you may think of as a button or a textview or a layout (I am open to anything really). Here is the xml

<RelativeLayout>
   <ScrollView >… </ScrollView> //match parent width and height
   <MyBottomView/> // align parent bottom
 </RelativeLayout>

So as you can see the ScrollView does scroll below MyBottomView. I want to add a top shadow to the MyBottomView so it looks more like Material Design. How might I do that?

Answer 1

If you need to have shadow just on one side of the view (e.g. on top), you can add another View before it and use gradient shadow for its background.

Here is the gradient file top_shadow_gradient.xml that you have to store in drawable folder:

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

And here is a sample layout how to use it:

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

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/top_shadow_gradient" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingTop="8dp">

        <!-- Put your content here-->

    </LinearLayout>

</LinearLayout>

Important: The root layout have to be transparent (android:background="@android:color/transparent") and your "content" layout need to have white background (android:background="#ffffff").

And this is the result:

Answer 2

Here are some solutions for this problem - choose your best:

• On StackOverflow, in this post from 22 October 2012, you would read:

There is no such attribute in Android, to show a shadow. But possible ways to do it are:

1. Add a plain LinearLayout with grey color, over which add your actual layout, with margin at the bottom and right equal to 1 or 2 dp.

2. Have a 9-patch image with a shadow and set it as the background to your Linear layout.

and

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:

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

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

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

You can also read: http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

• Another post from StackOverflow, how to set shadow to a View in android?, gives you another solution (using two views that form the shadow.):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

• You can also use specific drawable form Android resources to mimic a shadow effect. Look at: Android View shadow or just read a post below:

I'm using Android Studio 0.8.6 and I couldn't find:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

so I found this instead:

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

and it looks like this:

---

If you're interested in clean Material Design effect, read some documentation like below:

• Android L Developer Preview: Views and Shadows
• Defining Shadows and Clipping Views