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