Material Design Login Screen in Android – City Guide Part 8

by | Jun 24, 2020 | Android, Android Material Design Tutorials, Android UI/UX Tutorials, City Guide App, UI UX | 0 comments

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);
}

}

}

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