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

Answer 1

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

Answer 2

You have to write xml code for large screen. I think you are keeping your xml file in res/layout folder. if it is you can keep three folders to differentiate various screens like res/layout-small , res/layout , res/layout-long . In these three folders you can set different alignements to various screen types. For Medium Screen, keep your xml code in layout, and for small screens - keep it in layout-small and etc., and set in your AndroidManifest.xml ...

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

Answer 3

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.

Answer 4

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

Answer 5

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