Material Design Signup Screen in Android Studio – Part 9

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.

Get Complete Code

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

Subscribe

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">

</RelativeLayout>

<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>

</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">

</RelativeLayout>

<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>

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