Make android activity fit all screen sizes

Question

This is the XML file for my activity.

How do I make this fit all screen sizes without the image button getting messed up!

I am using a relative-layout, should I use a linear-layout instead?

Following is my code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" 
android:background="@drawable/good">

<ImageButton
    android:id="@+id/ImageButton03"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageButton1"
    android:layout_alignTop="@+id/ImageButton01"
    android:background="@drawable/btn_blue"
    android:src="@drawable/plus" 
    android:onClick="NewCategory"/>

<ImageButton
    android:id="@+id/ImageButton01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/ImageButton02"
    android:layout_below="@+id/ImageButton02"
    android:layout_marginTop="29dp"
    android:background="@drawable/btn_blue"
    android:src="@drawable/plus"
    android:onClick="NewItem" />

<ImageButton
    android:id="@+id/ImageButton04"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/ImageButton01"
    android:layout_alignLeft="@+id/ImageButton03"
    android:background="@drawable/btn_blue"
    android:src="@drawable/call" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:text="سـوبر ماركت التنـور"
    android:textSize="40dp"
    android:background="@drawable/btn_red"
    android:textColor="@color/white" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/button1"
    android:layout_below="@+id/button1"
    android:layout_marginTop="24dp"
    android:background="@drawable/btn_blue"
    android:onClick="ViewAllCategories"
    android:src="@drawable/cart" />

<ImageButton
    android:id="@+id/ImageButton05"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/ImageButton02"
    android:layout_alignLeft="@+id/button1"
    android:background="@drawable/btn_blue"
    android:onClick="CreateNewUserAccount"
    android:src="@drawable/user" />

<ImageButton
    android:id="@+id/ImageButton02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/ImageButton05"
    android:layout_below="@+id/imageButton1"
    android:layout_marginTop="33dp"
    android:background="@drawable/btn_blue"
    android:onClick="joinfacebook"
    android:src="@drawable/f" />

It depends upon the output you are looking for. Can you put a screen shot for the final screen you want. — Atul O Holic, Feb 22 '14 at 11:00
if this is all from your .xml. You don't close the RelativeLayout! — Umit Kaya, Feb 22 '14 at 11:01

score 1 · Answer 1 · answered Apr 21 '14 at 22:07

I think you have to create each object and add into layout programatically, and using ratio for each object. For example: ratio of your screen is 9/16.

height = size.y; width = ratio * height;

Every object will set layout param or margin param, they should follow this width and height.

For example with one of your button:

imageButton1 = new ImageView(this);
imageButton1.setBackgroundResource(R.drawable.abc);
imageButton1.setLayoutParams(new LayoutParams(width/100, height/100));
marginParams = new ViewGroup.MarginLayoutParams(imageButton1.getLayoutParams());
marginParams.setMargins(width/24, height/12, 0, 0);
layoutParams = new RelativeLayout.LayoutParams(marginParams);
imageButton1.setLayoutParams(layoutParams);
layout.addView(imageButton1);

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

don't use relative layout. use Linear layout with weightSum.

its work in most of device. for tablets you have to re design new layouts in layout-sw600dp, layout-sw720dp folder.

sample for weightSum

here is guidelines for design multiple screen size

more Extra detils here is Google I/O App download code and check it.

edited May 23 '17 at 11:59

Community

1
1

answered Feb 22 '14 at 11:07

Dhaval Parmar

18,812
8
82
177

score 0 · Answer 3 · answered Feb 22 '14 at 11:22

I prefer getting the screen size and then doing all margins and sizes programmatically in code. More work, but way more control.
Just an example, works this way with everything you have, textsize, viewsize, positions...:

    DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
    int displayHeight = metrics.heightPixels;
    int displayWidth = metrics.widthPixels;
    float scaledDensity = metrics.scaledDensity;

    float percentageToMoveViewDown = (float) 20.0;
    float viewY_float = (float) ((displayHeight / 100.0) * percentageToMoveViewDown);
    int viewY_int = Math.round(viewY_float);

    RelativeLayout.LayoutParams view_Layout_params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    view_Layout_params.topMargin = viewY_int;
    view.setLayoutParams(view_Layout_params);

score 0 · Answer 4 · answered Sep 03 '17 at 19:39

The best and easiest way to do that is to right click the res folder in android studio and press show in explorer

Make four different folders in the res with these names :

layout-small

,

layout-normal

,

layout-large

,

layout-xlarge

Note : after done this and make sure your xml is in the four folders with exact folder names and modified according to your preference

Delete the layout and leave the other four

and put your xml in the four then modify it on each according to the size

now finally in your AndroidManifest add the following

    <supports-screens
    android:resizeable="true"
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true" />

Make android activity fit all screen sizes

4 Answers4