Add space between each item layout in inflate layout android

Question

I do inflate layout. I want give spacing between each item in layout. Like the image below

This is my main code in xml. The parent layout

<LinearLayout
            android:id="@+id/mLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="#F2F2F2"
            android:orientation="vertical"
            android:padding="2dp"/>

This is my inflate layout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="3dp"
android:layout_marginTop="5dp"
android:background="@color/white_pure">


<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:orientation="vertical">

    <TextView
        android:textStyle="bold"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:textSize="9sp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"/>


</LinearLayout>


<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    android:gravity="right"
    android:layout_marginRight="5dp"
    android:textColor="@color/blueTransfer"/>

    </LinearLayout>

How can i do to get like image (left side). Have spacing between each item in inflate layout. Hope anyone can help me.

Use margin instead of padding. Then, set background white and grey for each section. — Harry T., Feb 24 '17 at 02:37

score 2 · Accepted Answer · edited May 23 '17 at 12:10

One soluion is change you item layout like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="3dp"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#fff"
        >
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:orientation="vertical"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="aaaaaaaaaaaa"
                android:textColor="#000"
                android:textSize="12sp"
                android:textStyle="bold"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="bbbbbbbbbb"
                android:textColor="#000"
                android:textSize="9sp"
                />
        </LinearLayout>
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginRight="5dp"
            android:layout_weight="3"
            android:gravity="right|center"
            android:text="Details"
            android:textColor="#00f"
            />
    </LinearLayout>

</LinearLayout>

Another solution is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:background="#fff"
    android:orientation="horizontal"
    android:padding="3dp"
    >
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:orientation="vertical"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="aaaaaaaaaaaa"
            android:textColor="#000"
            android:textSize="12sp"
            android:textStyle="bold"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="bbbbbbbbbb"
            android:textColor="#000"
            android:textSize="9sp"
            />
    </LinearLayout>
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginRight="5dp"
        android:layout_weight="3"
        android:gravity="right|center"
        android:text="Details"
        android:textColor="#00f"
        />
</LinearLayout>

Then if you use ListView, you can increase spacing between ListView items by using android:divider https://stackoverflow.com/a/5309871/5381331

Or for RecyclerView: How to add dividers and spaces between items in RecyclerView?

but this one android:gravity="right|center" i can't use .. got error .. how to make word Details be in center and right ? — MAS. John, Feb 24 '17 at 03:19

score 0 · Answer 2 · answered Feb 24 '17 at 02:55

Try this,

    <?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_marginTop="5dp"
        android:background="@color/white_pure"
        android:orientation="horizontal"
        android:padding="3dp">


        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@+id/tv_details"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tv_title"
                android:layout_marginTop="5dp"
                android:textSize="9sp" />


        </RelativeLayout>


        <TextView
            android:id="@+id/tv_details"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:layout_weight="3"
            android:gravity="right"
            android:padding="10dp"
            android:layout_centerVertical="true"
            android:textColor="@color/blueTransfer" />

    </RelativeLayout>

score 0 · Answer 3 · answered Feb 24 '17 at 03:04

You can also set the space (Margin) between two inflated layouts by java code like below, It works for me.

View v =LayoutInflater.from(this).inflate(R.layout.item,null);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(0,10,0,0);
v.setLayoutParams(layoutParams);

Hope This will helps you

score 0 · Answer 4 · answered Feb 24 '17 at 03:11

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="5dp"
android:background="@color/white_pure">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:orientation="vertical">

        <TextView
            android:textStyle="bold"
            android:textSize="12sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Order Attempt 1"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:textSize="9sp"
            android:layout_height="wrap_content"
            android:text="aa"
            android:layout_marginLeft="5dp"/>


    </LinearLayout>


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:gravity="right"
        android:layout_marginRight="5dp"
        android:text="DETAILS"
        android:textColor="@color/blueTransfer"/>
</LinearLayout>

<View
    android:layout_width="fill_parent"
    android:layout_height="3dp"
    android:background="#F2F2F2" />

I also just think this trick .. put view .. it also worked .. Thank you all for helped me .. :-)

score 0 · Answer 5 · answered Feb 24 '17 at 03:16

just use pading instead of marging in item's top group.and listview use margingLeft and margingRight.item code like this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:background="@color/white_pure">

Add space between each item layout in inflate layout android

5 Answers5