Material Design Signup Screen tutorial using Shared Animations – Design in 2020

by taimoor | Jan 24, 2020 | Android, Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, Bull's Rent, UI UX | 0 comments

Signup form in android is a screen that everyone wants to make in their android studio application. Design the screen in android studio is not much difficult but to make it more creative and responsive, you will need a lot more experience. But we will help you to make your screen more responsive and more creative. So follow our tutorial to learn how to make responsive designs using material components

Get the complete Bull’s Rent project.

Get Complete Code

Creative Signup Screen Android in Android Studio?

This is the third article of our android studio tutorial about traveling android application. In this article we are going to create a Signup Screen android example using material components and use shared animation between signup screen and login screen in android studio. So To follow the tutorial and also get the code strait into your inbox. Subscribe to my mailing list and get the codes and latest news about android. For detail explanation you can see our YouTube video.

In this article you will learn How to make a Signup Screen using material components. To get more knowledge about material component you can simply Click Here.

Before Starting to make Signup Screen you can create a Login Screen and Splash screen. So to get Splash Screen code check this article. And to make a login screen Click Here.

OK So let’s get started with signup screen.

Signup Screen Android tutorial

Steps to create a Signup Screen in Android Studio

To create a Signup screen android tutorial in android studio using material components we have to follow these steps:

Make a new project in android studio (if you are new and don’t see our splash screen article)
Change the style of an app to NoActionBar to remove action bar.
Remove the top status bar of screen.
Add dependency to gradle file
Design the .xml file for signup screen.
At last write code in java class.
Write code in java class.

1. Create a new Android Studio Project:

If you are new to tutorial then you have to create a new android studio project. Don’t know how to create? Click on the link to know How to create android studio project?

http://codingwitht.com/create-your-first-android-app-in-android-studio/

2. Add Dependency/Libraries in Android Studio:

To add a dependency first of all open a build.gradle file. There are two build.gradle files. First is of project level which has a name with build.gradle(project:project name) and the second one is build.gradle(Module: app). You have to open build.gradle(Module: app) as seen in the image. If you know the dependency of material components then you can copy and paste it. i-e

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

If you don’t know the library or dependency to add in the application then there is a second step. Go to build tab on the top, click on the edit libraries and dependencies then click on plus + button and search-related dependency.

3. Design Signup’s XML File:

First of all, make an empty activity named as Signup. To design Signup Screen as shown in a youtube video or gif image, just simply copy and paste this code into your .xml file in res => layout => activity_signup.xml. As mentioned above, we are using material components. So instead of using a simple text view, you have to use this code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".SignUp"
    android:orientation="vertical"
    android:background="#fff"
    android:padding="20dp">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/bulls_rent_logo_transparent"
        android:transitionName="logo_image"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome,"
        android:textSize="40sp"
        android:transitionName="logo_text"
        android:fontFamily="@font/bungee"
        android:layout_marginTop="-20dp"
        android:textColor="#000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SignUp to start your new Journey"
        android:textSize="18sp"
        android:transitionName="logo_desc"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/reg_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Full Name"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"/>
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/reg_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username"
            app:counterMaxLength="15"
            android:transitionName="username_tran"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="text"/>
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/reg_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"/>
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/reg_phoneNo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Phone No"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="number"/>
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/reg_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            app:passwordToggleEnabled="true"
            android:transitionName="password_tran"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword">
            </com.google.android.material.textfield.TextInputEditText>
        </com.google.android.material.textfield.TextInputLayout>

    </LinearLayout>

    <Button
        android:id="@+id/reg_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GO"
        android:background="#000"
        android:textColor="#fff"
        android:transitionName="button_tran"/>
    <Button
        android:id="@+id/reg_login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Already have an account? LogIn"
        android:background="#00000000"
    />

</LinearLayout>

How to hide Status Bar in android studio screen?

Sometime we don’t want status bar to be shown in the activity. So to hide that status bar simply write the code inside onCreate() method and above the line that calls our .xml layout

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //This Line will hide the status bar from the screen
    getWindow().setFlags(
        WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN
    );
    setContentView(R.layout.activity_sign_up);
}

How to Enable Shared Animation?

Open styles file in res=>values=>styles and write this single line as an item between <style> tags

Code for animation in Splash Screen MainActivity.java

Add this code inside the method which is calling the 2nd activity (SignUp activity) from the first screen from where you want to start animation(Login to SignUp in this example)

new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        //Call next screen
        Intent intent = new Intent(Login.this, SignUp.class);

        //Attach all the elements those you want to animate in design
        Pair[]  pairs = new Pair[2];
        pairs[0] = new Pair<View,String>(image, "logo_image");
        pairs[1] = new Pair<View,String>(logo, "logo_text");
        //wrap the call in API level 21 or higher
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
            ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(Login.this,pairs);
            startActivity(intent,options.toBundle());
        }
    }
}, SPLASH_SCREEN);

4. Complete SignUp.java Code which is Signup Screen in this example

package com.taimoorsikander.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.textfield.TextInputLayout;

public class SignUp extends AppCompatActivity {
    //Variables
    TextInputLayout regName, regUsername, regEmail, regPhoneNo, regPassword;
    Button regBtn, regToLoginBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_up);

        //Hooks to all xml elements in activity_sign_up.xml
        regName = findViewById(R.id.reg_name);
        regUsername = findViewById(R.id.reg_username);
        regEmail = findViewById(R.id.reg_email);
        regPhoneNo = findViewById(R.id.reg_phoneNo);
        regPassword = findViewById(R.id.reg_password);
        regBtn = findViewById(R.id.reg_btn);
        regToLoginBtn = findViewById(R.id.reg_login_btn);
    }//onCreate Method End
}

Get Complete Source code for Bull’s Rent App

Get Complete Code

To learn in detail just follow our Youtube tutorial..

Android Related Videos

Related Articles that you might want to check out.

Our Projects Make Us Proud

My Latest Work

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!

Download City Guide

Download Bulls Rent