How to center text in google sign in button android

Question

I am using the following code to put the google sign in button in my application. However the text in the button is off center. How can I make it centered?

<com.google.android.gms.common.SignInButton
        android:id="@+id/sign_in_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:visibility="visible"
        android:layout_marginRight="50dp"
        android:layout_marginLeft="50dp" />

Answer 1

By inspecting with the debugger and the decompiled class code, I've noticed:

• the SignInButton class sets up the real button in setStyle . It uses inter-process binding APIs to create some class from some other library, and I couldn't identify that class nor locate its decompiled class code.
• the inner button has side paddings set, which is larger on the side with G icon.
• the G icon is displayed via a background drawable, and not the TextView drawableStart.

Thus, it seems like some manual padding is put on the real button, on the side with the G icon. Why they would do this, no idea. From the above, it's pretty safe to "fix" the padding after the button is inflated from your XML. I think this is also safe in the case of RTL, since the padding on the side with the icon is always larger, I think (or I sure hope so, somebody please let me know if this is broken in RTL):

    loginBinding!!.googButton.getChildAt(0)?.let {
        val smaller = Math.min(it.paddingLeft, it.paddingRight)
        it.setPadding(smaller, it.paddingTop, smaller, it.paddingBottom)
    }

That's Kotlin, of course.

Answer 2

Better create a button by yourself. I always prefer this approach because i can develop any kind of google login button as i want.

<RelativeView
 android:height="wrap_content"
 android:width="match_parent"
 android:marginLeft="20dp"
 android:marginRight="20dp">
      <ImageButton
         android:parentRight="true"
         android:id="google_icon"
         android:background="@null"
         android:padding="10dp"/>
      <TextView
         android:id="google_text"
         android:height="wrap_content"
         android:width="match_parent"
         android:centerHorizontal="true"
         android:text="Google Login"
         android:padding="10dp"/>
</RelativeView>

Above is the structure of the code that you can use exactly to achieve what you want.

Answer 3

Just use your own custom view button instead of using their built-in button. BUT you need to follow the guideline. Even facebook button i custom to my need..

<RelativeLayout
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:layout_gravity="center"
    android:background="@drawable/border_radius_white"
    android:clickable="true"
    android:id="@+id/google_signin" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/g_logo"
        android:adjustViewBounds="true"
        android:layout_gravity="center_vertical"
        android:padding="12dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:typeface="normal"
        android:textSize="@dimen/log_button_size"
        android:text="@string/text_sign_in_with_google"
        android:textStyle="bold"
        android:textColor="@color/scGrey"/>

</RelativeLayout>

Answer 4

An easy way I got around this was to add spaces after my text.. so Instead of

android:text="Connect with Google"

I changed it to

android:text="Connect with Google_____________"

replace the underscores with spaces

however this was using the custom button "com.shobhitpuri.custombuttons.GoogleSignInButton"

Answer 5

Use gravity to fix the center of text:

<com.google.android.gms.common.SignInButton
  ......
  android:gravity="center_vertical|center"
  ...... />