How to create a login screen in Android Studio

In this tutorial, we’ll learn how to create a login screen in android and how to handle security when someone tries to make false attempts.
A login application is a screen that asks for your credentials to access a specific application. You may have noticed it while signing onto Linkedin, Snapchat, and other social media sites.

Contents

1 . What is Splash Screen

Splash screens are commonly used by applications to inform the user that the Program is loading. They inform you that a lengthy procedure is in the works. The loading status is sometimes shown via a progress bar within the splash screen.

2 . What is login Screen / How to create a login screens

The login screen is the web page or login page of a web/mobile application that requires user identification and authentication, which is done by entering a username and password combination on a regular basis.

4 . User Profile Screen

A user profile is a collection of settings and information about a specific person. It comprises important identifying information such as a person’s name, age, portrait photograph, and personal attributes such as experience or competence.

Preview:

File: activity_main.xml

–>Add the below-given code to your file activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="?android:attr/colorFocusedHighlight"
    android:scrollbarSize="30sp"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"

        android:layout_height="270dp"
        android:layout_marginTop="50dp"
        android:src="@drawable/well"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="116dp"
        android:fontFamily="@font/bangers"
        android:text="Join Us Now"
        android:textAlignment="center"

        android:textSize="70sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:text="Welcome to Our Community"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />


</androidx.constraintlayout.widget.ConstraintLayout>

File: activity_login.xml

–> Create a New Empty Activity “Login” and Add the below-given code to your file activity_login.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:background="#E3B476"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".Login">


    
    <View
        android:layout_width="wrap_content"
        android:layout_height="100dp"/>

    <TextView
        android:id="@+id/logoName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/bungee"

        android:text="Hello there, Welcome Back"
        android:textColor="@color/black"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/slogoName"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:fontFamily="@font/antic"
        android:text="Sign In to continue"
        android:textColor="@color/black"
        android:textSize="20sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"

        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/username"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/password"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black"
            app:passwordToggleEnabled="true">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword">

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

        <Button
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="5dp"
            android:background="#00000000"
            android:elevation="0dp"
            android:text="Forgot Password" />

        <Button
            android:id="@+id/go1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="#000"
            android:text="GO"
            android:textColor="#fff"
            app:backgroundTint="#100F0F" />

        <Button
            android:layout_width="match_parent"
            android:id="@+id/SignIn"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="5dp"
            android:background="#00000000"

            android:text="New User? SIGN UP"
            android:textColor="#000" />


    </LinearLayout>


</LinearLayout>

File: activity_sign_up.xml

–> Create a New Empty Activity “SignUp” and Add the below-given code to your file activity_sign_up .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:background="#E3B476"
    android:padding="20dp"
    tools:context=".SignUp">

    <ImageView
        android:layout_width="322dp"
        android:layout_height="100dp"
        android:src="@drawable/sm"

        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:fontFamily="@font/bungee"
        android:text="Welcome"
        android:textAlignment="center"
         android:layout_gravity="center_horizontal"
        android:textColor="@color/black"
        android:textSize="30sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-smallcaps"
        android:text="Register here..."
        android:textColor="#153ec2"
        android:textSize="18sp"

        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/name"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="NAME"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/username"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"
            app:counterMaxLength="15"
            app:counterEnabled="true"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text">

            </com.google.android.material.textfield.TextInputEditText>
        </com.google.android.material.textfield.TextInputLayout>
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/email"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"

            android:textColorHint="@color/black"
            app:hintTextColor="@color/black">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:inputType="textEmailAddress"
                android:layout_height="wrap_content">

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


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/phone"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Phone Number"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black"
             >


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="number">

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/password"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:textColorHint="@color/black"
            app:hintTextColor="@color/black"
            app:passwordToggleEnabled="true">


            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword">

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

        <Button
            android:id="@+id/go"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"
            android:text="GO"
            android:textColor="#fff"
            app:backgroundTint="#153ec2" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="#00000000"
            android:text="Already have an acocunt ?  Login"
            android:textColor="#130F0F"
            android:textSize="12sp"
            app:backgroundTint="#100F0F" />



    </LinearLayout>
</LinearLayout>

File: activity_user_profile.xml

