loading...

How to change the text and theme of Google's Sign-In button on Android?

shobhit profile image Shobhit Puri Updated on ・4 min read

Quick Summary

In this post, I will show you how to change the text on Google's Sign-In button using standard android:text attribute, which is missing from the Google's SignInButton. I'll also show you, how you can switch between dark and light button themes. At the end of the post, a ready to use small Android library is included along with a sample application to try the same.

Requirements

  • Android Studio.
  • compileSdkVersion 25 and buildToolsVersion "25.0.3". This is what the sample app is using. You can change the values in the build.gradle, to use the SDK version you have installed.
  • minSdkVersion supported is 16.

Introduction

Do you want to provide localization for the Google Sign-In button? Maybe you want to change the default "Sign In" text to "Sign in with Google". Or you want switch between "Sign in with Google" and "Sign up with Google" text based on whether it is a sign-in or sign-up flow. As you might already know, to set the text on an Android Button, you can use android:text="{string}" attribute in your layout XML. If you want to do the same for Google Sign-In, this attribute is not available. On Stackoverflow, there are obviously many questions like Can I edit the text of sign in button on Google?, which have been asked for this problem. Most of the existing answers were hacks at the time of writing.

Follow along as I show you how you can use a very small library, created using Google's recommended way to customize the SignInButton, that will enable you to use android:text attribute to set any text on the button. The library also enables you to change the theme of the button to light or dark easily.

Usage

  1. Add the following to your app module level build.gradle file:

    dependencies {
        // To include this library.
        // For Android Studio 3.0 or above, use implementation keyword instead
        compile 'com.shobhitpuri.custombuttons:google-signin:1.0.0'
    }
    
  2. In your XML Layout, have the following:

    <RelativeLayout
        ...
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <com.shobhitpuri.custombuttons.GoogleSignInButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/google_sign_up"
            app:isDarkTheme="true" />
    </RelativeLayout>
    

Library Options

If you notice the XML, there are two attributes:

  • app:isDarkTheme="{Boolean}" : This is to enable you to switch between the light (gray-white) theme and the dark (blue) theme for the button. The library handles changing the text color, background color and color change on button press based on Google's recommended guidelines.

  • android:text="{string}": This sets the text on the custom button.

Light Theme Dark Theme
Google Sign-In Light Google Sign-In Dark

Why a library?

"Why create a library for this? Aren't there already tons of libraries already?", you would say. This library was result of the issues I faced when trying to set text on the SignInButton. I don't like using hacks and since you are here, this far in the article, I would assume you don't either. If the underlying implementation of Google's SignInButton changes, the hack would break. The ideal Google recommended solution from the documentation is to create a custom button as mentioned on Customizing the Sign-In Button. It specifies the branding guidelines which includes using custom icons and images for the button, setting specific text size, paddings and other do's and don'ts for the logo.

As you can see the ideal solution involves some extra work. Instead of creating a custom button just for my usage, I wanted to write some re-usable code, which I can drag and drop in any of my projects and it would work out of the box. That's why I decided to create a small 3.93 KB library, so that anyone facing this issue need not spend time implementing a custom solution and can get the custom Google Sign-In button working in no time.

Source Code and Sample Android Application

You can find the implementation of the library and a sample Android application that is using the library here: https://github.com/shobhitpuri/custom-google-signin-button. Feel free to give any feedback on the article or library. If you come across any issues, you are more than welcome to create an issue or open a pull request.

Note: The images used in this article are trademark of Google. They have been just used for instructional purposes.

Posted on by:

shobhit profile

Shobhit Puri

@shobhit

Android enthusiast; Software Developer; Badminton enthusiast; Nature Lover; Social welfare; Spiritual

Discussion

markdown guide
 

Hi Shobhit!

Can I use a custom color instead blue in dark theme case?

I read in Google Sign-In Branding Guidelines that "You can change the color of the button if you need to match a specific style of your app, but the button must always include the standard color Google "G" on a white tile."

But I can't find a way to do this.

Thanks,
Alex

 

Can you please quote the source Alex?

 

Thanks for the comment Alex. The assets in the library right now only support the 2 themes or dark (blue) and light. Feel free to either create a PR with a fix or open a new feature request.

 

Thanks Shobhit!

but how to make Text aligment center? can you help me..

 

Hi Shobhit. Can you tell me how to change the textSize since this attribute is having no effect.

 

Hi Karan

Thanks for your comment. There is a reason for that. Google's com.google.android.gms.common.SignInButton button also doesn't provide any attribute called android:textSize. This is because they don't want you to change the size of the text based on their design guidelines.

If you check their branding guidelines here: developers.google.com/identity/bra..., they mention that "You can scale the button as needed for different devices and screen sizes, but you must preserve the aspect ratio so that the Google logo is not stretched". i.e You can use android:scaleX and android:scaleY attributes with in order to scale the button. This maintains the aspect ratio as well.

If you see the padding section on the same page, it shows an image which shows a static font size of 14sp as shown below:

i.e Font Size

That's why in the library also I've just used the suggested size in order to standardize it based on guidelines and don't consider the textSize even if it is set on the custom button. If adding scaling still doesn't solve what you are looking for, please feel free to open a pull request or an issue on the Github repository .

Thanks!

 

hi shobhit i want to make its corner rounded and also change its theme automatically as the user changes from dark to light theme