If you are not read yet the part-04 blog then first of all you read and implement part-01 visit CLICK HERE. Because this blog linked with part-04

In this blog, we can create a Login Fragment to create and design a username and password which is shown in front of users.

First, we have to do Insert your New Fragment in your project with the help of this video CLICK HERE and implement a code which is given below.

In this fragment, you get a default layout named constraint layout so we can start the design with this layout. Under this layout, we can create an EditText layout for a username or email ID space.

<EditText
android:id="@+id/email_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:background="@drawable/edit_text_bg"
android:hint="@string/email_id"
android:inputType="textEmailAddress"
android:paddingStart="20dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textColor="@color/purple_700"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias=".5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".1"
app:layout_constraintWidth_percent=".8" />

Now, we can create a password Edit Text which is input a password from the user to login purpose.

<EditText
android:id="@+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:autofillHints=""
android:background="@drawable/edit_text_bg"
android:hint="@string/password"
android:inputType="textPassword"
android:paddingStart="20dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textColor="@color/purple_700"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias=".5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/email_id"
app:layout_constraintVertical_bias="0"
app:layout_constraintWidth_percent=".8" />

Now, we can create a button that is implemented as Login Button. When users click the Login button they directly reach the Homepage of your application.

<Button
android:id="@+id/loginButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:fontFamily="@font/aldrich"
android:text="@string/login"
android:textColor="@color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/password"
app:layout_constraintWidth_percent=".8" />

And Last we can create a Text View for Forget Password means when the user click forgets the password then users able to reset their own login password such that we can implement this function.

<TextView
android:id="@+id/forgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:text="@string/forgot_password"
android:textColor="@color/purple_700"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/password"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/password"
app:layout_constraintVertical_bias="0" />

NOTE: ALL CODE IMPLEMENTED UNDER CONSTRAINT LAYOUT.

Now, we have to design Edit Text and Button with the help of a drawable folder means we have to create an XML layout for designing purposes. So first an XML layout name is edit_text_bg code given below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<corners android:radius="4dp" />
<stroke
android:width="2dp"
android:color="@color/light_purple_700" />

</shape>

Now, we can create a one more thing named as button_bg code given below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<corners android:radius="100dp"/>
<solid android:color="@color/purple_700"/>

</shape>

Now above xml layout insert in their Edit Text and Button background method. So Edit Text Layout you can insert single line code given below.

android:background="@drawable/edit_text_bg"

you can insert this code in both Edit Text Layouts then you can get an attractive look at this layout.

Now, we can insert button background code below.

android:background="@drawable/button_bg"

Next part will be available on this blog CLICK HERE

IF YOU GOT ANY ERROR THEN YOU MUST WATCH OUR YOUTUBE VIDEO CLICK HERE


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *