Hello geeks, nowadays social media android applications are in very trend so, here we are going to design Login page of Instagram in Android Studio. Using this beginners can build some awesome UI in their own applications.
What we are going to build in this article?
In this article, we will be designing a login page for Instagram. For this we will be using the logo of Instagram, EditText for the username or email of the user, Password field for the password, Button to login, and an option to sign in with Facebook. A sample image is provided below to get an idea about what we are going to build in this article.
Step by Step Implementation
Step 1: Creating a new project
- Open a new project.
- We will be working on Empty Activity with language as Java/Kotlin. Leave all other options unchanged.
- You can change the name of the project at your convenience.
- There will be two default files named activity_main.xml and MainActivity.java.
If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?
Step 2: Adding vector assets to drawable
Add the following vector assets and name them according to your choice.
Note: If you do not know how to add vector assets in android studio, then use the following article: How to Add Vector Assets in Android Studio?
Step 3: Adding a new resource file to drawable
Right click on drawable > new > Drawable Resource File > Name the file as “background_edit_text” > Ok. After following the above steps use the below code in background_edit_text.xml file:
<? xml version = "1.0" encoding = "utf-8" ?>
< shape
android:shape = "rectangle" >
< solid android:color = "#fafafa" />
< stroke android:color = "#e7e7e7"
android:width = "1dp" />
< corners android:radius = "4dp" />
</ shape >
|
Step 4: Navigate to app > res > values > strings.xml and use the below-provided code in it
< resources >
< string name = "app_name" >Instagram_login_page_UI</ string >
<!-- string for showing the text "Forgot your login details-->
< string name = "forgot" >< font color = 'c4c4c4' >Forgot your login details? </ font >< b >Get help logging in.</ b ></ string >
<!-- string to show the text " Dont have an account-->
< string name = "sign_up" >< font color = 'c4c4c4' >Dont have an account? </ font >< b >Sign up.</ b ></ string >
</ resources >
|
Step 5: Working with activity_main.xml file
Navigate to app > res > layout > activity_main.xml and use the following code in it.
<? xml version = "1.0" encoding = "utf-8" ?>
<!-- Relative layout as parent layout--> < RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
<!-- Text view to display the
text "English (India)" at
uppermost part of the page-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "English (India)"
android:textSize = "14sp"
android:textColor = "#c4c4c4"
android:layout_marginTop = "6dp"
android:layout_centerHorizontal = "true"
android:drawableRight = "@drawable/ic_baseline_keyboard_arrow_down_24" />
<!-- Linear layout to contain all the
editText, password , logo and button-->
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "vertical"
android:gravity = "center"
android:paddingStart = "28dp"
android:paddingEnd = "28dp"
android:layout_centerInParent = "true" >
<!-- Imageview displaying the logo
or name of the application-->
< ImageView
android:layout_width = "147dp"
android:layout_height = "82dp"
android:adjustViewBounds = "true"
android:src = "@drawable/logo" />
<!-- Edit text provided to user to
enter email, username or phone no.-->
< EditText
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:textSize = "14sp"
android:padding = "12dp"
android:singleLine = "true"
android:layout_marginTop = "22dp"
android:hint = "Phone number, email or username"
android:background = "@drawable/background_edit_text" />
<!-- Edit text provided to write
password (according to instagram UI)-->
< EditText
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:textSize = "14sp"
android:padding = "12dp"
android:singleLine = "true"
android:layout_marginTop = "16dp"
android:hint = "Password"
android:background = "@drawable/background_edit_text"
android:drawableRight = "@drawable/ic_baseline_remove_red_eye_24" />
<!-- material button is used to display the "Login" button to user-->
< com.google.android.material.button.MaterialButton
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Log In"
android:textAllCaps = "false"
android:textColor = "@color/white"
android:padding = "12dp"
android:layout_marginTop = "18dp"
android:backgroundTint = "#3897f0"
app:cornerRadius = "4dp" />
<!-- Text view displaying the text
"Forgot your login details?"-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "@string/forgot"
android:textSize = "12sp"
android:layout_marginTop = "8dp" />
<!-- Linear layout to display the message
OR using view so that it can be shown separately-->
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal"
android:layout_marginTop = "12sp"
android:layout_gravity = "center_vertical" >
<!-- to occupy the rectangular area in left side
so that message can be displayed in center-->
< View
android:layout_width = "0dp"
android:layout_height = "1.5dp"
android:layout_weight = "1"
android:background = "#e2e2e2" />
<!-- textview displaying the message "OR"-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "OR"
android:textSize = "14sp"
android:textStyle = "bold"
android:textColor = "#9a9a9a"
android:layout_marginStart = "8dp"
android:layout_marginEnd = "8dp" />
<!-- to occupy the rectangular area in right
side so that message can be displayed in center-->
< View
android:layout_width = "0dp"
android:layout_height = "1.5dp"
android:layout_weight = "1"
android:background = "#e2e2e2" />
</ LinearLayout >
<!-- text view to display the
message "Log in with Facebook-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginTop = "16dp"
android:gravity = "center"
android:padding = "4dp"
android:text = "Log in with Facebook"
android:textColor = "#3897f0"
android:textSize = "15sp"
android:textStyle = "bold" />
</ LinearLayout >
< View
android:layout_width = "match_parent"
android:layout_height = "1.5dp"
android:background = "#e2e2e2"
android:layout_marginBottom = "8dp" />
<!-- text view to show the message
"Dont have an account?Sign up-->
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:id = "@+id/sign_up"
android:text = "@string/sign_up"
android:textSize = "12sp"
android:textAlignment = "center"
android:layout_marginBottom = "14dp"
android:layout_alignParentBottom = "true"
android:gravity = "center_horizontal" />
</ RelativeLayout >
|
Congratulations! we have successfully created the UI of the Login page of Instagram. Now run the app and see the output of the code below. To Build and Run the App you can press shift + f10 in windows and Ctrl + R in Mac.
Output UI: