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.

Dial

You should read about LinearLayout & weight! – Standfast

if you want 150dp layout than why are you using weight concept for other layout? – Dangle

Hi, thank you very much about the hint. I found the problem now. I was setting those to android:layout_height="fill_parent" but forgot to set the weight. Sorry, a beginner's mistake. – Dial

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>

Forensic

Answer 2

It seems people have already answered your question while I was making this. Nonetheless, I'm posting this answer in case you still need help. This image contains the weights you need to assign to your layouts, expressed graphically. Please excuse some lack of alignment, I made this in a rush.

Lector

Answer 3

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

   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:orientation="horizontal"
       android:background="#555555">
       <TextView 
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:text="part1"
           android:background="#008000"/>
       <TextView 
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:text="part2"
           android:background="#0000FF"/>
   </LinearLayout>
   <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="#ffffff"></LinearLayout>
   <LinearLayout 
       android:layout_width="match_parent"
       android:orientation="horizontal"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="#000000">
       <TextView 
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:text="part1"
           android:background="#008000"/>
       <TextView 
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:text="part2"
           android:background="#A9F114"/>
       <TextView 
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_weight="1"
           android:text="part3"
           android:background="#B4155D"/>
   </LinearLayout>
</LinearLayout>

Greataunt

Answer 4

You may also get the screen dimension pragmatically and set the height/weight based on your requirement.

Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics ();
    display.getMetrics(outMetrics);

    float density  = getResources().getDisplayMetrics().density;
    float dpHeight = outMetrics.heightPixels / density;
    float dpWidth  = outMetrics.widthPixels / density;

Crass