How to Create Google Sign In UI using Android Studio? - GeeksforGeeks

10 Mar, 2021
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 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:
RelativeLayout
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. 
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffff">      <!--Imageview for Google logo image-->    <ImageView        android:id="@+id/imgGLogo"        android:layout_width="160dp"        android:layout_height="40dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="30dp"        android:padding="4dp"        android:src="@drawable/google_logo" />      <!--Textview to display a message "Sign In"-->    <TextView        android:id="@+id/txtSignIn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/imgGLogo"        android:layout_centerHorizontal="true"        android:padding="6dp"        android:text="Sign In"        android:textColor="#000000"        android:textSize="24sp"        android:textStyle="bold" />      <TextView        android:id="@+id/txtUseAccount"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/txtSignIn"        android:layout_centerHorizontal="true"        android:padding="4dp"        android:text="with your Google account"        android:textColor="#000000" />      <!--EditText for user name or email address-->    <EditText        android:id="@+id/etEmail"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/txtUseAccount"        android:layout_marginLeft="10dp"        android:layout_marginTop="30dp"        android:layout_marginRight="10dp"        android:hint="Username or Email"        android:inputType="textEmailAddress"        android:maxLines="1"        android:padding="10dp"        android:textColor="#000000" />      <TextView        android:id="@+id/txtForgotEmail"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/etEmail"        android:layout_marginLeft="10dp"        android:layout_marginRight="10dp"        android:padding="10dp"        android:text="Forgot Email?"        android:textColor="#2196f3"        android:textStyle="bold" />      <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentLeft="true"        android:layout_alignParentBottom="true"        android:layout_marginLeft="10dp"        android:layout_marginBottom="15dp"        android:padding="10dp"        android:text="Create Account"        android:textColor="#2196f3"        android:textStyle="bold" />      <!-- Login Button for Google Sign In-->    <Button        android:id="@+id/btnNext"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentBottom="true"        android:layout_marginRight="20dp"        android:layout_marginBottom="15dp"        android:backgroundTint="#2196f3"        android:elevation="6dp"        android:padding="10dp"        android:text="Next"        android:textColor="@android:color/white"        android:textSize="14sp"        android:textStyle="bold" />  </RelativeLayout>
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:
colorPrimary
colorPrimaryDark
colorAccent
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.
XML
<?xml version="1.0" encoding="utf-8"?><resources>    <color name="purple_200">#ffffff</color>    <color name="purple_500">#2196f3</color>    <color name="purple_700">#2196f3</color>    <color name="teal_200">#2196f3</color>    <color name="teal_700">#2196f3</color>    <color name="black">#FF000000</color>    <color name="white">#FFFFFFFF</color></resources>
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.
Kotlin
import androidx.appcompat.app.AppCompatActivityimport android.os.Bundle  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)    }}
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?
Output UI:
GitHub link: https://github.com/bhartik021/GoogleSignInUI
Android-Studio
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Android Listview in Java with Example
Fragment Lifecycle in Android
Flutter - BoxShadow Widget
How to Change the Background Color After Clicking the Button in Android?