开发者

how to accomplish this layout in android

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

how to accomplish this layout in android

The closest I was able to get was this

how to accomplish this layout in android

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 :

how to accomplish this layout in android

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:layou开发者_如何学编程t_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


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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