Android Single Layout to FIt All Screen Sizes

Question

I am updating my Android app and realized that I have created a layout for every possible screen size (layout-small, layout-large, etc...) It would be a huge pain to go through every XML file and manually make a small change. I am attempting to create a single XML file to support all screen sizes. After reviewing the Android documentation and other questions on stackoverflow, it seems LinearLayout is the best choice as you can provide a weightSum and layout_weight for each item in the layout. This is not working as expected (see below code and images). I am doing this correctly? Do I have to go back to creating a RelativeLayout for every possible screen size?

My images are an a single drawable folder and my layouts are in a single layout folder.

XML

<?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="@drawable/bg"
    android:gravity="center"
    android:orientation="vertical"
    android:weightSum="100" >

    <ImageButton
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@drawable/image0"
        android:background="@null"
        android:layout_weight="30" />

    <ImageButton
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"  
        android:scaleType="fitCenter"
        android:src="@drawable/image1"
        android:background="@null"
        android:layout_weight="30" />

    <ImageButton
        android:id="@+id/key"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="30"
        android:background="@null"
        android:src="@drawable/image0_key" />

    <TextView
        android:id="@+id/tvScore"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Score: 0"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_weight="10"
        android:layout_gravity="left" />

</LinearLayout>

Resulting View (overflow of items and layout not consistent for screen sizes)

Nexus One:

Tablet:

EDIT: I have added the following drawable-____ folders. It produces the same result.

Answer 1

You might want to consider creating compatibility layout folders. :)

Answer 2

Yes we have a solution for the same by using android's percent layout we can now use app:layout_heightPercent and app:layout_widthPercent to fit all the screens using single layout.

compile 'com.android.support:percent:23.0.0'

Why use LinearLayout weight property now we have simpler solution.

Demo HERE !

GitHub project HERE !

Consider a simple sample

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/fifty_huntv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff7acfff"
        android:text="20% - 50%"
        android:textColor="@android:color/white"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="80%-50%"
        app:layout_heightPercent="80%"
        app:layout_widthPercent="50%"
        />

</android.support.percent.PercentRelativeLayout>

Hope it's useful for someone :-)

Answer 3

Use Below layout for arranging your ImageButton and TextView. It works for all screen size Layouts.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="3" />

<ImageButton
    android:id="@+id/imageBtn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/ic_launcher" />

<ImageButton
    android:id="@+id/imageBtn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/ic_launcher" />

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Score: 0" />

</LinearLayout>

Answer 4

永远不要把重量总和像百，只要尝试使用一位数

Answer 5

DisplayMetric dm =new DisplayMetric();

getWindowManager().getDefaultDisplay().getMetrics(dm);
int h= dm.heightPixels;
int w= dm.widthPixels;
h=h/10; // 10 is for example for 10% of display height
w=((w*20)/100); // 20%of display width
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(w,h);
YourObject.setLayoutParams(params);

//(YourObject) can be everything such as button , image button, textview,...

Answer 6

There are two issues here, one is to fill the size of the screen and the other is supporting the various resolution sizes of mobiles. Even within xxxhdpi, there are variations as new flagship Samsung Mobiles are drifting to 19.5 x 16.

Linear layout along with weight attributes does give a good coverage but beware of the nested tags and performance. It worked out well for most of the scenarios I have handled.

In addition, as pointed out in other answers, different drawables/resources for the standard sizes helps maintaining similar view in all devices.