Android Designing a Login Screen (Sign In & Sign Up Screens)

sign-in-up-screenHere is a simple example of designing one of the most common needed screen (Sign In&Up). Of course, this is not the only way to design such screens but the objective here is to learn some tips and tricks.

( 1 ) Home Screen

sign-in-up-home

Activity Layout

  • res/layout/activity_main.xml
  • RelativeLayout (Root)
    • LinearLayout
      • Button (Sign Up)
      • Button (Sign In)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 

    android:background="@drawable/balloon_bg">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/linearlayout_bg"
        android:padding="10dp"
        >

        <Button 
               android:id="@+id/btnSignUp"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:padding="10dp"
            android:layout_margin="4dp"
               android:text="Sign Up"
               android:background="@drawable/button_default_bg"
               style="@style/DefaultButtonText"
           />
        <Button 
               android:id="@+id/btnSingIn"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_margin="4dp"
               android:text="Sign In"
            style="@style/DefaultButtonText"
               android:background="@drawable/button_default_bg"
           />
        </LinearLayout>

</RelativeLayout>

LinearLayout Background

  • res/drawable-hdpi/linearlayout_bg.xml (The semi-transparent black container background)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <solid android:color="#99000000" ></solid>
   <corners android:radius="8px"></corners> 
   <stroke  android:width="0dp" android:color="#A4C2E0"></stroke>  
</shape>

Button Background

  • res/drawable-hdpi/button_default_bg.xml (Buttons background)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:state_pressed="true" >
        <shape>
            <solid
                android:color="#f8f9fa" />
            <stroke
                android:width="1dp"
                android:color="#d2d2d2" />
            <corners
                android:radius="1dp" />

        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#f8f9fa"
                android:endColor="#d2d2d2"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#d2d2d2" />
            <corners
                android:radius="1dp" />

        </shape>
    </item>
</selector>

Button Text Style

  • /res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Sign In&amp;Up</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

     <style name="DefaultButtonText">
       <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#979797</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_margin">3dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">20sp</item>
        <item name="android:shadowColor">#f9f9f9</item>
        <item name="android:shadowDx">1</item>
        <item name="android:shadowDy">1</item>
        <item name="android:shadowRadius">1</item>
    </style>
</resources>

( 2 ) Sing-Up Screen

sign-up-screen

Activity Layout

  • res/layout/activity_sign_up_screen.xml
  • RelativeLayout (Root)
    • LinearLayout
      • EditText (email)
      • EditText (user name)
      • EditText (password)
      • Button (Sign Up)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 

    android:background="#ffffff">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        >

        <EditText 
                android:id="@+id/etEmail"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
              android:background="@drawable/edittext_top_bg"
            android:padding="10dp"
            android:hint="Email"
            android:textColorHint="#bbbbbb"
            android:drawableLeft="@drawable/email"/>
        <EditText 
                android:id="@+id/etUserName"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@drawable/edittext_default_bg"
               android:layout_marginTop="-2dp"
            android:padding="10dp"
            android:hint="User Name"
            android:textColorHint="#bbbbbb"
            android:drawableLeft="@drawable/user"/>
        <EditText 
                android:id="@+id/etPass"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@drawable/edittext_bottom_bg"
               android:layout_marginTop="-2dp"
            android:padding="10dp"
            android:hint="Password"
            android:textColorHint="#bbbbbb"
            android:password="true"
            android:drawableLeft="@drawable/password"/>
        <Button 
               android:id="@+id/btnSingIn"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_margin="4dp"
               android:text="Sign Up"
            style="@style/DefaultButtonText"
               android:background="@drawable/button_default_bg"
           />
        </LinearLayout>

</RelativeLayout>

Top EditText Background

  • res/drawable-hdpi/edittext_top_bg.xml (top corners curved)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
     <solid android:color="#FFFFFF"/>
     <stroke
        android:width=".05dp"
        android:color="#d2d2d2" />
     <corners android:topLeftRadius="5dp"
         android:topRightRadius="5dp"/>
</shape>

Middle EditText Background

  • res/drawable-hdpi/edittext_default_bg.xml (all corners are not round)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
     <solid android:color="#FFFFFF"/>
     <stroke
        android:width="0.5dp"
        android:color="#d2d2d2" />
</shape>

Bottom EditText Background

  • res/drawable-hdpi/edittext_top_bg.xml (bottom corners curved)
<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp" >
     <solid android:color="#FFFFFF"/>
     <stroke
        android:width="0.5dp"
        android:color="#d2d2d2" />
     <corners android:bottomLeftRadius="5dp"
         android:bottomRightRadius="5dp"/>
</shape>

( 3 ) Sing-In Screen

sign-in-screen

Activity Layout

  • res/layout/activity_sign_in_screen.xml
  • RelativeLayout (Root)
    • LinearLayout
      • EditText (email)
      • EditText (password)
      • Button (Sign In)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 

    android:background="#ffffff">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
        >

        <EditText 
                android:id="@+id/etUserName"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
              android:background="@drawable/edittext_top_bg"
            android:padding="10dp"
            android:hint="Email"
            android:textColorHint="#cccccc"
            android:drawableLeft="@drawable/email"/>
        <EditText 
                android:id="@+id/etPass"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@drawable/edittext_bottom_bg"
               android:layout_marginTop="-2dp"
            android:padding="10dp"
            android:hint="Password"
            android:textColorHint="#cccccc"
            android:password="true"
            android:drawableLeft="@drawable/password"/>
        <Button 
               android:id="@+id/btnSingIn"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_margin="4dp"
               android:text="Sign In"
            style="@style/DefaultButtonText"
               android:background="@drawable/button_default_bg"
           />
        </LinearLayout>

</RelativeLayout>

Source Code @ GitHub