Material Design Signup Screen in Android Studio – Part 9

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

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

}

}

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