How can I set a shadow in each cell of a ListView?

问题:

I have a custom cell for an Android ListView. This custom cell is a relative layout with some views inside. There is a space between each cell, so I want to add to the bottom of the cells a shadow.

I've been googling around but couldn't found anything? I want to achieve something similar to this:

Thanks!

回答1:

Can be done in below two ways:

1. 9-patch images - click link for understanding 9 patch

2. Using layer-list - Create new file in "res/drawable" which contains:

    <?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 this layer-list file as background in your List item Layout(ie., Linearlayout or etc..).

回答2:

The easiest way is definitely to build the shadow into a 9-patch. An example of something like this is:

This is way larger than it needs to be, as a 9-patch, but I wanted to make it larger for example's sake.

回答3:

i apply this layer-list as background in your List item Layout, Selected color is disabled....

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

回答4:

I haven't tested your exact scenario yet, but this is how you would add a transparent divider to a list view:

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

  <ListView 
    android:id="@+id/android:list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:divider="@android:color/transparent"
    android:dividerHeight="4dip"/>

</LinearLayout>

This is what you would need if you wanted to add the shadow line programmatically.

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <solid android:color="@android:color/transparent" />  
    <stroke   
        android:layout_marginLeft="10dip"
        android:layout_marginRight="10dip"
        android:width="match_content"   
        android:color="@color/black"  />  
    <size android:height="1dp" />
</shape>

The color of the stroke may not appear as black since it's rendered on top of an alpha layer. Plus, this currently draws the four sides of a rectangle, not just the bottom side. (I'll have to do some further research on those two issues).

See this tutorial if you need help figuring out how to wire it all up together.

回答5:

Create a layerlist rectangle that peaks out from under and set your cell view's own main background color in its xml.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--shadow to bottom and right-->
    <!--by pushing offset from top and left-->
    <!--then set foreground-color in android:background in xml-->
    <item
        android:left="2dp"
        android:right="0dp"
        android:top="2dp"
        android:bottom="0dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
</layer-list>

in your cell.xml:

<RelativeLayout
    android:layout_width="match_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shadow">

    <RelativeLayout 
        android:id="@+id/cell_stuff"
        android:layout_width="match_content"
        android:layout_height="match_content"
        android:background="@android:color/holo_orange_light">

        <!--cell stuff-->

    </RelativeLayout>

</RelativeLayout>

OR all-in-one

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--shadow to bottom and right-->
    <!--by pushing offset from top and left-->
    <item
        android:left="2dp"
        android:right="0dp"
        android:top="2dp"
        android:bottom="0dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
    <!--foreground-color to cover over non-shadow-->
    <!--need to also offset in opposite direction-->
    <item
        android:left="0dp"
        android:right="2dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/holo_orange_light"/>
        </shape>
    </item>
</layer-list>

in your cell.xml:

<RelativeLayout
    android:layout_width="match_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shadow_allinone">

    <!--cell stuff-->

</RelativeLayout>