CODEWITHSUNDEEP
androidxmllayoutsizescreen
Shane
Shane

Reputation: 972

Android Single Layout to FIt All Screen Sizes

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:

enter image description here

Tablet:

enter image description here

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

enter image description here

Upvotes: 1

Views: 14657

Answers (6)

Nitin Jain
Nitin Jain

Reputation: 31

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.

enter image description here

Upvotes: 0

Nitesh Tiwari
Nitesh Tiwari

Reputation: 4762

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>

enter image description here

Hope it's useful for someone :-)

Upvotes: 2

Milad gh
Milad gh

Reputation: 211

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

Upvotes: 0

Parvathi Krishnan
Parvathi Krishnan

Reputation: 73

Never put an weight sum like hundred ,just try using single digits

Upvotes: 0

Ronak Badjatya
Ronak Badjatya

Reputation: 225

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>

Upvotes: 0

Toshi
Toshi

Reputation: 302

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

enter image description here

Upvotes: 2

Related Questions