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.