Adjusting Google and Facebooks official Log-In Button with Firebase

Question

I'm trying to add Google and Facebook Login through the Firebase Authentication to my App.
When I add the official Google & Facebook Log-In button at a LinearLayout it looks like below:

(Nexus 5X API 25):

or even worse, like this (LG G7 ThinQ API 28):

Objective:
My Goal is to make them look like this:

Things done so far:
I am currently using the official xml code from Googles and Facebooks Developer-Page

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">


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

            <com.facebook.login.widget.LoginButton
                android:id="@+id/facebook_login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

So I figured out that the following two aspects needed to be fixed in order to adjust the two buttons:

1) The difference in the length of the two Sign-In Buttons

This difference has to do with the fact that Googles Sign-In Button has a small boxshadow.
So if you set both Buttons to a fixed width Googles visible Sign-In will always be smaller.

2) The position of each text

Here I tried to adjust the text of the Facebook button but it doesn't seem to work.

EDIT:

I've decided to inspect the background of the Google Sign-In button.
It seems that the background has the following specifications:

So I adjusted the Facebook Button according to the values above and came up with:

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

    <com.facebook.login.widget.LoginButton
        android:id="@+id/facebook_login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:paddingLeft="11dp"
        android:paddingTop="11dp"
        android:paddingBottom="11dp"
        android:textSize="14dp"/>

Now the buttons look like this (without the red lines) [Nexus 5X API25]:

I Would be perfectly happy but when I look at them with the [Nexus 5X API28] it looks like this:

How can we fix this? I appreciate your help!

Reaz Murshed · Answer 1 · 2020-04-04T18:33:23.500

0

I think you can set the width and height of the buttons from your layout as follows.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <com.google.android.gms.common.SignInButton
        android:id="@+id/google_login_button"
        android:layout_width="200dp"
        android:layout_height="80dp" />

    <com.facebook.login.widget.LoginButton
        android:id="@+id/facebook_login_button"
        android:layout_width="200dp"
        android:layout_height="80dp" />

</LinearLayout>

edited Apr 04 '20 at 18:33

answered Apr 04 '20 at 17:50

Reaz Murshed

23,691
13
78
98

Thanks but in my activity the height of the Facebook-Button doesn't seem to have any effect. Is the mentioned difference of 30dps between the Facebook and Google button randomly picked? – T. Alex Apr 04 '20 at 18:00
My suggestion was to set a fixed width and height for the buttons. Sorry for the confusion. I have fixed the answer. – Reaz Murshed Apr 04 '20 at 18:34
I see! But because of the shadow of the background from the Google-Login Button I can't figure out the fitting height for each box. – T. Alex Apr 04 '20 at 23:10

AG-Developer · Answer 2 · 2020-04-04T22:00:12.093

Maybe it help you.

1) Try to do same width of all Layout and both Buttons match_parentOR 0dp.

2) Remove android:layout_weight from Layout if you can.

"Happy Coding"

<LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical">


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

            <com.facebook.login.widget.LoginButton
                android:id="@+id/facebook_login_button"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
</LinearLayout>```

I tried both but unfortently both variants doesn't fix my problem. Setting the width to `0dp` results in a no-show and setting it to `match_parent` continues with the problem described below. Thank you anyway :) — T. Alex, Apr 04 '20 at 23:07

Adjusting Google and Facebooks official Log-In Button with Firebase

2 Answers2