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:

• 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.AppCompatActivity
import 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