In this tutorial we will create a modern Signup screen in android studio using Material design libraries we added in login tutorial. In this tutorial we will create multiple fields in android like Material design editText, TextInputLayout, Date Picker, Radio Buttons, buttons, and Country Code Picker. To move to another screen we will use Shared Animations.

Resources + Dependencies

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!

 

How to add Material Design Dependencies in Android Studio?

We have to add dependencies in the case to run Material design in android studio! To add these dependencies Goto->app->Gradle Scripts->build.gradle(Module: app) from the left project menu and paste these dependencies inside dependencies {}.

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

 

How to use Country Code Picker In Android Studio?

To use a country code picker in the android studio we have to add a dependency! To add that dependency Goto->app->Gradle Scripts->build.gradle(Module: app) from the left project menu and paste these dependencies inside dependencies {}.

implementation 'com.hbb20:ccp:2.3.1'

Watch Youtube tutorial

 

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_signup"
tools:context=".Common.LoginSignup.SignUp">

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

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

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

<TextView
android:id="@+id/signup_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:fontFamily="@font/muli_black"
android:text="@string/create_account"
android:textAllCaps="true"
android:textColor="@color/black"
android:textSize="40sp"
android:transitionName="transition_title_text" />

<TextView
android:id="@+id/signup_slide_text"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="20dp"
android:background="@drawable/circle_black_border"
android:fontFamily="@font/ds_digital_bold"
android:gravity="center"
android:padding="10dp"
android:text="1/3"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="30sp"
android:transitionName="transition_slide_text" />

</RelativeLayout>

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

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/signup_fullname"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_full_name"
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_full_name_icon"
app:startIconTint="@color/black">

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

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

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/signup_username"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_username"
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_username_icon"
app:startIconTint="@color/black">

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

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

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/signup_email"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/enter_email"
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_email_icon"
app:startIconTint="@color/black">

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

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

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

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

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

</LinearLayout>

<Button
android:id="@+id/signup_next_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="@color/black"
android:elevation="5dp"
android:onClick="callNextSigupScreen"
android:text="@string/next_btn"
android:textColor="@color/white"
android:transitionName="transition_next_btn" />

<Button
android:id="@+id/signup_login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#00000000"
android:elevation="5dp"
android:fontFamily="@font/muli"
android:onClick="callLoginFromSignUp"
android:text="@string/login"
android:textColor="@color/black"
android:transitionName="transition_login_btn" />

</LinearLayout>

</ScrollView>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:padding="30dp"
tools:context=".Common.LoginSignup.SignUp2ndClass">

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

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

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

<TextView
android:id="@+id/signup_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/muli_black"
android:text="@string/create_account"
android:textAllCaps="true"
android:textColor="@color/black"
android:layout_centerVertical="true"
android:textSize="40sp"
android:transitionName="transition_title_text" />

<TextView
android:id="@+id/signup_slide_text"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:fontFamily="@font/ds_digital_bold"
android:text="2/3"
android:layout_alignParentRight="true"
android:textColor="@color/black"
android:textAlignment="center"
android:textSize="30sp"
android:padding="10dp"
android:layout_centerVertical="true"
android:background="@drawable/circle_black_border"
android:transitionName="transition_slide_text"
android:gravity="center" />

</RelativeLayout>

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Choose Gender"
android:textColor="@color/black"
android:textSize="18sp" />

<RadioGroup
android:id="@+id/radio_group"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:orientation="horizontal">

<RadioButton
android:id="@+id/male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male" />

<RadioButton
android:id="@+id/female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Female" />

<RadioButton
android:id="@+id/others"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Other" />
</RadioGroup>

<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:background="@color/black" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select Your Age"
android:textColor="@color/black"
android:textSize="18sp" />

<DatePicker
android:id="@+id/age_picker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:calendarViewShown="false"
android:datePickerMode="spinner"
android:spinnersShown="true" />

</LinearLayout>

<Button
android:id="@+id/signup_next_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/black"
android:elevation="5dp"
android:onClick="call3rdSigupScreen"
android:text="@string/next_btn"
android:textColor="@color/white"
android:transitionName="transition_next_btn" />

