如何让图标显示在 Android Material Button 中的文本旁边？

Question

我正在尝试使用谷歌开发的材质按钮。由于第三方依赖，我无法使用 androidx 存储库，因此我当前正在使用 android 支持库（v28.0.0-alpha1，alpha3 不允许我使用材质按钮）

我正在尝试实现一个宽按钮，文本居中+文本旁边的图标：

但我能得到的就是这个居中的文本，按钮边缘有图标：

这和原来的android按钮一样，也有同样的问题。这个想法是材质按钮可以解决这个问题，但它似乎对我来说在 28.0.0-alpha1 上不起作用

有一些解决方案涉及使用compounddrawables制作文本视图并在其周围绘制框架，但如果可能的话我想坚持使用材质按钮。

有人知道如何解决这个问题吗？

Answer 1

我也遇到这个问题了。 做了一些挖掘，发现了这个。

有一个名为

app:iconGravity

的属性，它有两个选项，即 start 和 textStart ，这似乎对我不起作用，但也许可以尝试一下 - 这是来自 Material Button 的 GitHub 存储库。

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    style="@style/Widget.MaterialComponents.Button.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"
    app:iconGravity="textStart"/>

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java （搜索iconGravity的定义，它在类的开头）

Answer 2

有人知道如何解决这个问题吗？

Button 小部件是从 TextView 扩展而来的。所以你可以在你的情况下使用 ImageSpan。

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.Button.Colored"
        />

    Button button = findViewById(R.id.button);
    SpannableString ss = new SpannableString("  CART".toUpperCase(Locale.US));
    Drawable d = VectorDrawableCompat.create(getResources(), R.drawable.ic_shopping_cart_white_24dp, getTheme());

    d.setBounds(0, 0, (int) button.getTextSize(), (int) button.getTextSize());    //to make it square
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    button.setTransformationMethod(null);
    button.setText(ss);

结果：

Answer 3

您也可以进行定制：

                 <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center">

                        <ImageView
                            android:id="@+id/icon"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:layout_marginRight="5dp"
                            android:layout_marginEnd="5dp"
                            android:src="@android:drawable/ic_media_play" />

                        <TextView
                            android:id="@+id/search"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:lines="1"
                            android:maxLines="1"
                            android:layout_toRightOf="@id/icon"
                            android:layout_toEndOf="@id/icon"
                            android:text="search"
                            android:textColor="@color/white"
                            android:textSize="16sp" />


                    </RelativeLayout>

Answer 4

也许不是最好的解决方案，但您可以在按钮的左侧和右侧添加填充。如果您向两侧添加相同的值，它将居中查看示例图像：

图片

按钮

按钮填充

代码

 <Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="16dp"
    android:drawableStart="@drawable/account"
    android:paddingLeft="120dp"
    android:paddingRight="120dp"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="266dp" />

希望有帮助

Answer 5

<RelativeLayout
    android:id="@+id/callButton"
    style="?android:attr/buttonStyle"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="18dp"
    android:layout_marginRight="18dp"
    android:background="@color/colorPrimaryDark">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_call"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="3dp"
        android:text="@string/callCentralDesk"
        android:textColor="@android:color/white" />
</RelativeLayout>


     

Answer 6

您可以在 MaterialButton 中使用 app:iconGravity="textStart"

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn_start"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:text="@string/start"
    app:iconGravity="textStart"
    app:icon="@drawable/ic_play" />

结果如下：

编码快乐！

Answer 7

我自己也遇到这个问题

使用 Google 的 Material Components 库，我目前正在使用 androidX 依赖项，但从文档来看，您似乎也可以使用支持库版本来获取相同的依赖项。

首先，我尝试了 app:iconPadding 的应用程序命名空间属性，添加了一个负 dp 量，它似乎将文本拉到了可绘制对象中，然后添加了图标填充绝对值的正值（app:iconPadding=- 72dp 与 android:paddingStart=72 这对我来说似乎有点老套，所以我坚持简单地调整 paddingStart 和 paddingEnd 直到出现所需的结果。

最终结果

<!--Padding Start and End Method-->
<!--This is inside a constraint layout with width being match_constraints-->
<com.google.android.material.button.MaterialButton
    android:id="@+id/buttonFoo"
    style="@style/Widget.MaterialComponents.Button.IconButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_my_button_icon"
    android:text="@string/my_button_text"
    android:paddingStart="72dp"
    android:paddingEnd="72dp"/>

我不太确定 Button.IconButton 样式的作用很大，但将填充开始设置为系统硬编码的 12dp 值。但这无论如何都会覆盖该值，哦，好吧。您的里程可能会有所不同，但希望这会有所帮助！