How would I get a ListView Item to be elevated?
Asked Answered
M

1

10

I am trying to get it so my listview items are elevated and show a drop shadow.

Here is my list view item layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:translationZ="5dp"
android:cropToPadding="false">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView4"
    android:background="@color/background_white"
    android:layout_alignBottom="@+id/PostUpvote"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:translationZ="2dp"

     />

and here is my ListView layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/listView"
    android:layout_gravity="center_horizontal"
    android:background="@color/background_white"
    android:dividerHeight="10sp"
    android:translationZ="2dp"/>

Any help would be appreciated.

Mccall answered 19/4, 2015 at 4:38 Comment(0)
A
15

If you are targeting version 21 you can use

android:elevation="10dp"

If not then you may need to create the drop shadow effect yourself in a drawable. For example this one creates drop shadow on right and bottom sides.

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

 <!-- Adding border layers simulating drop shadow -->
 <item>
    <shape>

        <padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#00494949" />
    </shape>
</item>

 <item>
    <shape>
        <padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#10494949" />
    </shape>
</item>

 <item>
    <shape>
        <padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#20494949" />
    </shape>
</item>

 <item>
    <shape>
        <padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#30494949" />
    </shape>
</item>

<item>
    <shape>
      <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
        <solid android:color="#70494949" />
    </shape>
</item>

<item>
<shape>
        <solid android:color="@android:color/white" />
</shape>
</item>

Save it in drawable as my_drop_shadow.xml and use it in any View with android:background="@drawable/my_drop_shadow"

You can adjust shadow direction by changing padding values and add elevation effect by controlling transparency.

Adcock answered 19/4, 2015 at 4:47 Comment(2)
How would I apply those shapes to my images?Mccall
just save it in drawable as my_drop_shadow.xml and use it in any View with android:background="@drawable/my_drop_shadow"Adcock

© 2022 - 2024 — McMap. All rights reserved.