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"?>Â Â Â Â 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"?>Â Â Â Â <solid android:color="#3fff" />Â Â Â Â <corners android:radius="50dp" /></shape> |
Â
Â
custombutton2.xml file:Â
Â
XML
<?xml version="1.0" encoding="utf-8"?>Â Â Â Â <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    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
Â
