Customize Google SignInButton In Android

user_1590595 0
Viewed 13053

I want to customise Google SignIn Button In Android. Currently I have a very basic default layout by using following code.

<com.google.android.gms.common.SignInButton
            android:id="@+id/sign_in_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

I am not satisfied with the current button layout. Is it possible to update the button text, background colour in the default button, Or Should I create full custom button layout?

Thank you.

ps: I am new to Android

google-plus google-signin android xml java
4 Answers

Basically, Google SignInButton is a FrameLayout you can customize it as you want but need some dynamic tweaks.

XML part adding custom background to the frame layout, make your own. 

  <com.google.android.gms.common.SignInButton
                    android:id="@+id/google_signIn"
                    android:layout_width="match_parent"
                    android:background="@drawable/google_bottun_bg"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp">

                // google image logo
                <ImageView android:layout_width="16dp"
                           android:layout_height="16dp"
                           android:layout_gravity="center_vertical"
                           android:layout_marginLeft="12dp"
                           app:srcCompat="@drawable/ic_gmail"/>
  </com.google.android.gms.common.SignInButton>

  1. inside FrameLayout we have a textView so you can redesign text view as needed

      fun reDesignGoogleButton(signInButton: SignInButton, buttonText: String) {
         for (i in 0 until signInButton.childCount) {
          val v = signInButton.getChildAt(i)
          if (v is TextView) {
           v.text = buttonText //setup your text here
           v.setBackgroundResource(android.R.color.transparent) //setting transparent color that will hide google image and white background
           v.setTextColor(resources.getColor(R.color.white)) // text color here
           v.typeface = Typeface.DEFAULT_BOLD // even typeface 
           return
             }
          }
       }

    Happy Coding

see the results

user_42237420

No need any library. The nice trick is to create your fully custom layout then place google btn in this layout and set width and height match parent for Google Sign in Button, then set Visibility for Google Btn = 0 and then in 

googleSignInButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                googleLayoutCustom.setPressed(true);
                Intent signInIntent = mGoogleSignInClient.getSignInIntent();
                startActivityForResult(signInIntent, RC_SIGN_IN);
            }
        });

So Google Sign In btn will be on top of all layouts and your custom layout will perform touch ripple on google btn click.

P.S sure you have to implement touch ripple effect with any colors you want in your drawable. Example:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorMain">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />

</ripple>
user_82746290
Related