Fix button styling issue

CHANGELOG.md

@@ -0,0 +1 @@
+- Fix broken button styling (#1864)

app/src/main/res/layout-land/auth_method_picker_custom_layout.xml

@@ -90,7 +90,12 @@
 
     </FrameLayout>
 
-    <Button
+    <!--
+      NOTE: This sample app uses this class from the FirebaseUI library to show the Google Sign
+      in button. However this button is NOT considered part of the public API and you should not
+      use it in your own app.
+    -->
+    <com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
         android:id="@+id/custom_google_signin_button"
         style="@style/FirebaseUI.Button.AccountChooser.GoogleButton"
         android:layout_width="wrap_content"

app/src/main/res/layout/auth_method_picker_custom_layout.xml

@@ -73,7 +73,12 @@
 
     </FrameLayout>
 
-    <Button
+    <!--
+      NOTE: This sample app uses this class from the FirebaseUI library to show the Google Sign
+      in button. However this button is NOT considered part of the public API and you should not
+      use it in your own app.
+    -->
+    <com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
         android:id="@+id/custom_google_signin_button"
         style="@style/FirebaseUI.Button.AccountChooser.GoogleButton"
         android:layout_width="wrap_content"

auth/src/main/java/com/firebase/ui/auth/util/ui/SupportVectorDrawablesButton.java

@@ -0,0 +1,96 @@
+package com.firebase.ui.auth.util.ui;
+
+import android.content.Context;
+import android.content.res.TypedArray;
+import android.graphics.drawable.Drawable;
+import android.os.Build;
+import android.util.AttributeSet;
+
+import com.firebase.ui.auth.R;
+
+import androidx.annotation.RestrictTo;
+import androidx.appcompat.content.res.AppCompatResources;
+import androidx.appcompat.widget.AppCompatButton;
+import androidx.core.widget.TextViewCompat;
+
+/**
+ * A custom button that supports using vector drawables with the {@code
+ * android:drawable[Start/End/Top/Bottom]} attribute pre-L.
+ * <p>
+ * AppCompat can only load vector drawables with srcCompat pre-L and doesn't provide a similar
+ * compatibility attribute for compound drawables. Thus, we must load compound drawables at runtime
+ * using AppCompat and inject them into the button to support pre-L devices.
+ */
+@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
+public class SupportVectorDrawablesButton extends AppCompatButton {
+    public SupportVectorDrawablesButton(Context context) {
+        super(context);
+    }
+
+    public SupportVectorDrawablesButton(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        initSupportVectorDrawablesAttrs(attrs);
+    }
+
+    public SupportVectorDrawablesButton(Context context, AttributeSet attrs, int defStyleAttr) {
+        super(context, attrs, defStyleAttr);
+        initSupportVectorDrawablesAttrs(attrs);
+    }
+
+    /**
+     * Loads the compound drawables natively on L+ devices and using AppCompat pre-L.
+     * <p>
+     * <i>Note:</i> If we ever need a TextView with compound drawables, this same technique is
+     * applicable.
+     */
+    private void initSupportVectorDrawablesAttrs(AttributeSet attrs) {
+        if (attrs == null) { return; }
+
+        TypedArray attributeArray = getContext().obtainStyledAttributes(
+                attrs,
+                R.styleable.SupportVectorDrawablesButton);
+
+        Drawable drawableStart = null;
+        Drawable drawableEnd = null;
+        Drawable drawableTop = null;
+        Drawable drawableBottom = null;
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            drawableStart = attributeArray.getDrawable(
+                    R.styleable.SupportVectorDrawablesButton_drawableStartCompat);
+            drawableEnd = attributeArray.getDrawable(
+                    R.styleable.SupportVectorDrawablesButton_drawableEndCompat);
+            drawableTop = attributeArray.getDrawable(
+                    R.styleable.SupportVectorDrawablesButton_drawableTopCompat);
+            drawableBottom = attributeArray.getDrawable(
+                    R.styleable.SupportVectorDrawablesButton_drawableBottomCompat);
+        } else {
+            int drawableStartId = attributeArray.getResourceId(
+                    R.styleable.SupportVectorDrawablesButton_drawableStartCompat, -1);
+            int drawableEndId = attributeArray.getResourceId(
+                    R.styleable.SupportVectorDrawablesButton_drawableEndCompat, -1);
+            int drawableTopId = attributeArray.getResourceId(
+                    R.styleable.SupportVectorDrawablesButton_drawableTopCompat, -1);
+            int drawableBottomId = attributeArray.getResourceId(
+                    R.styleable.SupportVectorDrawablesButton_drawableBottomCompat, -1);
+
+            if (drawableStartId != -1) {
+                drawableStart = AppCompatResources.getDrawable(getContext(), drawableStartId);
+            }
+            if (drawableEndId != -1) {
+                drawableEnd = AppCompatResources.getDrawable(getContext(), drawableEndId);
+            }
+            if (drawableTopId != -1) {
+                drawableTop = AppCompatResources.getDrawable(getContext(), drawableTopId);
+            }
+            if (drawableBottomId != -1) {
+                drawableBottom = AppCompatResources.getDrawable(getContext(), drawableBottomId);
+            }
+        }
+
+        TextViewCompat.setCompoundDrawablesRelativeWithIntrinsicBounds(
+                this, drawableStart, drawableTop, drawableEnd, drawableBottom);
+
+        attributeArray.recycle();
+    }
+}

