android-studio - 如何自定义材料图标按钮填充？

Question

我的情景

我想使用带有固定图标（矢量可绘制）的材质图标按钮 _ 表示没有填充。我使用了谷歌材料：

implementation 'com.google.android.material:material:1.0.0'

这是我的布局

 <com.google.android.material.button.MaterialButton

        android:id="@+id/btnLinkin"
        style="@style/AppIconButton"

        app:icon="@drawable/ic_linkedin"
        app:iconTintMode="screen"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@+id/btnGoogle"
        android:layout_marginRight="8dp"
        app:layout_constraintStart_toEndOf="@+id/btnFacebook"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toTopOf="@+id/tvHave"/>

这是我的风格

 <style name="AppIconButton" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
    <item name="rippleColor">@color/colorSecondary</item>
    <item name="strokeColor">@android:color/transparent</item>
    <item name="iconTint">@android:color/transparent</item>
    <item name="android:gravity">center</item>

这是材料组件的风格

<style name="Widget.MaterialComponents.Button.OutlinedButton.Icon">
    <item name="android:paddingLeft">@dimen/mtrl_btn_icon_btn_padding_left</item>
    <item name="android:paddingRight">@dimen/mtrl_btn_icon_btn_padding_left</item>
</style>

这是材料组件的尺寸

<dimen name="mtrl_btn_icon_padding">0dp</dimen>
<dimen name="mtrl_btn_icon_btn_padding">0dp</dimen>
<dimen name="mtrl_btn_icon_btn_padding_left">0dp</dimen>

但这些不能让我成为我真正想要的。结果是没有左侧填充的 Material Icon Button，但右侧默认填充 (14dp) 如下：

请保存我的时间或指南以了解我如何才能真正理解这些概念。

标签： android-studioandroid-layoutmaterial-design

Answer 1

您可以尝试使用 app:iconPadding="0dp" ，例如：

<com.google.android.material.button.MaterialButton
    android:id="@+id/button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/your_icon"
    app:iconTint="@null"
    app:backgroundTintMode="src_over"
    app:cornerRadius="14dp"
    app:iconPadding="0dp"
    android:paddingStart="24dp"
    android:paddingTop="5dp"
    android:paddingEnd="24dp"
    android:paddingBottom="5dp"
    app:backgroundTint="@color/button_background_color"
    android:theme="@style/Theme.MaterialComponents.Light"/>

结果：

如果您使用带有文本的按钮：

<com.google.android.material.button.MaterialButton
    android:id="@+id/button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:textAppearance="@style/ButtonStyle"
    app:icon="@drawable/icon"
    app:iconTint="@null"
    app:iconGravity="textStart"
    android:textColor="@color/button_text_color"
    app:backgroundTintMode="src_over"
    app:cornerRadius="14dp"
    app:iconPadding="15dp"
    android:paddingStart="24dp"
    android:paddingTop="5dp"
    android:paddingEnd="24dp"
    android:paddingBottom="5dp"
    app:backgroundTint="@color/button_background_color"
    android:theme="@style/Theme.MaterialComponents.Light"/>

结果：