How to give the space between two linear layout in Android

Question

I am using following code to generate the page. I am able to make the space between linear layout which is just below the another one. But when i am trying to do between two linear layout which are beside to each other its not working for me. Sorry may be i have not explained properly but when you will see my code you will be able to understand my problem.

Top and bottom have space but in top two linear layouts are there but i am not able to make space between them.

This what i want to make :

Here i am pasting my code:

<?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="match_parent" >


<ImageView
    android:id="@+id/userImage"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:layout_centerHorizontal="true"
    android:contentDescription="@string/products_category" />

  <TextView
    android:id="@+id/userName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/userImage"
    android:layout_centerHorizontal="true"
    android:singleLine="true"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black" />


    <LinearLayout
        android:layout_below="@+id/userName"
        android:id="@+id/firstLinear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_centerInParent="true"
        android:layout_marginLeft="80dp"
        android:paddingTop="25dp">

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:background="@color/black"
            android:orientation="vertical"
            android:layout_gravity="center">

            <TextView
                android:id="@+id/userLocationText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="@string/location_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />

            <ImageView
                android:id="@+id/userLocationImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/location_icon"
                android:contentDescription="@string/products_category"
                android:layout_gravity="center" />

            <TextView
                android:id="@+id/userLocation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:background="@color/black"
            android:orientation="vertical">

            <TextView
                android:id="@+id/userZoneText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="@string/zone_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />

            <ImageView
                android:id="@+id/userZoneImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/zone_icon"
                android:contentDescription="@string/products_category"
                android:layout_gravity="center" />

            <TextView
                android:id="@+id/userZone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />
        </LinearLayout>

    </LinearLayout>
  <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_below="@+id/firstLinear"
        android:padding="5dp"
        android:layout_centerInParent="true">
        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:background="@color/black"
            android:orientation="vertical" 
            android:paddingRight="5dp" >

            <TextView
                android:id="@+id/userPointsText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="@string/points_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />

            <ImageView
                android:id="@+id/userPointsImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/points_icon"
                android:contentDescription="@string/products_category"
                android:layout_gravity="center" />

            <TextView
                android:id="@+id/userPoints"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:background="@color/black"
            android:orientation="vertical">

            <TextView
                android:id="@+id/userLevelText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="@string/level_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />

            <ImageView
                android:id="@+id/userLevelImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/level_icon"
                android:contentDescription="@string/products_category"
                android:layout_gravity="center" />

            <TextView
                android:id="@+id/userLevel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white"
                android:layout_gravity="center" />
        </LinearLayout>
  </LinearLayout>

Thanks a lot...

Answer 1

For Your Second question : Use relative layout in place of Image view and set the large image as the background of relative image then add an Image view for another image in relative layout. Replace your ImageView with -

<RelativeLayout 
android:layout_width="500dp"
android:layout_height="500dp"
android:background="@drawable/largeUserImage" >

<ImageView 
    android:layout_width="100dp"
    android:layout_height="100dp"    
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"    
    android:src="@drawable/smallUserImage"/>
</RelativeLayout >

Answer 2

There are two way to solve your problem

Either give the right margin to first linearLayout of "firstLinear" linearLayout

 <LinearLayout
        android:layout_width="100dp"
        android:layout_height="125dp"
        android:layout_gravity="center"
       **android:layout_marginRight="30dp"** 
        android:background="@color/black"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/userLocationText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:singleLine="true"
            android:text="@string/location_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/white" />

        <ImageView
            android:id="@+id/userLocationImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/location_icon"
            android:contentDescription="@string/products_category" />

        <TextView
            android:id="@+id/userLocation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:singleLine="true"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/white" />
    </LinearLayout>

or give left margin to to the second linear layout in "firstLinear".

<LinearLayout
        android:layout_width="100dp"
        android:layout_height="125dp"
        android:background="@color/black"
        **android:layout_marginLeft="30dp"**
        android:orientation="vertical">

        <TextView
            android:id="@+id/userZoneText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="@string/zone_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/white"
            android:layout_gravity="center" />

        <ImageView
            android:id="@+id/userZoneImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/zone_icon"
            android:contentDescription="@string/products_category"
            android:layout_gravity="center" />

        <TextView
            android:id="@+id/userZone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/white"
            android:layout_gravity="center" />
    </LinearLayout>

Answer 3

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="match_parent" >

    <ImageView
        android:id="@+id/userImage"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/products_category" />

    <TextView
        android:id="@+id/userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/userImage"
        android:layout_centerHorizontal="true"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <LinearLayout
        android:id="@+id/firstLinear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/userName"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:layout_marginLeft="80dp"
        android:orientation="horizontal"
        android:paddingTop="25dp" >

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:layout_gravity="center"
            android:background="@color/black"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/userLocationText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:text="@string/location_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/userLocationImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/location_icon"
                android:contentDescription="@string/products_category" />

            <TextView
                android:id="@+id/userLocation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:layout_marginLeft="20dp"
            android:background="@color/black"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/userZoneText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:text="@string/zone_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/userZoneImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/zone_icon"
                android:contentDescription="@string/products_category" />

            <TextView
                android:id="@+id/userZone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/firstLinear"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:padding="5dp" >

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:background="@color/black"
            android:orientation="vertical"
            android:paddingRight="5dp" >

            <TextView
                android:id="@+id/userPointsText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:text="@string/points_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/userPointsImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/points_icon"
                android:contentDescription="@string/products_category" />

            <TextView
                android:id="@+id/userPoints"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="125dp"
            android:layout_marginLeft="20dp"
            android:background="@color/black"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/userLevelText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:text="@string/level_text"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />

            <ImageView
                android:id="@+id/userLevelImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/level_icon"
                android:contentDescription="@string/products_category" />

            <TextView
                android:id="@+id/userLevel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/white" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>