Android – Modern Login Form in Android Studio

Modern Login Form: The first impression for the user is your app is the Login Form. So in order to enhance user engagement we must have to design out login form more interactive. Today we’ll learn how to design a Modern Login Form in Android Studio.

Tools Required:

1. Android Studio.

Steps to Follow:

1. Create a new Android App project in your android studio.
2. Copy your image resources to the drawable folder.
3. Right click on Drawable folder from Project Explorer, go to New -> Drawable Resource File. Name the file as edtdesign and click on OK and add the following XML code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#4D4D55" android:width="2dp"/>
    <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp"/>
</shape>

3. Repeat step 2 for btndesign file for our button controls and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <padding android:top="15dp" android:right="15dp" android:left="15dp" android:bottom="15dp"/>
    <corners android:topLeftRadius="25dp" android:bottomLeftRadius="25dp"/>
    <stroke android:width="2dp" android:color="#4D4D55"/>
</shape>

• Go to the activity_main.xml or open the Activity which will work as login activity and add the following XML Code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/back"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginTop="130dp"
        >
        <ImageView
            android:layout_width="70dp"
            android:layout_height="100dp"
            android:src="@drawable/horse"
            android:layout_gravity="center"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Android Ui Academy"
            android:textSize="17sp"
            android:textStyle="bold"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="Please Login First"
            android:textSize="12sp"
            android:textColor="#E92C0C"
            android:layout_marginTop="10dp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User Name"
            android:textSize="12sp"
            android:layout_marginTop="5dp"
            android:background="@drawable/edtdesign"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:textSize="12sp"
            android:layout_marginTop="5dp"
            android:background="@drawable/edtdesign"
            android:inputType="textPassword"
            />
        <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Login"
            android:textAllCaps="false"
            android:layout_gravity="right"
            android:background="@drawable/btndesign"
            android:layout_marginTop="20dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Don't have an Account? Register"
            android:layout_marginTop="20dp"
            />

    </LinearLayout>

</RelativeLayout>

Video Tutorial:

Watch full video tutorial to learn how to design modern modern login form in android studio.

Source Code:

I hope you enjoyed this short tutorial. Please don’t forget to subscribe our YouTube Channel, Android Ui Academy