Understanding Android layout and size

Question

Can someone please help me with Android layouts. I have been researching it for a week now and I'm as confused as ever. Here is my problem.

Say I have a layout as per this image (roughly to scale).

arbitrary phone with approximate layout

Its a simple view with a background image (which I stretch to fit). On this view I have a:

Top: A "Welcome" image that fills 80% of the width of the view and is 10% from left of view and 10% from right of view
Middle: 6 X Navigation buttons, again filling 80% of the width of the view and is 10% from left of view and 10% from right of view
Bottom: An footer image that fills 100% of the width of the screen

I am trying to create the images (.png files) to use for the top image, the nav buttons and footer image, and this is where the problem starts. I use pixel values to define the sizes of the buttons, but of course Android does not work like this. I have found online a rough size guide (in pixels) of the most popular screen resolutions - ldpi, mdpi, hdpi and xhdpi as indicated below. resolutions. Sorry I forget where the source was.

"Usually, I design mdpi images for a 320x480 screen and then multiply the dimensions as per the rules to get images for other Basically, General guidelines for designing images are:

mdpi - 320 x 480

ldpi is 0.75x dimensions of mdpi (240 x 360)
hdpi is 1.5x dimensions of mdpi (480 x 720)
xhdpi is 2x dimensinons of mdpi (640 x 960)"

I have created a navigation button to test and set sizes in pixel values as follows (NOTE: this is only width as height was scaled accordingly to maintain perspective)

ldpi - 160 pixels
mdpi - 280 pixels
hdpi - 420 pixels
xhdpi - 680 pixels

This all seems to be OK when viewing on differnt emulators within Eclipse. But tonight I came across this on the Android developers page. http://developer.android.com/guide/practices/screens_support.html#testing

At the bottom of the page it breaks small, medium, large and extra large screens up further into each being able to have ldpi, mdpi, hdpi and xhdpi.

Now I'm totally lost. Should I therefore create 16 different images for each button, each with a slightly different size and then let Android decide which one fits best? And I also read that its good practice to define different layouts as well depending on screen resolutions. This I can kind of understand as you can have different layouts on bigger sizes, but dont think I will need it in my situation. Its only a very basic app and I wont require different layouts and functionality for different screen sizes. The app will have to support all/most phone screen sizes but not necessarily tablets

Maybe I have this all the wrong way round but this is very confusing for me.

Can anyone please break it down to its simplest form for me please?

Kevin Coppock Kevin Coppock · Accepted Answer · 2013-08-28T22:59:19

Okay, well the first thing you need to learn about are Nine-Patches. There's an awesome generator here made by @RomanNurik that can help you generate the assets from your source images.

For your particular layout (which you probably want to make more adaptable to larger screen sizes) the general idea of the layout would be something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/my_footer"
        android:scaleType="centerCrop" />

    <LinearLayout
        android:id="upper_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/footer"
        android:orientation="horizontal"
        android:weightSum="10">

        <LinearLayout
            android:id="button_header_container"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="8"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_marginBottom="16dp"
                android:src="@drawable/header"
                android:scaleType="centerCrop" />

            <Button
                android:id="@+id/button1"
                android:layout_width="match_parent"
                android:layout_height="44dp"
                android:layout_marginBottom="16dp"
                android:background="@drawable/my_button_nine_patch"
                android:gravity="center"
                android:text="Navigation Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="44dp"
                android:layout_marginBottom="16dp"
                android:background="@drawable/my_button_nine_patch"
                android:gravity="center"
                android:text="Navigation Button" />

            <!-- Etc. for other buttons -->

        </LinearLayout>

    </LinearLayout> 

</RelativeLayout>

Understanding Android layout and size

2 Answers