how to make card list in android

Question

I was looking for some ListView , styling techniques and I found this one Post-How to make card List , I wanted the ListItems to be just like this :

list_item_background.xml is :

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

        <corners android:radius="2dp"/>

        <solid android:color="#ccc" />

    </shape>
</item>

<item android:bottom="2dp">
    <shape android:shape="rectangle"
        android:dither="true">

        <corners android:radius="2dp" />

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

        <padding android:bottom="8dp"
            android:left="8dp"
            android:right="8dp"
            android:top="8dp" />
    </shape>
</item>

I have implemented that in my RowOfListView.xml like :

<?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="wrap_content"
        android:layout_margin="@dimen/ten"
        android:background="@drawable/list_item_background" >
<ImageView
    android:id="@+id/imageView_in_row"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_alignTop="@+id/row_member_name"
    android:layout_marginBottom="@dimen/ten"
    android:layout_marginLeft="@dimen/five"
    android:background="@drawable/rectangle"
    android:contentDescription="@string/image"
    android:src="@drawable/member" />

<TextView
    android:id="@+id/row_member_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/ten"
    android:layout_marginRight="@dimen/ten"
    android:layout_marginTop="@dimen/ten"
    android:layout_toRightOf="@+id/imageView_in_row"
    android:ellipsize="end"
    android:text="Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />
.
.
.
</RelativeLayout>

But I'm getting this one :

unable to get that margin between Items of ListView as in prior picture, where I should set that margin .

Answer 1

You can try like this for listview row xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outer"
    style="@style/CardOuterStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_white"
        android:orientation="vertical" >
//your fields here 
</LinearLayout>
</FrameLayout>

and CardOuterStyle

<style name="CardOuterStyle">
        <item name="android:paddingLeft">5dp</item>
        <item name="android:paddingRight">5dp</item>
        <item name="android:paddingTop">5dp</item>
    </style>

Answer 2

You should set the dividerHeight of the ListView as :

<ListView android:id="@+id/MyListView"
  android:layout_height="fill_parent"
  android:layout_width="fill_parent"
  android:divider="@android:color/transparent"
  android:dividerHeight="@dimen/ten"/>

Alternatively, you may also give padding in your relative layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/ten"
    android:background="@drawable/list_item_background"
    android:paddingTop="@dimen/five"
    android:paddingBottom="@dimen/five" >