How to set 4 RelativeLayout Horizontally and Adjust automatically according to screen size

Question

Please Refer to screen shot. Now my Problem is i have make a xml design that is like in screenshot. i have 4 relative layout contains imageview and textview. now i want to set these 4 relative layout horizontally with equal space from right,left,start,end. In my layout when it go on big screen the start and end showing extra space,i know i have set it like that. But Is there any solution to set these RLs automatic adjust there size according to screen size.

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/one"
    android:id="@+id/RL_MainCat"
    android:background="@color/white"
    android:layout_marginTop="10dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/RL_UploadPres"
    android:layout_marginLeft="10dp"
    >
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/upload_pres_icon"
    android:id="@+id/icon_uploadpres"
    android:layout_centerHorizontal="true"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Upload\nPrescription"
        android:textAlignment="center"
        android:textColor="#1f222d"
        android:textSize="11sp"
        android:layout_below="@+id/icon_uploadpres"
        android:layout_marginTop="10dp"
        />
</RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/RL_UploadPres"
        android:id="@+id/RL_FindPharmacy"
        android:layout_marginLeft="20dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/find_pharma_icon"
            android:id="@+id/icon_findphar"
            android:layout_centerHorizontal="true"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" Find \n  Pharmacy  "
            android:textAlignment="center"
            android:textColor="#1f222d"
            android:textSize="11sp"
            android:layout_below="@+id/icon_findphar"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true"
            />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/RL_FindPharmacy"
        android:id="@+id/RL_BuyOTC"
        android:layout_marginLeft="20dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/otc_icon"
            android:id="@+id/icon_findotc"
            android:layout_centerHorizontal="true"

            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  Buy \n      OTC     "
            android:textAlignment="center"
            android:textColor="#1f222d"
            android:textSize="11sp"
            android:layout_below="@+id/icon_findotc"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/RL_BuyMedicine"
        android:layout_toRightOf="@+id/RL_BuyOTC"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/medicine_icon"
            android:id="@+id/icon_findmedi"
            android:layout_centerHorizontal="true"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="  Buy \n Medicines  "
            android:textColor="#1f222d"
            android:textSize="11sp"
            android:textAlignment="center"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/icon_findmedi"
            />

    </RelativeLayout>
</RelativeLayout>

have you read [android Documentation](https://developer.android.com/training/multiscreen/screensizes.html) for screen size support and for simpler [solution](https://stackoverflow.com/a/16917077/5308778) please visit — yashkal, Dec 08 '17 at 09:39

Tomin B Azhakathu · Answer 1 · 2017-12-08T09:48:24.900

Use the relative layouts inside a Linear Layout having horizontal Orientation with Weightsum 4 or 1. and give each relative layout a weight of 1 or .25

Inside Relative layout width is set to 0dp so that the Layout will divide the Width equally when the weight is added

Use Scalable SP (ssp) and Scalable DP (sdp) instead of sp and dp so that the Dimenssions will be adjusted automatically too

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".25">

    </RelativeLayout>
</LinearLayout>

V.N.G · Answer 2 · 2017-12-08T10:10:09.440

Try this:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/one"
android:id="@+id/RL_MainCat"
android:background="@color/white"
android:layout_marginTop="10dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true">
<RelativeLayout
android:layout_weight="0.25"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/RL_UploadPres"
android:layout_marginLeft="10dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/upload_pres_icon"
android:id="@+id/icon_uploadpres"
android:layout_centerHorizontal="true"
/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Upload\nPrescription"
    android:textAlignment="center"
    android:textColor="#1f222d"
    android:textSize="11sp"
    android:layout_below="@+id/icon_uploadpres"
    android:layout_marginTop="10dp"
    />
</RelativeLayout>

<RelativeLayout
    android:layout_weight="0.25"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/RL_UploadPres"
    android:id="@+id/RL_FindPharmacy"
    android:layout_marginLeft="20dp">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/find_pharma_icon"
        android:id="@+id/icon_findphar"
        android:layout_centerHorizontal="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Find \n  Pharmacy  "
        android:textAlignment="center"
        android:textColor="#1f222d"
        android:textSize="11sp"
        android:layout_below="@+id/icon_findphar"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        />
</RelativeLayout>

<RelativeLayout
    android:layout_weight="0.25"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/RL_FindPharmacy"
    android:id="@+id/RL_BuyOTC"
    android:layout_marginLeft="20dp"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/otc_icon"
        android:id="@+id/icon_findotc"
        android:layout_centerHorizontal="true"

        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="  Buy \n      OTC     "
        android:textAlignment="center"
        android:textColor="#1f222d"
        android:textSize="11sp"
        android:layout_below="@+id/icon_findotc"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

<RelativeLayout
    android:layout_weight="0.25"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:id="@+id/RL_BuyMedicine"
    android:layout_toRightOf="@+id/RL_BuyOTC"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="10dp"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/medicine_icon"
        android:id="@+id/icon_findmedi"
        android:layout_centerHorizontal="true"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="  Buy \n Medicines  "
        android:textColor="#1f222d"
        android:textSize="11sp"
        android:textAlignment="center"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/icon_findmedi"
        />
</LinearLayout>
</RelativeLayout>

Ratilal Chopda · Accepted Answer · 2017-12-08T10:12:17.847

Try this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RL_MainCat"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/one"
    android:layout_marginTop="10dp"
    android:background="#ffffff">

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

        <RelativeLayout
            android:id="@+id/RL_UploadPres"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp">

            <ImageView
                android:id="@+id/icon_uploadpres"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/icon_uploadpres"
                android:layout_marginTop="10dp"
                android:text="Upload\nPrescription"
                android:textAlignment="center"
                android:textColor="#1f222d"
                android:textSize="11sp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RL_FindPharmacy"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_weight="1"
            android:layout_toRightOf="@+id/RL_UploadPres">

            <ImageView
                android:id="@+id/icon_findphar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/icon_findphar"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text=" Find \n  Pharmacy  "
                android:textAlignment="center"
                android:textColor="#1f222d"
                android:textSize="11sp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RL_BuyOTC"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/RL_FindPharmacy">

            <ImageView
                android:id="@+id/icon_findotc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@mipmap/ic_launcher"

                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/icon_findotc"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="  Buy \n      OTC     "
                android:textAlignment="center"
                android:textColor="#1f222d"
                android:textSize="11sp" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/RL_BuyMedicine"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_weight="1"
            android:layout_marginRight="10dp"
            android:layout_toRightOf="@+id/RL_BuyOTC">

            <ImageView
                android:id="@+id/icon_findmedi"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/icon_findmedi"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="10dp"
                android:text="  Buy \n Medicines  "
                android:textAlignment="center"
                android:textColor="#1f222d"
                android:textSize="11sp" />

        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

Below Output

Happy to help you. Happy Weekend. – Ratilal Chopda Dec 08 '17 at 10:10 — Ratilal Chopda, Dec 08 '17 at 10:10

How to set 4 RelativeLayout Horizontally and Adjust automatically according to screen size

3 Answers3