How to make Android layout proportional regardless of screen size and orientation

Question

This is my first post here. I just learned Android programming and come to this problem. I have searched a bit and found some solutions but I couldn't make my code works. So I want to know which part of my code or implementation is wrong.

So, the problem is I want to make a layout which will stays the same proportion on different screen sizes and orientation. Here are my code:

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="150dp" >
        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:gravity="left"
            android:id="@+id/textView1"/>
        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:gravity="right"
            android:id="@+id/textView2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/textView3"/>
    </LinearLayout>

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:gravity="left"
            android:id="@+id/textView4"/>

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:id="@+id/textView5"/>

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:gravity="right"
            android:id="@+id/textView6"/>
    </LinearLayout>

    <SeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:max="255"/>
</LinearLayout>

I can't post screenshot at the moment, because it said "You need at least 10 reputation to post images."

So, I want to divide the screen by 3 parts vertically, and divide the top part by 2 horizontally and the bottom part by 3 horizontally and maintain their proportion regardless of screen size, resolution, and orientation.

The only part that didn't work is the top block, on the code I set it to android:layout_height="150dp" because the layout somehow is broken if I set those to android:layout_height="fill_parent". But this doesn't make the layout to be proportional if I change the orientation. Any help will be appreciated.

Thank you.

Answer 1

By using layout_weight on the three linearLayout and assigning to each one the same value, the screen will bi divided vertically to 3 regardless of the screen size. Also, assign the height to 0dp: android:layout_height="0dp"

The complete xml would be:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:baselineAligned="false"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="left" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="right" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="left" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="right" />
    </LinearLayout>

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="255" />

</LinearLayout>