DEV Community

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

Shobhit Puri on October 05, 2017

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, whi...
Read full post
Collapse
 
alexbros19 profile image
Alexbros19 •

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

Collapse
 
shobhit profile image
Shobhit Puri •

Can you please quote the source Alex?

Collapse
 
shobhit profile image
Shobhit Puri •

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.

Collapse
 
abhu66 profile image
Abu Khoerul Iskandar Ali • • Edited

Thanks Shobhit!

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

Collapse
 
karangupta2388 profile image
karangupta2388 •

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

Collapse
 
shobhit profile image
Shobhit Puri • • Edited

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!

Collapse
 
priyanshnama profile image
Priyansh Nama •

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