Customize Google SignInButton In Android

问题

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

回答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.

回答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

回答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>

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

回答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.

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>

来源：https://stackoverflow.com/questions/43999960/customize-google-signinbutton-in-android

标签

java

android

xml

google-plus

google-signin