为 Google 登录定制新的 Android MaterialButton

Question

在迁移到 AndroidX / MaterialComponents 之前，我已将 Buttons 自定义为如下所示。

自定义 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

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

或者为什么不使用 Shobitpuri 库呢？要添加库，如果您使用的是 Android 3+，则使用编译而不是使用实现。

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 2

我最终继承自 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 3

我尝试了同样的方法，但不知何故 android 工作室无法识别我的图标并显示与您相同的白色图像。我所做的是添加来自 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.

现在将此作为图标添加到您的 material 按钮，如下所示

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

关于左边的padding比较多，是样式的问题，看下图

要删除此填充，请删除按钮样式并在 xml

中设置 paddingLeft 值

android:paddingLeft="2dp"

Answer 4

这是添加 Google 登录按钮的另一种方法。

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

Answer 6

按钮提供了一种更简单的方法，既不需要创建不同的按钮，也不需要使用单独的库。也不需要设置图标，因为它已经提供了。

为以下任意项设置 app:buttonSize：0 [standard]、1 [wide]、2 [icon_only]。在您的情况下，它将是 wide
为以下任意项设置 app:colorScheme：0 [dark]、1[light]、2[auto]。在你的情况下，这将是 dark 所以你得到蓝色背景。

因此，要实现图像上的效果，您应该像这样设置按钮：

<com.google.android.gms.common.SignInButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:buttonSize="wide"
            app:colorScheme="dark" />

为 Google 登录定制新的 Android MaterialButton

Customizing new Android MaterialButton for Google SignIn

android

material-components