How to make iphone like login screen in android

Question

i need to create a login screen in android that will look like this.

I have white rectangle image but that image is bigger than screen. So whenever i am applying that image to linearlayout(that has edittext and button).linearlayout fills complete screen.

I know its a very beginner question but how can i make this screen? and i also want that that white image should work on every

Answer 1

You need to create some drawables (XML), 1 for the background (so you can add the round corners) and another 1 for the button where you will add the gradient and stroke.

EDIT: Added an example.

Result:

Layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#d4d4d4" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/round_borders"
        android:orientation="vertical"
        android:paddingTop="40dp" >

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:paddingBottom="0dp"
            android:paddingTop="0dp"
            android:singleLine="true"
            android:text="username" />

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:paddingBottom="0dp"
            android:paddingTop="0dp"
            android:singleLine="true"
            android:text="password" />

        <Button
            style="@style/OrangeButtons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:text="Log in" />
    </LinearLayout>
</RelativeLayout>

@style/OrangeButtons

<style name="OrangeButtons">
    <item name="android:gravity">center</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:focusable">true</item>
    <item name="android:background">@drawable/orange_button</item>
</style>

@drawable/orange_button

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="#f29d00"
                android:endColor="#d96c00"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#fade96" />
            <corners
                android:radius="15dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="#f29d00"
                android:startColor="#d96c00"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#fade96" />
            <corners
                android:radius="15dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="#f29d00"
                android:startColor="#d96c00"
                android:angle="90" />
            <stroke
                android:width="1dp"
                android:color="#fade96" />
            <corners
                android:radius="15dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

@drawable/round_borders

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <padding android:left="20dp" android:top="35dp"
            android:right="20dp" android:bottom="15dp" />
    <corners android:radius="8dp" />
</shape>

Answer 2

You can set layout background to white `android:background="#FFFFFFFF" or something like that. You can also have a look at shape drawables http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape , use something like solid in your xml