auth/src/main/res/layout/fui_idp_button_apple.xml

@@ -1,4 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/apple_signin_button"
     style="@style/FirebaseUI.Button.AccountChooser.AppleButton"
     android:text="@string/fui_sign_in_with_apple"/>

auth/src/main/res/layout/fui_idp_button_facebook.xml

@@ -1,3 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
     style="@style/FirebaseUI.Button.AccountChooser.FacebookButton"
     android:text="@string/fui_sign_in_with_facebook" />

auth/src/main/res/layout/fui_idp_button_github.xml

@@ -1,3 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
     style="@style/FirebaseUI.Button.AccountChooser.GitHubButton"
     android:text="@string/fui_sign_in_with_github" />

auth/src/main/res/layout/fui_idp_button_google.xml

@@ -1,3 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
     style="@style/FirebaseUI.Button.AccountChooser.GoogleButton"
     android:text="@string/fui_sign_in_with_google" />

auth/src/main/res/layout/fui_idp_button_microsoft.xml

@@ -1,4 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/microsoft_signin_button"
     style="@style/FirebaseUI.Button.AccountChooser.MicrosoftButton"
     android:text="@string/fui_sign_in_with_microsoft"/>

auth/src/main/res/layout/fui_idp_button_twitter.xml

@@ -1,3 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
+    xmlns:android="http://schemas.android.com/apk/res/android"
     style="@style/FirebaseUI.Button.AccountChooser.TwitterButton"
     android:text="@string/fui_sign_in_with_twitter" />

auth/src/main/res/layout/fui_idp_button_yahoo.xml

@@ -1,4 +1,4 @@
-<Button xmlns:android="http://schemas.android.com/apk/res/android"
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/yahoo_signin_button"
     style="@style/FirebaseUI.Button.AccountChooser.YahooButton"
     android:text="@string/fui_sign_in_with_yahoo" />

auth/src/main/res/layout/fui_provider_button_anonymous.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Button
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/anonymous_button"
     style="@style/FirebaseUI.Button.AccountChooser.AnonymousButton"

auth/src/main/res/layout/fui_provider_button_email.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Button
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/email_button"

auth/src/main/res/layout/fui_provider_button_phone.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Button
+<com.firebase.ui.auth.util.ui.SupportVectorDrawablesButton
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/phone_button"

auth/src/main/res/values/attrs.xml

@@ -5,4 +5,11 @@
         <attr name="spacingProportion" format="float" />
     </declare-styleable>
 
+    <declare-styleable name="SupportVectorDrawablesButton">
+        <attr name="drawableStartCompat" format="reference" />
+        <attr name="drawableEndCompat" format="reference" />
+        <attr name="drawableTopCompat" format="reference" />
+        <attr name="drawableBottomCompat" format="reference" />
+    </declare-styleable>
+
 </resources>