Helper screen on first launch (9-patch)

Question

I'm trying to develop a help screen for the first launch of an application. To do that work on all size of device, I have done a 9patch file (Don't look at the design it's totally raw. I just want to make a proof of concept for the designer)

As you can see, I want to repeat (according the screen size) the left space vertically and the space between "Swipe to" and "you have done" horizontally.

I've put my png in the hdpi folder and my activity contains the following resource layout:

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/helper"
        android:scaleType="fitXY" />
</RelativeLayout>

Here is the result with a picture 720px large:

Here is the result with a picture 480px large:

Here is the result with a picture 240px large:

I think I have to play with a good dimension and ldpi/mdpi/hdpi/xhdpi folder and maybe also with derivated ldpi-landscap/mdpi-landscape....

Is there a way to do it right ? What dimension should my image have ?

Thanks in advance !

Answer 1

As Thomas Clayson suggests, I've done not 4 but 2 images:

• Top: the 2 arrows and corresponding text
• Bottom: the "switch to display" and "tap to dismiss"

Here is my "test" layout:

<LinearLayout 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:orientation="vertical"
android:background="@color/my_translucent_background_color" >

<ImageView
    android:id="@+id/imageview_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/helper_top"
    android:paddingLeft="20dp"
    android:layout_weight="1"
    android:layout_gravity="top|right" />

<ImageView
    android:id="@+id/imageview_bottom"
    android:layout_width="400dp"
    android:layout_height="wrap_content"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:src="@drawable/helper_bottom"
    android:layout_weight="2"
android:layout_gravity="bottom|center_horizontal" />

I still have some issues for the top area when it's resize, it doesn't fit the right top angle.