带有图标和文本的 Android 按钮

Android button with icon and text

提问by Dusan

I have some buttons like this in my app:

我的应用程序中有一些这样的按钮：

    <Button
        android:id="@+id/bSearch"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Search"
        android:textSize="24sp" />

I'm trying to create a same button with text and a icon. android:drawableLeft doesn't work for me (Maybe it would, but i don't know how to set a max height to the icon).

我正在尝试创建一个带有文本和图标的相同按钮。android:drawableLeft 对我不起作用（也许可以，但我不知道如何设置图标的最大高度）。

So i created a LinearLayout with a ImageView and a TextView and made it act like a button:

所以我创建了一个带有 ImageView 和 TextView 的 LinearLayout 并使它像一个按钮：

    <LinearLayout
        android:id="@+id/bSearch2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_default"
        android:clickable="true"
        android:padding="16dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:adjustViewBounds="true"
            android:maxHeight="30dp"
            android:maxWidth="30dp"
            android:scaleType="fitCenter"
            android:src="@drawable/search_icon" />

        <TextView
            android:id="@+id/tvSearchCaption"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textSize="24sp"
            android:paddingRight="30dp"
            android:gravity="center"
            android:text="Search" />
    </LinearLayout>

My new button is exactly what i want (font size, icon and text placement). But it doesn't look like my default buttons:

我的新按钮正是我想要的（字体大小、图标和文本位置）。但它看起来不像我的默认按钮：

So i tried, to change the background and the text color of my new Button:

所以我尝试更改新按钮的背景和文本颜色：

Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());

This gives a strange result, my old button, gets messed up:

这给出了一个奇怪的结果，我的旧按钮搞砸了：

When i change the order of these two buttons in the XML, so the "new button" goes first, it makes another strange result:

当我在 XML 中更改这两个按钮的顺序时，因此“新按钮”首先出现，它会产生另一个奇怪的结果：

Now i noticed, that when i try to press the old button, the new one gets pressed.

现在我注意到，当我尝试按下旧按钮时，新按钮被按下。

Any ideas?

有任何想法吗？

回答by Liem Vo

Try this one.

试试这个。

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:textSize="24sp"/>

回答by user3515854

To add an image to left, right, top or bottom, you can use attributes like this:

要将图像添加到左侧、右侧、顶部或底部，您可以使用如下属性：

android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom

The sample code is given above. You can also achieve this using relative layout.

上面给出了示例代码。您也可以使用相对布局来实现这一点。

回答by Kennedy Nyaga

For anyone looking to do this dynamically then setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)on the buttons object will assist.

对于任何希望动态执行此操作的人setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)，按钮对象都会有所帮助。

Sample

样本

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawables('your_drawable',null,null,null);

回答by Shreyansh Tiwari

This is what you really want.

这才是你真正想要的。

<Button
       android:id="@+id/settings"
       android:layout_width="190dp"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal"
       android:background="@color/colorAccent"
       android:drawableStart="@drawable/ic_settings_black_24dp"
       android:paddingStart="40dp"
       android:paddingEnd="40dp"
       android:text="settings"
       android:textColor="#FFF" />

回答by Chamin Wickramarathna

@Liem Vo's answer is correct if you are using android.widget.Button without any overriding. If you are overriding your theme using MaterialComponents, this will not solve the issue.

So if you are

如果您使用 android.widget.Button 而没有任何覆盖，@Liem Vo 的答案是正确的。如果您使用 MaterialComponents 覆盖您的主题，这将无法解决问题。

所以如果你是

1. Using com.google.android.material.button.MaterialButton or
2. Overriding AppTheme using MaterialComponents

1. 使用 com.google.android.material.button.MaterialButton 或
2. 使用 MaterialComponents 覆盖 AppTheme

Use app:iconparameter.

使用app:icon参数。

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:textSize="24sp"
    app:icon="@android:drawable/ic_menu_search" />

回答by Gabriele Mariotti

You can use the Material Components Library and the MaterialButtoncomponent.
Use the app:iconand app:iconGravity="start"attributes.

您可以使用材料组件库和MaterialButton组件。
使用app:icon和app:iconGravity="start"属性。

Something like:

就像是：

  <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="start"
        ../>