Login Screen

The final output screenshots of this tutorial will be like below image

1. Create a new project by going to File ⇒ New Android Project. Fill all the details and name your activity as LoginActivity.

In style.xml. First change the parent name in value/style.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Create a new xml file under res/layout and name it is as toolbar.xml and type the Following Code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="#039e79">
</android.support.v7.widget.Toolbar>

For Login Button, create a file in Drawable like this res/drawable.


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#42b49a" />
    <corners android:radius="4dp" />

</shape>

• For Facebook Button, Create a file in Drawable like this res/drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#3469af" />
    <corners android:radius="6dp" />

</shape>

• For Twitter Button, Create a file in Drawable like this res/drawable.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#51a8d5" />
    <corners android:radius="6dp" />

</shape>

• For EditText, Create a file in Drawable like this res

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#f6fafb"/>
    <corners
        android:radius="5dp"/>
</shape>

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/relative"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#fcd9e1e0">

    <include

        android:id="@+id/toolbar1"

        layout="@layout/tooolbar" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:text="Login"

        android:textColor="#ffffff"

        android:textSize="30sp"/>

    <TextView

        android:id="@+id/welcome"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/toolbar1"

        android:layout_alignParentEnd="true"

        android:layout_marginEnd="20dp"

        android:layout_marginTop="20dp"

        android:text="Sign Up"

        android:textColor="#3a3a3a"

        android:textSize="20sp"

        android:textStyle="bold"/>

    <de.hdodenhof.circleimageview.CircleImageView

        android:id="@+id/logo"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:layout_below="@+id/welcome"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="15dp"

        android:contentDescription="@null"

        android:src="@drawable/g" />

    <EditText

        android:id="@+id/email"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:layout_below="@+id/logo"

        android:layout_marginEnd="20dp"

        android:layout_marginStart="20dp"

        android:layout_marginTop="30dp"

        android:background="@drawable/edit_text"

        android:hint="Email" />

    <EditText

        android:id="@+id/password"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:layout_below="@+id/email"

        android:layout_marginEnd="20dp"

        android:layout_marginStart="20dp"

        android:layout_marginTop="14dp"

        android:background="@drawable/edit_text"

        android:hint="Password" />

    <Button

        android:id="@+id/login"

        android:layout_width="match_parent"

        android:layout_height="45dp"

        android:text="Login"

        android:textColor="#fff"

        android:textAllCaps="false"

        android:textSize="22sp"

        android:layout_marginEnd="20dp"

        android:layout_marginStart="20dp"

        android:layout_marginTop="20dp"

        android:background="@drawable/button_background"

        android:layout_below="@+id/password"/>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_below="@+id/login"

        android:weightSum="2"

        android:background="#e2eeee"

        android:layout_marginTop="30dp">

    <Button

        android:id="@+id/twitter"

        android:layout_width="0dp"

        android:layout_height="45dp"

        android:layout_weight="1"

        android:text="Twitter"

        android:background="@drawable/twitter_button"

        android:layout_marginStart="20dp"

        android:layout_marginTop="60dp"

        android:textAllCaps="false"

        android:textSize="20sp"

        android:textColor="#fff"/>

        <Button

            android:layout_width="0dp"

            android:layout_height="45dp"

            android:layout_weight="1"

            android:background="@drawable/facebook_button"

            android:textAllCaps="false"

            android:text="Facebook"

            android:textColor="#fff"

            android:textSize="20sp"

            android:layout_marginTop="60dp"

            android:layout_marginEnd="20dp"

            android:layout_marginStart="5dp"/>

    </LinearLayout>

</RelativeLayout>