Make a Login Form UI in Android Studio

in this tutorial, I will show you how to make a simple Login form in Android studio. it's a very quick tutorial and by the end of this tutorial, you will be able to create a beautiful login page for your android app.

Main Activity layout

let's start by coding the main activity layout of our application

Activity_main.xml:

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

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

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:orientation="vertical"

    android:background="@drawable/background"

    android:padding="15dp"

    tools:context=".MainActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Login"

        android:textAllCaps="true"

        android:textSize="36sp"

        android:textColor="@color/colorAccent"

        />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/edittext_bg"

        android:paddingHorizontal="20dp"

        android:paddingVertical="12dp"

        android:hint="E-Mail"

        android:inputType="textEmailAddress"

        android:layout_marginVertical="15dp"

        />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/edittext_bg"

        android:paddingHorizontal="20dp"

        android:paddingVertical="12dp"

        android:hint="Password"

        android:inputType="textPassword"

        />

    <CheckBox

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Remember Me"

        android:textColor="@color/colorAccent"

        android:layout_marginVertical="15dp"

        />

    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Login Now"

        android:background="@drawable/btn_bg"

        />

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Forget your Password ?"

        android:layout_marginVertical="10dp"

        android:textColor="@color/colorAccent"

        />

</LinearLayout>

now we will need to create 3 custom background:

1. the gradient background
2. the edit text background
3. the button background

we will also need to modify the color XML file 

in the app folder go to res folder choose values and click on color.xml

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

<resources>

    <color name="colorPrimary">#4a00e0</color>

    <color name="colorPrimaryDark">#8e2de2</color>

    <color name="colorAccent">#fafafa</color>

</resources>

now create  new drawable files in your drawable folder and name it edittext_bg.xml and btn_bg.xml and background.xml


background.xml:

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

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

    <gradient android:startColor="@color/colorPrimary"

        android:endColor="@color/colorPrimaryDark"

        android:angle="90"

        />

</shape>

edittext_bg.xml

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

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

    <solid android:color="@color/colorAccent"/>

    <corners android:radius="80dp"/>

</shape>

btn_bg.xml

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

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

    <solid android:color="@color/colorAccent"/>

    <corners android:radius="80dp"/>

</shape>

and that's it, you can use it for your own project and also customize it