Настройка Google и Facebook кнопки официального входа в систему с Firebase

Question

Я пытаюсь добавить Google и Facebook Login через Firebase Authentication в мое приложение. Когда я добавляю официальную кнопку входа в Google и Facebook в LinearLayout, она выглядит следующим образом:

(Nexus 5X API 25):

или даже хуже, вот так (LG G7 ThinQ API 28):

---

Цель : Моя цель - сделать так, чтобы они выглядели так:

---

Что сделано до сих пор: В настоящее время я использую официальный xml код из Googles и 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>

Итак, я понял, что следующие два аспекта необходимо исправить, чтобы отрегулировать две кнопки:

1) Разница в длине две кнопки входа

• Это различие связано с тем, что кнопка входа в Google имеет небольшую тень. Таким образом, если вы установите обе кнопки на фиксированную ширину, видимые Googles всегда будут меньше.

2) Положение каждого текста

• Здесь я попытался откорректировать текст кнопки Facebook, но она не работает.

---

РЕДАКТИРОВАТЬ:

Я решил проверить фон кнопки входа в Google. Кажется, что фон имеет следующие характеристики:

Поэтому я настроил кнопку Facebook в соответствии с приведенными выше значениями и придумал:

    <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"/>

Теперь кнопки выглядят так (без красных линий) [Nexus 5X API25]:

Я был бы совершенно счастлив но когда я смотрю на них с [Nexus 5X API28], это выглядит так:

Как мы можем это исправить? Я ценю вашу помощь!

Answer 1

Может быть, это поможет вам.

1) Попробуйте сделать то же самое width для всех макетов и обеих кнопок match_parent ИЛИ 0dp.

2) Удалить android:layout_weight из Разметьте, если можете.

"Счастливое кодирование"

<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

Я думаю, вы можете установить ширину и высоту кнопок из вашего макета следующим образом.

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