How to achieve this kind of layout in Android

Question

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.

I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.

First I went through:

developer.android.com/guide/practices/screens_support.html

And questions like:

stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products

I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.

I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.

This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):

(sorry for the link, I need 10 rep to post images)

http://i.imgur.com/KXTAXir.jpg

My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.

B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.

Here is an example of how it should work:

http://i.imgur.com/cH7fUze.jpg

Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.

Here is the layout code:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/darkgray"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.8"
    android:background="#666666" >

    <TextView
        android:id="@+id/level_text_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="LEVEL"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
        android:id="@+id/level_text_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="SCORE"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/level_text_clock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="01:59"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="8.4" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:adjustViewBounds="true" />

        <ProgressBar
            android:id="@+id/progressBar1"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="1000"
            android:progress="0" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:adjustViewBounds="true" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/pauseMask"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:visibility="gone" >

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/gameoverMask"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:visibility="gone" >

    </RelativeLayout>

</FrameLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.8"
    android:background="#666666" >

    <TextView
        android:id="@+id/level_text_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="0/0"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/button1"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="useHint" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button1"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="toggleSound" />

    <Button
        android:id="@+id/button3"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button2"
        android:layout_centerVertical="true"
        android:text="Button"
        android:onClick="togglePause" />

</RelativeLayout>

The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.

---

Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

Answer 1

I'm not sure, if I got your question right.

However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html

Just give the respective suffix in the name of your layout XML file.

Answer 2

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.

To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.

With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.