In today’s tutorial, we are going to create a Login Design in Android Studio – City 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);
}}
}
