Android login screen design xml source code

Material design login screen android studio make it an android stylish login screen

login page in android studio source code

Step 1: Add Dependency  at build.gradle

implementation 'com.google.android.material:material:1.2.0-alpha05'

Step 2: Add This Button Design at the drawable folder button_design.xml

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

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

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

    android:color="@color/white"

    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">

        <shape android:shape="rectangle">

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

        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="rectangle">

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

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

        </shape>

    </item>

</ripple>

Step 3: login_activity.xml

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

<ScrollView 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:padding="30dp"

    android:transitionName="transition_login_btn"

    tools:context=".LoginScreen">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical">

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:padding="5dp"

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

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="50dp"

            android:fontFamily="@font/cera_pro_black"

            android:text="Login"

            android:textAllCaps="true"

            android:textColor="@color/black"

            android:textSize="40sp" />

        <LinearLayout

            android:layout_marginTop="80dp"

            android:orientation="vertical"

            android:layout_width="match_parent"

            android:layout_height="wrap_content">

            <com.google.android.material.textfield.TextInputLayout

                android:layout_width="match_parent"

                app:boxStrokeColor="@color/black"

                app:endIconTint="@color/black"

                android:hint="Username"

                app:hintTextColor="@color/black"

                app:startIconTint="@color/black"

                app:startIconDrawable="@drawable/ic_person_userid_24dp"

                app:boxStrokeWidthFocused="2dp"

                app:endIconMode="clear_text"

                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

                android:layout_height="wrap_content">

                <com.google.android.material.textfield.TextInputEditText

                    android:layout_width="match_parent"

                    android:textColor="@color/black"

                    android:inputType="number"

                    android:maxLength="6"

                    android:textSize="16sp"

                    android:fontFamily="@font/cerapro_medium"

                    android:layout_height="wrap_content"/>

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.textfield.TextInputLayout

                android:layout_marginTop="2dp"

                android:layout_width="match_parent"

                app:boxStrokeColor="@color/black"

                android:hint="Password"

                app:hintTextColor="@color/black"

                app:endIconTint="@color/black"

                app:startIconTint="@color/black"

                app:startIconDrawable="@drawable/ic_password_24dp"

                app:boxStrokeWidthFocused="2dp"

                app:endIconMode="password_toggle"

                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

                android:layout_height="wrap_content">

                <com.google.android.material.textfield.TextInputEditText

                    android:layout_width="match_parent"

                    android:inputType="textPassword"

                    android:textSize="16sp"

                    android:textColor="@color/black"

                    android:fontFamily="@font/cerapro_medium"

                    android:layout_height="wrap_content"/>

            </com.google.android.material.textfield.TextInputLayout>

            <RelativeLayout

                android:layout_marginTop="10dp"

                android:orientation="horizontal"

                android:layout_width="match_parent"

                android:layout_height="wrap_content">

                <CheckBox

                    android:layout_centerVertical="true"

                    android:textColor="@color/black"

                    android:buttonTint="@color/black"

                    android:text="Remember Me"

                    style="@style/Widget.AppCompat.CompoundButton.CheckBox"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"/>

                <Button

                    android:layout_alignParentEnd="true"

                    android:background="@android:color/transparent"

                    android:text="Forget Password"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"/>

            </RelativeLayout>

            <Button

                android:textColor="@color/white"

                android:layout_marginTop="20dp"

                android:background="@drawable/btn_design"

                android:text="Login"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"/>

            <Button

                android:layout_marginTop="20dp"

                android:layout_gravity="center"

                android:background="@android:color/transparent"

                android:text="Create\nAccount"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"/>

        </LinearLayout>

    </LinearLayout>

</ScrollView>

Output