How to set the spacing in listview item

Question

I am trying to make a list view like this: Listview I want

I tried the following ways:

By setting this in the list view but it is not working

android:divider="@android:color/transparent"
android:dividerHeight="10.0sp"

By setting the marginTop in the textview layout but it is also not working.

So some one can help me how to get the required output.

I have tried this and this, but these are not working.

This is my custom listview:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/activity_vertical_margin"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
    android:layout_width="8dp"
    android:layout_height="wrap_content"/>
<ImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:id="@+id/imageView"
    android:layout_margin="5dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Large Text"
    android:id="@+id/textView"
    android:layout_margin="5dp"
    style="@style/AppTheme.Text"
    />
<View
    android:layout_width="8dp"
    android:layout_height="wrap_content"
    />
</LinearLayout>
<View
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:background="#fff"/>
</LinearLayout>

I am getting this:

Can you post more details about your ListView? Does it have a custom view(xml file)? — Rosário Pereira Fernandes, May 16 '16 at 17:17
don't use **SP** as with these attributes. it is used for font size. for more check this - http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android — Wasim K. Memon, May 16 '16 at 18:27
**IMHO** you should use `RecyclerView with CardView` instead of using that **OLD** `ListView`. That only will give you [YOUR DESIRED LISTVIEW](http://i.stack.imgur.com/L4Hki.png). — Maulik Dodia, May 17 '16 at 08:34

score 0 · Answer 1 · answered May 16 '16 at 17:40

0

you can adjust your ListView for each item to like this example :

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="Large Text" />

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp" />

</LinearLayout>

and here is the result, just adding some margin to the parent layout and put an empty view to take up an 8dp space so that the next item of the view will be 8dp away form the first one and so one.

answered May 16 '16 at 17:40

Omar

458
2
10

it worked but Its not what I want I tried to set the View in both the side too but it is not working – SAVVY May 16 '16 at 18:14
you mean you put it before and after the textview ? and what was the result ? – Omar May 16 '16 at 18:17
the second image is the output I am getting the left and right view are not working I set the background also it worked only for the last view – SAVVY May 16 '16 at 18:34
try add a 4dp margin to your ListView in the activity's layout xml – Omar May 16 '16 at 18:41

score 0 · Accepted Answer · answered May 17 '16 at 08:14

Okay, use this. It should turn out exactly as you want. Fell free to change margins and padding.

In your custom ListView layout, use this xml:

<?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:background="#009688">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/rectangle">

        <ImageView
            android:id="@+id/iv_imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="5dp"
            android:background="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/tv_hello"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_toRightOf="@+id/iv_imageView1"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </RelativeLayout>

</RelativeLayout>

Now, inside your drawable folder create a new xml, call it rectangle. Paste the code below in it.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="2dp" android:color="#ff207d94" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="8dp" />
    <solid android:color="#ffffffff" />
</shape>

The radius defines the curves of the rectangle you want, feel free to change it as you wish.

Use the custom ListView layout in your adapter. This should work.

Happy coding... cheers!!

How to set the spacing in listview item

2 Answers2