How to Create Twitter Login UI using Android Studio?
Nowadays, android apps are very popular especially social media apps. This Login UI has generally seen in the “Twitter” App. In this article, we will create a Twitter Login UI in Android Studio. Below are the various steps on how to do it. This will help the beginner to build some awesome UI in android by referring to 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. Firstly select empty activity then click the next button. Give the name of your app like “Twitter Login UI”. Then select Kotlin/Java as the programming language. In this project, we are using java as the programming language. Then select minimum SDK for example in this project we are using “API16: Android 4.1(Jelly Bean)”. then click on the finish button.
Step 2: Working with the colors.xml file
The colors.xml is an XML file that is used to store the colors for the resources. An Android project contains 3 essential colors namely:
Add this code in app > res > values > colors.xml file.
If you are not getting colorPrimary, colorPrimaryDark, and colorAccent in the colors.xml file. then you can go to the themes.xml file and you can find these colors name in the themes.xml file. These colors are used in some predefined resources of the android studio as well. These colors needed to be set opaque otherwise it could result in some exceptions arising.
Step 3: Working with the themes.xml file
In this file change DarkActionBar to NoActionBar. NoActionBar will remove TittleBar from your app. and if you don’t want to remove TittleBar from your app then leave this as it is. Navigate to app > res > values > themes.xml file.
Step 4: Working with the drawable file
All the images we add in the drawable file. so, add the Twitter logo in the drawable file. The image used in this project is added to the drawable folder. For navigating the image, Navigate to app > res > drawable. and you will find the image in that folder.
Step 5: Working with the activity_main.xml file
To create Twitter Login UI we used the following UI component in our 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.
Step 6: Working with roundtext.xml file
Go to the app > res > drawable > Right-Click > New > Drawable Resource File and name the file as roundtext. Below is the code for the roundtext.xml file.
Step 7: Working with the MainActivity.java file
Since we are not working with the MainActivity.java file so we don’t need to write any code inside the MainActivity.java file. Keep the MainActivity.java file as it is.
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.