Material Design Login Screen in Android – City Guide Part 8

by | Android, Android Material Design Tutorials, Android UI/UX Tutorials, City Guide App, UI UX

In today’s tutorial, we are going to create a Login Design in Android StudioCity Guide app. We will also learn how to add shared animations in android and how to use Material library 1.1.0 to design fields.

Before Getting Started

So, before going to start coding, we should have to understand the flow and basics we need to get started with today’s android tutorial!

 

Setup Material Dependency

So the first thing is that we need to add material design dependency in Android Studio at left menu Goto -> Gradle Scripts -> Build.gradle (Module: app) and add the dependency below inside dependency tags.

 

implementation 'com.google.android.material:material:1.1.0'

Change Theme to MaterialComponents

As we have added the material dependency in our project and we want to design our screens using it. Then we have to change the theme as well for our project to make sure that it does not crash.

So to change the theme you have to Goto->app->res->values->styles.xml In that just change the parent values with below in double qoutes ” “

 

parent="Theme.MaterialComponents.Light.NoActionBar.Bridge"

Create new activity

As we have not created Login activity yet so, first we have to create that activity in folder structure we created! Watch how?

To create a new activity Goto->App->Java->Project Folder and create a new activity here! If you are following our folder structure then inside Goto->Common->LoginSignup->Create

 

Watch Youtube tutorial

 

Add Shared Animation

To add a shared animation we have to assign same TransistionName to the elements want to animate using shared animation on both activities(Calling and Called).

Suppose we want to add animation to an Image, then we will add TransitionName to it which is “AnimateImage” then we have to use same name at called activity to complete the animation with same TransitionName “AnimateImage”.

As we know that the previous activity which is calling the login activity is Welcome Screen so we have to add the animation which on it’s onClick method when user click on the Login Button then we will add this code…

 

public void callLoginScreen(View view) {

    Intent intent = new Intent(getApplicationContext(), Login.class);
        
    Pair[] pairs = new Pair[1];
    pairs[0] = new Pair<View, String>(findViewById(R.id.login_btn), "transition_login");

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
        ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(RetailerStartUpScreen.this, pairs);
        startActivity(intent, options.toBundle());
    } else {
            startActivity(intent);
    }
}

NOTE: I have changed the username field with phone number and country code picker!

Complete Code

 

<?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:background="@color/colorPrimary"
android:padding="30dp"
android:transitionName="transition_login"
tools:context=".Common.LoginSignup.Login">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ImageView
android:id="@+id/login_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/general_back_icon" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:fontFamily="@font/muli_black"
android:text="@string/login"
android:textAllCaps="true"
android:textColor="@color/black"
android:textSize="40sp" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp">

<com.hbb20.CountryCodePicker
android:id="@+id/login_country_code_picker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/black_border"
android:padding="7dp"
app:ccp_autoDetectCountry="true"
app:ccp_showFlag="true"
app:ccp_showFullName="true"
app:ccp_showNameCode="true" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/login_phone_number"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_country_code_picker"
android:hint="@string/enter_phone_number"
android:textColorHint="@color/black"
app:boxStrokeColor="@color/black"
app:boxStrokeWidthFocused="2dp"
app:endIconMode="clear_text"
app:endIconTint="@color/black"
app:hintTextColor="@color/black"
app:startIconDrawable="@drawable/field_phone_number_icon"
app:startIconTint="@color/black">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/login_phone_number_editText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="@font/muli_semibold"
android:inputType="phone"
android:textColor="@color/black"
android:textCursorDrawable="@null" />

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

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/login_password"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_phone_number"
android:hint="@string/enter_password"
android:textColorHint="@color/black"
app:boxStrokeColor="@color/black"
app:boxStrokeWidthFocused="2dp"
app:endIconMode="password_toggle"
app:endIconTint="@color/black"
app:hintTextColor="@color/black"
app:startIconDrawable="@drawable/field_password_icon"
app:startIconTint="@color/black">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/login_password_editText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="@font/muli"
android:inputType="textPassword"
android:textColor="@color/black" />

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

<RelativeLayout
android:id="@+id/forget_password_block"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/login_password"
android:layout_marginTop="10dp">

<CheckBox
android:id="@+id/remember_me"
style="@style/Widget.AppCompat.CompoundButton.CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="@color/black"
android:text="@string/remember_me"
android:textColor="@color/black" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="#00000000"
android:onClick="callForgetPassword"
android:text="@string/forget_password" />

</RelativeLayout>

<Button
android:id="@+id/letTheUserLogIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/forget_password_block"
android:layout_marginTop="20dp"
android:background="@color/black"
android:onClick="letTheUserLoggedIn"
android:text="@string/login"
android:textColor="@color/white" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/letTheUserLogIn"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="#00000000"
android:onClick="callSignUpFromLogin"
android:text="Create Account" />

<RelativeLayout
android:id="@+id/login_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/white_circle"
android:elevation="8dp"
android:padding="20dp"
android:visibility="gone">

<ProgressBar
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerInParent="true" />

</RelativeLayout>

</RelativeLayout>

</LinearLayout>

</ScrollView>

package com.taimoorsikander.cityguide.Common.LoginSignup;

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 androidx.appcompat.app.AppCompatActivity;

import com.taimoorsikander.cityguide.R;

public class RetailerStartUpScreen extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_retailer_start_up_screen);
}

public void callLoginScreen(View view) {

Intent intent = new Intent(getApplicationContext(), Login.class);

Pair[] pairs = new Pair[1];
pairs[0] = new Pair<View, String>(findViewById(R.id.login_btn), "transition_login");

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(RetailerStartUpScreen.this, pairs);
startActivity(intent, options.toBundle());
} else {
startActivity(intent);
}

}

public void callSignUpScreen(View view) {

Intent intent = new Intent(getApplicationContext(), SignUp.class);

Pair[] pairs = new Pair[1];
pairs[0] = new Pair<View, String>(findViewById(R.id.signup_btn), "transition_signup");

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(RetailerStartUpScreen.this, pairs);
startActivity(intent, options.toBundle());
} else {
startActivity(intent);
}

}

}

Join Us

Videos are always a better source for in-depth knowledge so, join us at YouTube and get notified on each new upload.

Android Studio Complete Project Bulls rent- Splash Screen- Login Screen with validation- Signup Screen- User profile- Phone number verification OTP- Google verification

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!