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!

Answer 1

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>```

Answer 2

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>