Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 853
Wellsen Avatar asked May 27 '15 10:05

Wellsen


People also ask

How do I set Android layout to support all screen sizes?

The best way to create a responsive layout is to use ConstraintLayout as the base layout in your UI. ConstraintLayout enables you to specify the position and size of each view according to spatial relationships with other views in the layout. All the views can then move and resize together as the screen size changes.

How do I support multiple screen sizes in Android?

This example demonstrates how to support different screen sizes in Android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.

Which layout is more efficient in Android?

Deep layouts - Layouts with too much nesting are bad for performance. Consider using flatter layouts such as RelativeLayout or GridLayout to improve performance.

How can I change my Android layout?

Convert a view or layout Click the Design button in the top-right corner of the editor window. In the Component Tree, right-click the view or layout, and then click Convert view.... In the dialog that appears, choose the new type of view or layout, and then click Apply.


1 Answers

<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>
like image 193
Yeahia2508 Avatar answered Oct 21 '22 08:10

Yeahia2508