Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 09 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

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
    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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!