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.
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?
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
To learn in detail just follow our Youtube tutorial..
Android Related Videos
- Design a Modern Dashboard
- Material Design Login Screen with Shared Animations
- Create a Navigation Drawer Material Design in 2020
- Design Responsive Android App to fit all screen sizes
Related Articles that you might want to check out.
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig ob Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
- Building and Construction Company
- Chakwal.CO | Group Of Companies
- Online Buying and Selling Of Properties
My Latest Work
