Material Design Signup Screen in Android Studio – Part 9

by | Android Material Design Tutorials, Android UI/UX Tutorials, City Guide App, UI UX

Material Design Signup Screen in Android Studio - taimoor sikander - android app development - android for beginners

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


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


    }


}
Get Complete Code

Recommended Posts

 

 

Join Us

Videos are always a better source for in-depth knowledge so, join us at YouTube and get notified on each new upload.

Subscribe
Android Studio Complete Project Bulls rent- Splash Screen- Login Screen with validation- Signup Screen- User profile- Phone number verification OTP- Google verification

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

Coding with T.

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!