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

Question

This is my first post here. I just learned Android programming and came up with this problem. I searched a bit and found some solutions, but couldn't get my code to work. So I want to know which part of my code or implementation is incorrect.

So, the problem is that I want to make a layout that will remain the same proportion on different screen sizes and orientations. Here is 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 the screenshot at the moment, because he said: "You need at least 10 reputation to send images."

So, I want to divide the screen into 3 parts vertically and divide the upper part by 2 horizontally, and the lower part by 3 horizontally and keep my proportion regardless of screen size, resolution and orientation.

The only part that didn't work was the top block, in the code I set for it, android:layout_height="150dp" , because the layout is somehow broken if I set them to android:layout_height="fill_parent" . But this does not make the proportion proportional if I change the orientation. Any help would be appreciated.

Thanks.

Answer 1

Using layout_weight on three linearLayout and assigning the same value to each, the screen will be divided vertically by 3 regardless of screen size. Also set the height to 0dp : android:layout_height="0dp"

Full xml will 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> 

Answer 2

 <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> 

Answer 3

It seems people have already answered your question while I was doing this. However, I am posting this answer if you still need help. This image contains the weights that you need to assign to your layouts that are graphically displayed. Please excuse the lack of alignment, I did it in a hurry.

Answer 4

You can also get the screen size 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;