adding shadow on the bottom of List item of Listview

Question

I want to add shadow to bottom of my ListView item !! I tried paddingEdageLenght but no change happened ! I added circular edges but i can't add the shadow below the item

this is my list item xml file

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadingEdgeLength="5sp" >

    <ImageView 
        android:id="@+id/site_image"
        android:layout_height="50dp"
        android:layout_width="65dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_margin="10dp"/>

    <TextView 
        android:id="@+id/site_name"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@id/site_image"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:textSize="20sp"/>

    <TextView 
        android:id="@+id/site_description"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_below="@id/site_name"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/site_image"
        android:textSize="15sp"/>


</RelativeLayout>

and this is my ListView xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/near_sites"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:fadingEdgeLength="5sp"
        android:dividerHeight="10sp"
        android:divider="@android:color/transparent" />

</RelativeLayout>

any help ?

Solution 1

In list_view_item, add a dummy View after your RelativeLayout and wrap them all at vertical LinearLayout like this:

<LinearLayout
         android:orientation="vertical">

    <RelativeLayout>
        ...
        ...
    </RelativeLayout>

    <View
        android:id="@+id/shadow"
        android:layout_width="fill_parent"
        android:layout_height="3dp" <!--or your needed height value-->
        android:background="@drawable/shadow_drawable">     
    </View>

</LinearLayout>

and at drawable folder add the new shadow_drawable.xml and put this at it

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>    
    <gradient
        android:startColor="@color/#000000" <!--black-->
        android:endColor="@color/#FFFFFF" <!--white-->
        android:angle="90" <!-- angle of the gradient-->
        >
    </gradient>
</shape>

Solution 2

You can make 9-patch image for border with shadow effect.

Create a new drawable resource file named "border.xml" in "res/drawable" and write the following code-

    <?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="#ddd" android:endColor="#555" android:type="linear" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <item android:right=".5dp" android:left=".5dp" android:bottom="2dp" android:top=".5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="0dp"/>
        </shape>
    </item>
</layer-list>

Just put android:background="@drawable/border" where you want to apply border.

You can change in android:right,android:left,android:top and android:bottom to give size to border. you can also make change in android:shape for more effect.

Hope its help for you !

Solution 3

you have to add footerview in listview,

how to add footerview check bellow code,

private View footerView;
footerView = ((LayoutInflater)getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.listview_footer, null, false);
ListView.addFooterView(footerView);

so, what ever you can do, in footer view.

Comments

[M D]

Go to this http://www.anotherandroidblog.com/2011/06/29/drop-shadow-lin‌​earlayout/

[Shehab ElDin]

now, we can use cardview with cardElevation and cardRaduis

[Shehab ElDin]

what does (R.layout.listview_footer) contain ?

[Krunal Indrodiya]

hi, this is xml layout.

[Pau Arlandis Martinez]

In Material Design the divider is less dark than your proposed solution. So, it's better is you use dark grey as your start color in the shape. Like that: android:startColor="@android:color/darker_gray"

[Abhishek T.]

Hello, did you try this?