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.
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?
https://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
<item name=”android:windowContentTransitions”>true</item>
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
To learn in detail just follow our Youtube tutorial..
Android Related Videos
- Design a Modern Dashboard
- Material Design Login Screen with Shared Animations
- Create a Navigation Drawer Material Design in 2020
- Design Responsive Android App to fit all screen sizes
Related Articles that you might want to check out.
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig ob Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
- Building and Construction Company
- Chakwal.CO | Group Of Companies
- Online Buying and Selling Of Properties
My Latest Work