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:
- Android Studio.
Steps to Follow:
- Create a new Android App project in your android studio.
- Copy your image resources to the drawable folder.
- 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
Thank you for sharing.Personally speaking, Android developmment is the most amazing thing in IT development.
Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.