Material Design Login Screen tutorial using Shared Animations – Design in 2020

by | Jan 11, 2020 | Android, Android Material Design Tutorials, Android UI/UX Tutorials, Bull's Rent, Layouts in Android Studio, UI UX | 0 comments

This is the second article of our android studio tutorial about traveling android application. In this article we are going to create a Login Screen android example using material components and use shared animation between login screen and splash screen in android studio. Also you can see our YouTube video. So To follow the tutorial and also get the code strait into your inbox. Subscribe to my mailing list and get the codes and latest news about android.

Creative Login Screen Android in Android Studio?

Login Screen is a security check, that identify and authenticate credentials to give access to an application.

Everyone wants to design their application that attract user. Android studio gives a lots of components to design a screen. But to make your screen more attractive, material components are used. In this article you will learn How to make a Login Screen using material components. To get detail knowledge of material component you can simply Click Here.

Before Starting to make Login Screen you can create a Splash Screen. Splash Screen is first screen that comes before login. You can see it in the GIF image on the top. To make Splash Screen check this article.

Ok so let’s get started

Material Design Login Screen Android Tutorial

Button’s OnClick

To call OR use the button’s onClick function we have to simply follow this approach instead of calling the setOnClickListner.

We will first create a function in Java outside onCreate method and it should be public, and contain View Parameter as mentioned below.

public void registerUser(View view) {}

Now to call that function we have to mention it behind the button’s onClick XML code so, compiler will know that when user presses the button which method to be executed. So, we will add the code written below behind the button’s XML


android:onClick="registerUser"

<Button
    android:id="@+id/reg_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000"
    android:onClick="registerUser"
    android:text="GO"
    android:textColor="#fff"
    android:transitionName="button_tran" />

Steps to create a material design Login Screen

To create a login screen android tutorial in android studio using material components we have to follow these steps:

  • Make a new project in android studio (if you are new and don’t see our splash screen article)
  • Change the style of an app to NoActionBar to remove action bar.
  • Remove the top status bar of screen.
  • Add dependency to gradle file
  • Design the .xml file for login screen.
  • At last write code in java class.
  • Write code in java class.

Step #1: Create a new Android Studio Project:

If you are new to the tutorial then you have to create a new android studio project. Don’t know how to create? Click on the link to know how to create an android studio project?

How to create a new project in android studio

Step #2: Add Dependency/Libraries in Android Studio:

To add a dependency first of all open a build.gradle file. There are two build.gradle files. First is of project level which has a name with build.gradle(project:project name) and the second one is build.gradle(Module: app). You have to open build.gradle(Module: app) as seen in the image. If you know the dependency of material components then you can copy and paste it.

Note: Use Dependency 1.1.0 + Change Theme as defined.

implementation 'com.google.android.material:material:1.1.0'
parent="Theme.MaterialComponents.Light.NoActionBar.Bridge"

If you don’t know the library or dependency to add in the application then there is a second step. Go to build tab on the top, click on the edit libraries and dependencies then click on plus + button and search-related dependency. After adding the dependency, Sync your project with Gradle.

How to get image for all screen sizes in android studio.

To get multiple screen resolution of an image for all screen sizes click on this link. Different devices have different Screen Resolution and different screen sizes. When we add an image of one screen size it will not be as responsive as we want so just see the video in the link.

Step #3: Design Login’s xml File:

First of all make an empty activity named as Login. To design Login Screen as shown in youtube video or gif image, just simply copy and paste this code into your .xml file in res => layout => activity_login.xml. As mentioned above, we are using meterial components. So instead of using simple textview , you have to use this code.

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

    <?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"
        tools:context=".Login"
        android:orientation="vertical"
        android:background="#fff"
        android:padding="20dp">
      
        <ImageView
            android:id="@+id/logo_image"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:transitionName="logo_image"
            android:src="@drawable/bulls_rent_logo_transparent"/>
        <TextView
            android:id="@+id/logo_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello there, Welcome Back"
            android:textSize="40sp"
            android:transitionName="logo_text"
            android:fontFamily="@font/bungee"
            android:textColor="#000"/>
        <TextView
            android:id="@+id/slogan_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sign In to continue"
            android:textSize="18sp"/>

        <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:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/username"
                android:hint="Username"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

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

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

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

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

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="GO"
                android:background="#000"
                android:textColor="#fff"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_margin="5dp"
                android:background="#00000000"
                android:elevation="0dp"
                android:text="New User? SIGN UP"
                android:textColor="#000"/>

        </LinearLayout>
</LinearLayout>

Step #4: How to hide Status Bar in android studio screen?

Sometime we don’t want status bar to be shown in the activity. So to hide that ststus bar simply write the code inside onCreate() method and above the line that calls our .xml layout (setContentView(R.layout.activity_login))

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

Step #5: How to Enable Shared Animation?

Open styles file in res=>values=>styles and write this single line as an item between <style> tags

<item name="android:windowContentTransitions">true</item>

Step #6: Code for animation in Splash Screen MainActivity.java

Add this code inside the method which is calling the 2nd activity (Login activity) from the first screen from where you want to start animation(Splash to Login in this example)

new Handler().postDelayed(new Runnable(){
@Override
public void run(){
    //Call next screen 
    Intent intent=new Intent(MainActivity.this,Login.class);
    // Attach all the elements those you want to animate in design 
    Pair[]pairs=new Pair[2];pairs[0]=new Pair<View, String>(image,"logo_image");pairs[1]=new Pair<View, String>(logo,"logo_text");
    //wrap the call in API level 21 or higher 
    if(android.os.Build.VERSION.SDK_INT>=android.os.Build.VERSION_CODES.LOLLIPOP)
    {
        ActivityOptions options=ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,pairs);
        startActivity(intent,options.toBundle());
    }
}
},SPLASH_SCREEN);

Step #7: Complete Login.java Code

package com.taimoorsikander.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.util.Pair;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.google.android.material.textfield.TextInputLayout;

public class Login extends AppCompatActivity {
    Button callSignUp, login_btn;
    ImageView image;
    TextView logoText, sloganText;
    TextInputLayout username, password;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); //This Line will hide the status bar from the screen
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_login);
        //Hooks 
	 callSignUp = findViewById(R.id.signup_screen);
        image = findViewById(R.id.logo_image);
        logoText = findViewById(R.id.logo_name);
        sloganText = findViewById(R.id.slogan_name);
        username = findViewById(R.id.username);
        password = findViewById(R.id.password);
        login_btn = findViewById(R.id.login_btn);
        callSignUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(Login.this, SignUp.class);
                Pair[] pairs = new Pair[7];
                pairs[0] = new Pair<View, String>(image, "logo_image");
                pairs[1] = new Pair<View, String>(logoText, "logo_text");
                pairs[2] = new Pair<View, String>(sloganText, "logo_desc");
                pairs[3] = new Pair<View, String>(username, "username_tran");
                pairs[4] = new Pair<View, String>(password, "password_tran");
                pairs[5] = new Pair<View, String>(login_btn, "button_tran");
                pairs[6] = new Pair<View, String>(callSignUp, "login_signup_tran");
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(Login.this, pairs);
                    startActivity(intent, options.toBundle());
                }
            }
        });
    }
}

Get Complete Source code for Bull’s Rent App

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design