How to Create Instagram Login UI using Android Studio?
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:
Step 4: Navigate to app > res > values > strings.xml and use the below-provided code in it
Step 5: Working with activity_main.xml file
Navigate to app > res > layout > activity_main.xml and use the following code in it.
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.