yann.debonnel
yann.debonnel

Reputation: 766

how to accomplish this layout in android

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

enter image description here

The closest I was able to get was this

enter image description here

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 :

enter image description here

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

Upvotes: 0

Views: 947

Answers (1)

Micah Hainline
Micah Hainline

Reputation: 14437

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

Upvotes: 3

Related Questions