Make a Login form in Android Studio and XML

Login form in android studio and adobe xd

In this tutorial I will show you how to make a beautiful login page in android studio, I made the design using Adobe XD, so this will be the final result of the project

first of all, we will need to create two drawable files, one for the button background and another for the edit text background, for this follow these steps:

right-click on drawable folder > new > new drawable file

create two files and name them:

• btn_bg.xml
• textedit_bg.xml

and copy this code

textedit.xml:

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

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

    <stroke

        android:color="#313131"

        android:width="1dp"

        />

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

</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/MainColord"/>

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

</shape>

we will also need to modify the colors file inside our value folder and copy this file

colors.xml

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

<resources>

    <color name="colorPrimary">#6200EE</color>

    <color name="colorPrimaryDark">#3700B3</color>

    <color name="colorAccent">#03DAC5</color>

    <!--Add a custom color-->

    <color name="MainColord">#6c63ff</color>

</resources>

and now let's code the layout of the app
inside your activity_main.xml copy and pass this code

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:orientation="vertical"

    android:gravity="center_horizontal"

    android:background="#fff"

    tools:context=".MainActivity">

    <ScrollView

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="vertical"

            android:gravity="center_horizontal"

            android:padding="8dp"

            >

            <ImageView

                android:layout_width="wrap_content"

                android:layout_height="200dp"

                android:src="@drawable/image"

                />

            <TextView

                android:layout_width="250dp"

                android:layout_height="wrap_content"

                android:layout_gravity="start"

                android:text="Create Your free Account"

                android:textSize="38sp"

                android:layout_marginHorizontal="18dp"

                android:textColor="@color/MainColord"

                android:layout_marginBottom="12dp"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Name:"

                android:layout_gravity="start"

                android:layout_marginHorizontal="18dp"

                android:textSize="22sp"

                android:layout_marginBottom="8dp"

                />

            <EditText

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginHorizontal="18dp"

                android:hint="Doctor Code"

                android:padding="14dp"

                android:background="@drawable/textedit_bg"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Email:"

                android:layout_gravity="start"

                android:layout_marginHorizontal="18dp"

                android:textSize="22sp"

                android:layout_marginBottom="8dp"

                android:layout_marginTop="12dp"

                />

            <EditText

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginHorizontal="18dp"

                android:hint="YourMail@mail.com"

                android:padding="14dp"

                android:inputType="textEmailAddress"

                android:background="@drawable/textedit_bg"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Password:"

                android:layout_gravity="start"

                android:layout_marginHorizontal="18dp"

                android:textSize="22sp"

                android:layout_marginBottom="8dp"

                android:layout_marginTop="12dp"

                />

            <EditText

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginHorizontal="18dp"

                android:hint="More than 6 characters"

                android:padding="14dp"

                android:background="@drawable/textedit_bg"

                />

            <Button

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_marginHorizontal="18dp"

                android:layout_marginVertical="12dp"

                android:text="Sign up"

                android:paddingVertical="16dp"

                android:textColor="#fff"

                android:background="@drawable/btn_bg"

                />

            <TextView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:text="Already have an account ? Sign in"

                android:textAlignment="center"

                />

        </LinearLayout>

    </ScrollView>

</LinearLayout>

I hope that you liked this tutorial if you want to see more just comment bellow