Avicena00
Avicena00

Reputation: 365

RelativeLayout to support multiple screen sizes

I have RelativeLayout that should support multiple screens. The question is: is this approach bad? Because basically I specified width and size of boxes, so I'll have to change those numbers for multiple screen sizes (small, large, xlarge) and they'll still not fit properly. Is there a better approach? Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background" >

    <RelativeLayout
        android:id="@+id/wrappedBoxes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center" >

        <ImageView
            android:id="@+id/imgLeft"
            android:layout_width="50dp"
            android:layout_height="60dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:paddingRight="7dp"
            android:scaleType="fitXY" />

        <TextView
            android:id="@+id/txtBlock1"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_toRightOf="@+id/imgLeft"
            android:background="#30869C"
            android:clickable="true"
            android:gravity="bottom"
            android:padding="1dp"
            android:textColor="#fff" >
        </TextView>

        <RelativeLayout
            android:id="@+id/txtBlock2"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_marginLeft="7dp"
            android:layout_toRightOf="@+id/txtBlock1"
            android:background="#30869C"
            android:clickable="true"
            android:orientation="vertical"
            android:padding="1dp" >

            <TextView
                android:id="@+id/recKF1Block"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="top"
                android:paddingTop="0dp"
                android:textColor="#fff" />

            <TextView
                android:id="@+id/recKF1BlockOutOfAmount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/recKF1Block"
                android:text="dummy of dummy" />
        </RelativeLayout>

        <TextView
            android:id="@+id/txt9876Block"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_marginLeft="7dp"
            android:layout_toRightOf="@+id/txtBlock2"
            android:clickable="true"
            android:gravity="bottom"
            android:height="71dp"
            android:padding="1dp"
            android:textColor="#fff" >
        </TextView>

        <TextView
            android:id="@+id/txt343477Block"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_marginLeft="7dp"
            android:layout_toRightOf="@+id/txt9876Block"
            android:background="#30869C"
            android:gravity="top"
            android:padding="1dp"
            android:text=""
            android:textColor="#fff" >
        </TextView>

        <TextView
            android:id="@+id/txt111Block"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_alignRight="@+id/txtBlock1"
            android:layout_below="@+id/txtBlock1"
            android:layout_marginTop="7dp"
            android:background="#30869C"
            android:clickable="true"
            android:gravity="bottom"
            android:padding="1dp"
            android:textColor="#fff" >
        </TextView>

        <TextView
            android:id="@+id/txtS555Sett"
            android:layout_width="114dp"
            android:layout_height="71dp"
            android:layout_alignLeft="@+id/txtBlock2"
            android:layout_below="@+id/txtBlock2"
            android:layout_marginTop="7dp"
            android:layout_toRightOf="@+id/txt111Block"
            android:background="#30869C"
            android:gravity="bottom"
            android:padding="1dp"
            android:textColor="#fff" >
        </TextView>

        <TextView
            android:id="@+id/txtMm22"
            android:layout_width="237dp"
            android:layout_height="72dp"
            android:layout_alignLeft="@+id/txt9876Block"
            android:layout_below="@+id/txt9876Block"
            android:layout_marginTop="7dp"
            android:layout_toRightOf="@+id/txtS555Sett"
            android:adjustViewBounds="true"
            android:textColor="#000" >
        </TextView>

        <TextView
            android:id="@+id/imgW999"
            android:layout_width="114dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/txtMm22"
            android:layout_alignTop="@+id/txt343477Block"
            android:layout_marginLeft="7dp"
            android:layout_toRightOf="@+id/txt343477Block"
            android:gravity="bottom"
            android:textColor="#fff" >
        </TextView>

        <ImageView
            android:id="@+id/imgRi8977"
            android:layout_width="50dp"
            android:layout_height="60dp"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imgW999"
            android:scaleType="fitXY" />
    </RelativeLayout>

</RelativeLayout>

Upvotes: 1

Views: 1054

Answers (2)

Ajay
Ajay

Reputation: 1826

Instead of hard coding the values, use the dimen files for this pupose. Specify different folders for values,like values-large etc, and create dimension files and put specific values according to screen size. It should help you.

Upvotes: 2

androidgeek
androidgeek

Reputation: 3480

Hey please create a Multiple Screen size layout folders like this

layout-small , layout-large , layout-xlarge so u copy your layout XML files in to these folder and now u can edit the specified width and size of the boxes .

Upvotes: 0

Related Questions