Android: Developing a login screen like Facebook

Question

I' trying to develop a screen on my android app like facebook login (App iPhone/Android) App Facebook Screenshot

How can I draw this separator line between these two edittexts: e-mail and password?

Thanks!!

Answer 1

to make a such effect you have just to make your own 9-patch drawable. i have alreaady done such thing on my app see this

Layout top drawable unpressed

Layout top drawable pressed

Layout bottom drawable unpressed

Layout bottom drawable pressed

The only thing that left is to build two selector one for the top edit text and another for the bottom edittext and set them as backround for your edittext:

selector_top_editText.xml:

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

    <item android:drawable="@drawable/layout_top_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/layout_top_normal"/>

</selector>

selector_bottom_editText.xml:

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

    <item android:drawable="@drawable/layout_bottom_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/layout_bottom_normal"/>

</selector>

For your login page you can use this layout

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


        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ems="10"
            android:inputType="textPersonName"
            android:background="@drawable/layout_top_selector" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:ems="10"
            android:inputType="textPassword" 
            android:background="@drawable/layout_bottom_selector"
            android:layout_below="@id/editText1"/>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="46dp"
            android:text="Login" />

</RelativeLayout>

check this and keep me in touch if you find problems

Cheers