<Button
android:id="@+id/signup_login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#00000000"
android:elevation="5dp"
android:fontFamily="@font/muli"
android:text="@string/login"
android:textColor="@color/black"
android:transitionName="transition_login_btn" />

</LinearLayout>

</ScrollView>

<?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:id="@+id/signup_3rd_screen_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:padding="30dp"
android:transitionName="transition_OTP_screen"
tools:context=".Common.LoginSignup.SignUp3rdClass">

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

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

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

<TextView
android:id="@+id/signup_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:fontFamily="@font/muli_black"
android:text="@string/create_account"
android:textAllCaps="true"
android:textColor="@color/black"
android:textSize="40sp"
android:transitionName="transition_title_text" />

<TextView
android:id="@+id/signup_slide_text"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="20dp"
android:background="@drawable/circle_black_border"
android:fontFamily="@font/ds_digital_bold"
android:gravity="center"
android:padding="10dp"
android:text="3/3"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="30sp"
android:transitionName="transition_slide_text" />

</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:orientation="vertical">

<com.hbb20.CountryCodePicker
android:id="@+id/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/signup_phone_number"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/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: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>

<Button
android:id="@+id/signup_next_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/signup_phone_number"
android:layout_marginTop="20dp"
android:background="@color/black"
android:elevation="5dp"
android:onClick="callVerifyOTPScreen"
android:text="@string/next_btn"
android:textColor="@color/white"
android:transitionName="transition_next_btn" />

</RelativeLayout>

<Button
android:id="@+id/signup_login_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#00000000"
android:elevation="5dp"
android:fontFamily="@font/muli"
android:text="@string/login"
android:textColor="@color/black"
android:transitionName="transition_login_btn" />

</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 android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.taimoorsikander.cityguide.R;

public class SignUp extends AppCompatActivity {

//Variables
ImageView backBtn;
Button next, login;
TextView titleText, slideText;

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

//Hooks for animation
backBtn = findViewById(R.id.signup_back_button);
next = findViewById(R.id.signup_next_button);
login = findViewById(R.id.signup_login_button);
titleText = findViewById(R.id.signup_title_text);
slideText = findViewById(R.id.signup_slide_text);

}

public void callNextSigupScreen(View view) {

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

//Add Shared Animation
Pair[] pairs = new Pair[5];
pairs[0] = new Pair<View, String>(backBtn, "transition_back_arrow_btn");
pairs[1] = new Pair<View, String>(next, "transition_next_btn");
pairs[2] = new Pair<View, String>(login, "transition_login_btn");
pairs[3] = new Pair<View, String>(titleText, "transition_title_text");
pairs[4] = new Pair<View, String>(slideText, "transition_slide_text");
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(SignUp.this, pairs);
startActivity(intent, options.toBundle());
} else {
startActivity(intent);
}

}

public void callLoginFromSignUp(View view) {
startActivity(new Intent(getApplicationContext(), Login.class));
finish();
}

}

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 android.widget.Button;
import android.widget.DatePicker;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.taimoorsikander.cityguide.R;

public class SignUp2ndClass extends AppCompatActivity {

//Variables
ImageView backBtn;
Button next, login;
TextView titleText, slideText;
RadioGroup radioGroup;
RadioButton selectedGender;
DatePicker datePicker;

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

//Hooks
backBtn = findViewById(R.id.signup_back_button);
next = findViewById(R.id.signup_next_button);
login = findViewById(R.id.signup_login_button);
titleText = findViewById(R.id.signup_title_text);
slideText = findViewById(R.id.signup_slide_text);
radioGroup = findViewById(R.id.radio_group);
datePicker = findViewById(R.id.age_picker);

}

public void call3rdSigupScreen(View view) {

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

//Add Transition and call next activity
Pair[] pairs = new Pair[5];
pairs[0] = new Pair<View, String>(backBtn, "transition_back_arrow_btn");
pairs[1] = new Pair<View, String>(next, "transition_next_btn");
pairs[2] = new Pair<View, String>(login, "transition_login_btn");
pairs[3] = new Pair<View, String>(titleText, "transition_title_text");
pairs[4] = new Pair<View, String>(slideText, "transition_slide_text");

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

}

}