–> Create a New Empty Activity “UserProfile” and Add the below-given code to your file activity_user_profile.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:orientation="vertical"
    tools:context=".UserProfile">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#fece2f"
        android:padding="20dp">

        <ImageView
            android:id="@+id/profile"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="center"
            android:layout_centerVertical="true"
            android:src="@drawable/lg" />

        <TextView
            android:id="@+id/full_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/profile"
            android:fontFamily="@font/bungee"
            android:includeFontPadding="false"
            android:text="Developers Dome"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/last_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/full_name"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/profile"
            android:fontFamily="@font/antic"

            android:includeFontPadding="false"
            android:text="Software Engineer"
            android:textSize="15sp" />


    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-100dp"
        android:padding="20dp">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="0dp"
            android:layout_height="125dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            app:cardBackgroundColor= "#fece2f"
           >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="5dp">


                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:id="@+id/payment_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:fontFamily="@font/bungee"
                    android:includeFontPadding="false"
                    android:text="$444"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/detail_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/payment_label"
                    android:layout_centerHorizontal="true"
                    android:includeFontPadding="false"
                    android:text="$456"
                    android:textSize="10sp" />


            </RelativeLayout>


        </com.google.android.material.card.MaterialCardView>



        <com.google.android.material.card.MaterialCardView
            android:layout_width="0dp"
            android:layout_height="125dp"
            android:layout_margin="10dp"
            android:layout_weight="1"
            app:cardBackgroundColor= "#fece2f"
            >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="5dp">


                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerHorizontal="true"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:id="@+id/payment_label2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:fontFamily="@font/bungee"
                    android:includeFontPadding="false"
                    android:text="$555"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/detail_label2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/payment_label2"
                    android:layout_centerHorizontal="true"
                    android:includeFontPadding="false"
                    android:text="$456"
                    android:textSize="10sp" />


            </RelativeLayout>


        </com.google.android.material.card.MaterialCardView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">
        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:hint="Name">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Sagar Paliwal">




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



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

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:hint="password">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="****1234">




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



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

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:hint="Mobile Number">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="1234567890">




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



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

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:hint="Email">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="abcd@gmail.com">




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



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

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Update"
    android:fontFamily="@font/antic"
    android:background="#fece2f"/>





    </LinearLayout>

    </LinearLayout>
</ScrollView>

File : Top_animation.xml

–> Create a folder for animation –> res/New/ Android Resource directory / Resource type: anim -> ok after that create a new file in it for animation and Add the below given code to your file.

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

    <translate
        android:fromXDelta="0%"
        android:fromYDelta="-100%"
        android:duration="1000"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

File: Bottom_navigation.xml

–> Create another file for bottom animation in res/anim folder –> create a new file in it and Add the below-given code to your file.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="100%"
        android:duration="1000"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

File: themes.xml

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

    <style name="Theme.Animaton1" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <item name="android:windowContentTransitions">true</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

File: MainActivity.kt

–>Add the below-given code to your file MainActivity.kt

package com.example.animaton1

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.AnimationUtils
import android.widget.ImageView
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    private  val SPLASH_SCREEN=3000
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN

        actionBar?.hide()
        val topAnim=AnimationUtils.loadAnimation(this,R.anim.top_animation)
        val bottomAnim=AnimationUtils.loadAnimation(this,R.anim.bottom_animation)

        val image=findViewById<ImageView>(R.id.imageView)
        val logo=findViewById<TextView>(R.id.textView)
        val slogan=findViewById<TextView>(R.id.textView2)


        image.animation=topAnim
        logo.animation=bottomAnim
        slogan.animation=bottomAnim





        val handler = Handler()
        handler.postDelayed(Runnable {
            val intent=Intent(this,Login::class.java)
            startActivity(intent)
            finish()
        }, SPLASH_SCREEN.toLong())







    }
}

File: Login.kt

–>Add the below-given code to your file Login.kt

package com.example.animaton1

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class Login : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN

        actionBar?.hide()
        findViewById<Button>(R.id.SignIn).setOnClickListener {
            val intent = Intent(this, SignUp::class.java)
            startActivity(intent)
        }


        findViewById<Button>(R.id.go1).setOnClickListener {
            val intent = Intent(this, UserProfile::class.java)
            startActivity(intent)
        }


    }
}

File : SignUp.kt

–>keep it as it is

package com.example.animaton1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.Toast

class SignUp : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sign_up)
    }



}

File: userProfile.kt

–>keep it as it is

package com.example.animaton1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class UserProfile : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_user_profile)
    }
}

How to create a login screen in android studio ,How to create a login screen in android studio, How to create a login screen in android,How to create a login screen in android studio ,