How to make my layout scale on different screen sizes?

Question

I have simple layout with 4 different levels/modes you can play. Problem is when i preview layout on different screen sizes it doesn't appear same: Image

Here is layout 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"
    android:background="#000000">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/one"
        android:layout_alignParentTop="true"
        android:background="@drawable/mode1background"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/two"
        android:background="@drawable/mode2background"
        android:layout_below="@+id/one"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/three"
        android:background="@drawable/mode3background"
        android:layout_below="@+id/two"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:text="play"
        android:gravity="center"
        android:textSize="50sp"
        android:id="@+id/four"
        android:background="@drawable/mode4background"
        android:layout_below="@+id/three"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:textColor="#000000" />

</RelativeLayout>

How can I make each TextView be 1/4 of screen size.

Answer 1

You could use a vertical LinearLayout with android:layout_weight attributes.

Something 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="match_parent"
              android:background="#000000"
              android:orientation="vertical">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode1background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode2background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode3background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

    <TextView
        android:id="@+id/four"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.25"
        android:background="@drawable/mode4background"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="50sp"/>

</LinearLayout>

Check out the developer's guide on LinearLayout and Layout Weight: https://developer.android.com/guide/topics/ui/layout/linear.html

Answer 2

Change parent layout to LinearLayout with vertical orientation. Then set each child's height to 0dp and weight to 1

Example:

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="2"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="3"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="4"/>

</LinearLayout>

Answer 3

create the following directories in resourcefolder and place different resolution images of background in respective directories

drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

drawable-xxhdpi

drawable-xxxhdpi

note the name of image in all folders should be same, android will automatically pick the image from the respective folder depending upon the dpi of phone

Answer 4

As you want to occupy the full height of the device you will need to use linear layout with vertical oreintation and giving attribute 'layout_weight' = 1 for all the TextView. Sample code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_weight="1"
        android:background="@drawable/mode1background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/two"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/one"
        android:layout_weight="1"
        android:background="@drawable/mode2background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/three"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/two"
        android:layout_weight="1"
        android:background="@drawable/mode3background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/four"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/three"
        android:layout_weight="1"
        android:background="@drawable/mode4background"
        android:gravity="center"
        android:text="play"
        android:textColor="#000000"
        android:textSize="50sp" />

</LinearLayout>