Adjusting Google and Facebooks official Log-In Button with Firebase

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):

enter image description here

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

enter image description here



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

![enter image description here



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:

enter image description here

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]:

enter image description here

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

How can we fix this? I appreciate your help!

2 answers

  • answered 2020-04-04 17:50 Reaz Murshed

    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>
    

  • answered 2020-04-04 21:17 AG-Developer

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