Question

In my android app I have a login screen. A graphic designer has given me this template

The closest I was able to get was this

I used a 9.png (temporarily the same as i use for my buttons)

Any ideas how to pull this off with a combinations of layouts and 9.png files ? I don’t want to use a static background image because we want to support all screen sizes…

EDIT : I ended up using two different nine-patch files as the login part also needed to be extendable (the string in the button can vary in length according to phone locale). To put them together i used a relativelayout. I am pretty close to what I wanted to do :

for those interested, here the layout i used (i think i could be simplified) :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:paddingLeft="15dp" android:paddingRight="15dp"
    android:background="#ffffffff" android:gravity="center"
    android:orientation="vertical">
    <LinearLayout android:id="@+id/login_field_container_top"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:padding="5dp"
        android:layout_centerInParent="true" android:layout_marginTop="0dp"
        android:layout_marginBottom="-5dp" android:background="@drawable/login_field_container_top">
        <TextView android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:text="@string/email" />
        <EditText android:id="@+id/email" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:scrollbars="none"
            android:inputType="textEmailAddress" android:singleLine="true"
            android:maxLength="255" />
        <TextView android:layout_height="wrap_content"
            android:layout_width="fill_parent" android:text="@string/password"
            android:layout_margin="5dp" />
        <EditText android:id="@+id/password" android:layout_width="fill_parent"
            android:layout_height="wrap_content" android:scrollbars="none"
            android:password="true" android:singleLine="true" />
    </LinearLayout>
    <RelativeLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_gravity="right">
        <LinearLayout android:id="@+id/login_field_container_bottom"
            android:layout_alignParentRight="true" android:orientation="vertical"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:gravity="center" android:background="@drawable/login_field_container_bottom">
            <LinearLayout android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:padding="1dp"
                android:layout_margin="1dp" android:layout_gravity="center"
                android:gravity="center" android:background="@drawable/small_button_holder">
                <Button android:id="@+id/login_button" android:text="@string/login"
                    android:layout_margin="0dp" android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout android:orientation="horizontal"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:paddingBottom="10dp" android:layout_toLeftOf="@id/login_field_container_bottom"
            android:layout_alignBottom="@id/login_field_container_bottom">
            <TextView android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:text="@string/notamember"
                style="@style/Subtitle" />
            <Button android:id="@+id/register" android:text="@string/register"
                android:layout_width="wrap_content" android:layout_height="wrap_content" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

The only part I am not happy about is I had to add padding to align the left and right button

Answer 1

Have your designer cut you a nine-patch with the login tab as part of the non stretched area, but still part of the content area. Stretch that across the whole screen, and then just position the buttons relative to the parent.

9-patch

     *********************
     _____________________
    /                     \
*   |                     |  X
*   |                     |  X
*   \_______________      |  
*                   |     |  
*                   |_____|
      XXXXXXXXXXXX

* = content area
X = stretchable area