Beautiful Signup screen in Android

In this article, we are going to learn how to create a beautiful Signup screen in Android. Because we know, today every app requires a signup screen and everyone wants to make an attractive and beautiful Signup screen in their apps.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above beautiful Signupscreen, so now without wasting much time let’s start.

So let’s start with this tutorial :

Beautiful Signup screen in Android

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. By default activity name is MainActivity.java.

2. Now open res => values => styles.xml file and paste the below code to change the color of the status bar.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">#3949AB</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

3. Now open MainActivity.java file and add the below line to hide the action bar in app.

package com.thecodingshef.registrationui;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();
    }
}

4. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “font” and select “font” from resource type.

5. Now download this folder and copy all drawable resources from the drawable folder and paste all in res => drawable and copy all fonts from the font folder and paste in the font res => font.

6. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>signup_btn.xml and put the below line of codes to make the background screen for signup selector.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
<solid
    android:color="#CE8DF7"
    />
    <corners
        android:topRightRadius="25dp"
        android:bottomRightRadius="25dp"
        />
</shape>

7. Now again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>cardview_back.xml and put the below line of codes to make the gradient for card view.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#C600ACC1"
        android:endColor="#C68E24AA"
        android:angle="180"
        />
    <corners
        android:topLeftRadius="25dp"
        android:bottomLeftRadius="25dp"
        />
</shape>

8. Again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>edit_box_back.xml and put the below line of codes for the shape of edit text.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#32FFFFFF"
        />
    <corners
        android:radius="5dp"
        />
</shape>

9. Again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>btn_back.xml and put the below line of codes to provide the shape to the signup button.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid
      android:color="#FFFFFF"
      />
    <corners
        android:radius="28dp"
        />
</shape>

10. Now Finally go to your activity_main.xml file to make the main user interface for signup screen and paste the below lines of codes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/back"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/logo"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="10dp"
        android:id="@+id/logo"
        app:layout_constraintLeft_toLeftOf="parent"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="220dp"
        android:text="Login"
        android:id="@+id/login"
        android:fontFamily="@font/roboto_regular"
        android:textSize="16dp"
        android:textColor="#CDFFFEFE"
        android:layout_marginLeft="10dp"
        />
    <Button
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:fontFamily="@font/roboto_regular"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="Sign up"
        android:layout_marginTop="20dp"
        android:id="@+id/signbtn"
        android:textAllCaps="false"
        android:textSize="14sp"
        android:background="@drawable/signup_btn"
        android:textColor="#C4FFFFFF"
        app:layout_constraintTop_toBottomOf="@+id/login"
        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toBottomOf="@+id/signbtn"
        android:layout_marginLeft="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_height="wrap_content">
        <androidx.cardview.widget.CardView
            android:layout_width="50dp"
            app:cardCornerRadius="25dp"
            android:elevation="10dp"
            android:layout_height="50dp"
            app:cardBackgroundColor="#E53935"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/googleplus"
                android:tint="#fff"
                android:layout_gravity="center"
                />
        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView
            android:layout_width="50dp"
            app:cardCornerRadius="25dp"
            android:layout_marginTop="20dp"
            android:elevation="10dp"
            android:layout_height="50dp"
            app:cardBackgroundColor="#1E88E5"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/facebook"
                android:tint="#fff"
                android:layout_gravity="center"
                />
        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView
            android:layout_width="50dp"
            android:layout_marginTop="20dp"
            app:cardCornerRadius="25dp"
            android:elevation="10dp"
            android:layout_height="50dp"
            app:cardBackgroundColor="#03CAE2"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/twitter"
                android:tint="#fff"
                android:layout_gravity="center"
                />
        </androidx.cardview.widget.CardView>
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/rel"
        android:layout_marginBottom="80dp"
        android:layout_height="wrap_content">
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/card"
            android:elevation="10dp"
            app:cardElevation="10dp"
            app:layout_constraintTop_toTopOf="parent"
            app:cardCornerRadius="25dp"
            android:layout_marginRight="-30dp"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginLeft="100dp"
            >
            <LinearLayout
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:id="@+id/rel1"
                android:background="@drawable/cardview_back"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Sign up"
                    android:fontFamily="@font/roboto_regular"
                    android:textColor="#E6FFFFFF"
                    android:id="@+id/text"
                    android:layout_marginTop="50dp"
                    android:layout_marginLeft="20dp"
                    android:textSize="30dp"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="User name*"
                    android:layout_marginTop="40dp"
                    android:layout_marginLeft="20dp"
                    android:textSize="14sp"
                    android:textColor="#D7FFFFFF"
                    android:fontFamily="@font/roboto_regular"
                    android:drawableRight="@drawable/username_20"
                    android:layout_marginRight="50dp"
                    android:drawableTint="#D7FFFFFF"
                    />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:cursorVisible="false"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="50dp"
                    android:textColor="#fff"
                    android:background="@drawable/edit_box_back"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Email*"
                    android:layout_marginTop="15dp"
                    android:layout_marginLeft="20dp"
                    android:textSize="14sp"
                    android:textColor="#D7FFFFFF"
                    android:fontFamily="@font/roboto_regular"
                    android:drawableRight="@drawable/email_18"
                    android:layout_marginRight="50dp"
                    android:drawableTint="#D7FFFFFF"
                    />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="50dp"
                    android:textColor="#fff"
                    android:background="@drawable/edit_box_back"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Password*"
                    android:layout_marginTop="15dp"
                    android:layout_marginLeft="20dp"
                    android:textSize="14sp"
                    android:textColor="#D7FFFFFF"
                    android:fontFamily="@font/roboto_regular"
                    android:drawableRight="@drawable/password_18"
                    android:layout_marginRight="50dp"
                    android:drawableTint="#D7FFFFFF"
                    />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="50dp"
                    android:textColor="#fff"
                    android:background="@drawable/edit_box_back"
                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Password*"
                    android:layout_marginTop="15dp"
                    android:layout_marginLeft="20dp"
                    android:textSize="14sp"
                    android:textColor="#D7FFFFFF"
                    android:fontFamily="@font/roboto_regular"
                    android:drawableRight="@drawable/password_18"
                    android:layout_marginRight="50dp"
                    android:drawableTint="#D7FFFFFF"
                    />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="50dp"
                    android:textColor="#fff"
                    android:layout_marginBottom="100dp"
                    android:background="@drawable/edit_box_back"
                    />
            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </RelativeLayout>

    <Button
        android:layout_width="200dp"
        android:text="Sign up"
        android:textSize="20sp"
        app:layout_constraintRight_toRightOf="parent"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="55dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="25dp"
        android:layout_gravity="center"
        android:fontFamily="@font/roboto_regular"
        android:layout_height="56dp"
        android:background="@drawable/btn_back"
        android:textColor="#A95E35B1"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

11. Finally, run the app and you will get the output as shown in demo image.

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Leave a Comment

Your email address will not be published. Required fields are marked *