Android Google plus Sign out button looks different from sign in button in Google tutorial docs

Question

I am following the steps mentioned in Google developers site to implement sign in and sign out in my app.

The code to add the sign-in and sign-out button as mentioned there is:

<!-- sign-in button -->
<com.google.android.gms.common.SignInButton
    android:id="@+id/sign_in_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- sign-out button -->
<Button
    android:id="@+id/sign_out_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sign Out"
    android:visibility="gone" />

In the sample mentioned over there, the sign out button looks very different(and odd) from the sign out button.

Is this because the sign out button is not taken from com.google.android.gms ?

Is there a proper sign-out button available in com. google.android.gms ?

Answer 1

There is no sign-out button provided by google.

If you would like extra buttons in the same style as google's, you will need to create them yourself.

But it's a lot easier than it sounds, there are many resources provided by Google to show you how to create a button that looks just like a Google button. Take a look over here:

https://developers.google.com/+/branding-guidelines

Here is a little example I made in microsoft paint to show you the kind of stuff you can make!

Answer 2

You can make your button look the same as <com.google.android.gms.common.SignInButton> , adding a predefined style to your button with the xml tag style :

style="@style/FirebaseUI.Button.AccountChooser.GoogleButton"

Note that its a FirebaseUI style and you can put the Button text that you want.

Answer 3

How about : change text Sign in to Sign out.

layout.xml

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

kotlin.kt

val signOutButton: SignInButton = findViewById(R.id.sign_out_button)
signOutButton.setSize(SignInButton.SIZE_STANDARD)
signOutButton.setOnClickListener { signOut() }
val txtLogout = signOutButton.getChildAt(0) as TextView
try {
    txtLogout.setText("Sign out")
} catch (e: Exception) {
    //e.printStackTrace()
}