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
