How to Design Transparent Login Form in Android Studio Using Java?

We will be designing a simple application in which we make a transparent login screen in our MainActivity that takes the Username and Password from the user. A sample image is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Step 2: Download any background image that you want to use in your application and add it to the drawable section which is a subpart of the resource folder.

fig = image file in drawable 

Step 3: Make custom buttons that you need in the application by following steps. Right-click on project name file(transparent login form in this case) -> New -> Android Resource File.

circle.xml file: 

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <corners android:radius="100dp" />
    <stroke
        android:width="2dp"
        android:color="#ffffff" />
    <size
        android:width="80dp"
        android:height="80dp" />

</shape>

custombutton.xml file:

XML

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

custombutton2.xml file: 

XML

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

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="@drawable/wallpaper"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#3fff"
        android:gravity="center"
        android:padding="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Moon light"
            android:background="@drawable/circle"
            android:gravity="center"
            android:textColor="#ffffff"/>
        <EditText
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:hint="Username"
            android:textColorHint="#FFFBF6"
            android:background="@drawable/custombutton"
            />
        <EditText
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:hint="Password"
            android:textColorHint="#FFFBF6"
            android:background="@drawable/custombutton"/>
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Keep me Signed in "
                android:textColor="#FFFBF6"
                android:hint="#FFFBF6"
                android:layout_marginTop="15dp"
                android:buttonTint="#FFFBF6"
            />
        <Button
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:text="Signin"
            android:textAllCaps="false"
            android:layout_marginTop="10dp"
            android:background="@drawable/custombutton2"
            android:textColor="#FFFBF6"/>
        <View
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:background="#3fff"
            android:layout_marginTop="15dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Forget Password"
            android:textSize="18dp"
            android:layout_marginTop="15dp"
            android:textColor="#FFFBF6"
            />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

FIG = Transparent login page 

Project Link: Click Here