Customize Google SignInButton In Android

Question

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

Answer 1

Its very simple , you need to do this

<Button
 android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:text="@string/common_signin_button_text_long" />

You can customize your button , but you will have to make sure you follow the guidelines. Edit: Check out this library custom signin button

If you want to do it yourself you can create a linear layout and add images.

Answer 2

I think you have to do it pragmatically rather than xml something like this

public static void customizeGooglePlusButton(SignInButton signInButton) {
    for (int i = 0; i < signInButton.getChildCount(); i++)
    {
        View v = signInButton.getChildAt(i);

        if (v instanceof TextView)
        {
            TextView tv = (TextView) v;
            tv.setText("My Text");
            tv.setAllCaps(true);
            tv.setCompoundDrawablesWithIntrinsicBounds( R.drawable.smiley, 0, 0, 0);
            //here you can customize what you want  
            return;
        }
    }
}

another way but not that secure

TextView textView = (TextView) signInButton.getChildAt(0);
//Customize here

Answer 3

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>

2. 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