如何自定义 Material Icon Button Padding？答案

【问题标题】：How to customize Matetrial Icon Button Padding?如何自定义 Material Icon Button Padding？
【发布时间】：2019-06-15 03:24:57
【问题描述】：

我的场景

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

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-studio android-layout material-design

【解决方案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"/>

结果：

【讨论】：