Make a Cool Signup Activity in Android Studio

in this tutorial, I will show you how to design a simple signup UI using Android Studio and XML, at the end of this tutorial you will be able to learn how to create your custom Shapes, gradient background and design a beautiful UI for your app, so let's start it

first, we need to create a new project on Android Studio

choose Empty Activity

and name your project

after your project was open, Right Click on your Drawabale folder  inside res folder and choose new and choose Drawable Ressource file

create a file called background and add the following source code

code: background.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="@color/colorPrimary"
                android:endColor="@color/colorPrimaryDark"
                android:angle="90"
                />
        </shape>
    </item>
</selector>

now let's make the button background, repeat the same steps and create a new file for the button background and copy the following code

code: btn_bg.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="@color/colorPrimaryDark"
                android:endColor="@color/colorPrimary"
                />
            <corners
                android:radius="100dp"
                />
        </shape>
    </item>
</selector>

and now let's create the signup background and then I will show you the main activity

code: code_bg.xml

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

now copy the main activity code and you will get the beautiful result

code: activity_main.xml

 <?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:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/sign"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <LinearLayout
        android:id="@+id/sign"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/login_bg"
        android:padding="15dp"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SIGN UP"
            android:textAlignment="center"
            android:textColor="#000"
            android:textSize="28sp"
            android:layout_marginBottom="15dp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name"
            android:layout_marginBottom="15dp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="E-mail"
            android:inputType="textEmailAddress"
            android:layout_marginBottom="15dp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"
            android:layout_marginBottom="15dp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Confirm your password"
            android:inputType="textPassword"
            android:layout_marginBottom="15dp"
            />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SIGN UP"
            android:background="@drawable/btn_bg"
            android:textColor="#fff"
            android:textSize="22sp"
            android:layout_marginBottom="15dp"
            />

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

and that's it, you have that beautiful UI of your sign up form