How to Create Google Sign In UI using Android Studio?
Nowadays, android apps are very popular. This UI has generally seen in the “Google Sign In” App. In this article, we will create a Google Sign UI in Android. 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 “Google Sign UI”. Then select Kotlin/Java as the programming language. Then select minimum SDK for example in this we are using “API16: Android 4.1(Jelly Bean)”. then click on the finish button.
Step 2: Working with the activity_main.xml file
To create Google Sign In UI we used the following UI component in our XML file:
- One ImageView
- Four TextView
- One EditText
- One Button
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 3: 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:
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.
Reference Article: res/values folder in Android Studio
Add this code in app > res > values > colors.xml file.
Step 4: Working with the MainActivity.kt file
Since we are not working with MainActivity.kt file so we don’t need to write any code inside the MainActivity.kt file. Keep the MainActivity.kt file as it is.
Step 5: The image used in this project is added to the drawable folder. For navigating the image, Navigate to the app > res > drawable and you will find the image in that folder. 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.
Reference Article: How to Add Image to Drawable Folder in Android Studio?
GitHub link: https://github.com/bhartik021/GoogleSignInUI
Please Login to comment...