在Android中自定义Google SignInButton

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

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

Answer 3

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 4

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.

PS 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>