Re-scaling layout to fit screen

Question

I would like to scale my application layout to the screen size.

When I run it on a 4 inch emulator (but I don't display the actual screen size, so it looks larger)

It looks like this,

However when I run it on a larger emulator with the actual screen size, it looks like this,

My layout.xml is

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:animateLayoutChanges="false"
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" >

Followed by the images and buttons. The width and height of all images and buttons are,

android:layout_width="wrap_content"
android:layout_height="wrap_content"

I guess what I am asking is how to scale the layout to fit the size of the screen?

Like the way it fits the screen when the screen size is 4inch in emu but is not displaying to actual screen size.

As I want to be able to use the application on larger tablets.

Answer 1

You can use different layouts for different screen sizes.

And by the way...are these images from an emulator??

I hope you are not using "scale to actual size" while running your emulators... Difference in pixel and resolution may also lead to this

Answer 2

In your relative layout, do this

android:layout_width="match_parent"
android:layout_height="match_parent"

This will make the layout fill the screen.

EDIT:

For the ImageView, use

 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scaleType="centerInside"

This would stretch the image to fit the width (hopefully).

The connect ImageView is a tricky one. Not sure what will work for that. You'll need to experiment with the scaleType attribute.

For the buttons, increase the text size and set the layout_width as wrap_content. The buttons will get bigger.