为Google登录自定义新的Android MaterialButton

Question

在迁移到AndroidX / MaterialComponents之前，我已经定制了Buttons看起来像这样。

Custom Google SignIn button：

 < Button 
    android: id = "@+id/customGoogleSignInBtn"
    style = "@style/SocialLoginBtnStyle"
    android: background = "@color/googleColor"
    android: drawableStart = "@drawable/logo_google_sign_in_btn_normal_46dp"
    android: drawableLeft = "@drawable/logo_google_sign_in_btn_normal_46dp"
    android: foreground = "?attr/selectableItemBackground"
    android: paddingStart = "1dp"
    android: paddingLeft = "1dp"
    android: paddingEnd = "1dp"
    android: paddingRight = "1dp"
    android: text = "@string/google_sign_in"
    android: textStyle = "bold" /  >

迁移到新的MaterialComponents后，我无法自定义MaterialButton以同样的方式。

我面临的具体挑战是，我无法设置Google图标，默认情况下左侧填充太多了。

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="24dp"
    android:layout_marginRight="24dp"
    app:iconTintMode="src_atop"
    app:icon="@drawable/logo_google_sign_in_btn_normal_46dp"
    android:text="@string/google_sign_in"
    android:textAllCaps="false"
    app:backgroundTint="@color/googleColor"
    app:iconPadding="0dp" />

我该如何定制？找不到MaterialButton的帮助。

Answer 1

我最终继承自androidx.appcompat.widget.AppCompatButton而不仅仅是Button。

 <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/customGoogleSignInBtn"
            style="@style/SocialLoginBtnStyle"
            android:background="@color/googleColor"
            android:drawableStart="@drawable/logo_google_sign_in_btn_normal_46dp"
            android:drawableLeft="@drawable/logo_google_sign_in_btn_normal_46dp"
            android:foreground="?attr/selectableItemBackground"
            android:paddingStart="1dp"
            android:paddingLeft="1dp"
            android:paddingEnd="1dp"
            android:paddingRight="1dp"
            android:text="@string/google_sign_in"
            android:textStyle="bold" />

Answer 2

首先，您使用MaterialButton库来获取谷歌登录按钮吗？如果是，我建议你将库的版本更改为最新版本。

或者为什么不使用Shobitpuri图书馆呢？要添加库，如果您使用的是Android 3+，则使用compile，请使用Implementation。

Implementation 'com.shobhitpuri.custombuttons:google-signin:1.0.0'

对于XML文件：

<com.shobhitpuri.custombuttons.GoogleSignInButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="@string/google_sign_up"
    app:isDarkTheme="true" />

你可以在这里看到CustomGoogleSignInButtonThemeDarkShobitpuri的预期结果

Answer 3

我尝试了同样的东西，不知何故安卓工作室没有识别我的图标，并显示与你的相同的白色图像。我所做的是从andorid studio添加图像资源，如下所示

Right click drawable -> new -> Image Assets -> select icon type as action bar and tabs icon -> asset type to image and select your image file.

现在将此图标添加到您的素材按钮，如下所示

app:icon="@drawable/ic_close"
app:iconSize="28dp"

关于更多的左边填充，这是由于样式，检查下面的图像

要删除此填充，请删除按钮样式并在xml中设置paddingLeft值

android:paddingLeft="2dp"

Answer 4

这是添加Google SignIn Button的另一种方法。

添加Gradle：

implementation 'com.google.android.gms:play-services-auth:15.0.1'

在XML中添加按钮：

<com.google.android.gms.common.SignInButton
            android:id="@+id/sign_in_button"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:buttonSize="1"/>

它看起来像这样：

Answer 5

使用此选项并退出色调图标以显示真实颜色

  app:icon="@drawable/ic_google"
  app:iconTint="@null

例

<Button
  android:id="@+id/idGoogle"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:icon="@drawable/ic_google"
  app:iconTint="@null"/>

icon with real color shows black background