带有两个图像和文本的 Android 按钮答案

【问题标题】：Android Button with two images and Text带有两个图像和文本的 Android 按钮
【发布时间】：2025-11-21 08:00:03
【问题描述】：

我正在尝试构建 android 应用程序，需要构建一个带有两个图像和一些文本的按钮。

这是示例图片：

如何在 android 中构建此按钮？任何帮助将不胜感激。

【问题讨论】：

你试过按钮'android:drawableLeft="@drawable/icon"'的drawable属性
您也可以使用线性布局（或其他），其行为和外观都像一个按钮。包含图像、文本、图像。

标签： android xml button

【解决方案1】：

这里有一些代码可以帮助您入门。让我们从背景开始。如果没有为您提供该背景并且您必须自己创建它，让我们创建一个 custom_button_bg.xml 文件并添加到您的可绘制文件夹中。

custom_button_bg.xml 注意：我只是为你做基本的形状。根据需要调整阴影和圆角半径

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="@color/teal"
        android:startColor="@color/teal"/>
    <corners android:radius="4dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/shadow"/>
</shape>

现在只需创建您的布局，如下所示。只需替换 src 和标签即可。

<RelativeLayout
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:gravity="center_vertical"
    android:background="@drawable/custom_rounded_white_button">

    <ImageView
        android:id="@+id/iv_video_cam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/video_cam"/>

    <TextView
        android:id="@+id/tv_desc"
        android:layout_toRightOf="@+id/iv_video_cam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="See a Medical \nDoctor Now"/>

    <ImageView
        android:layout_toRightOf="@+id/tv_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow"/>

</RelativeLayout>

干杯！

【讨论】：

【解决方案2】：

你可以这样使用：

     <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:drawableLeft="@drawable/video_camera"
        android:drawableRight="@drawable/right_arrow"
        android:text="See a Medical\nDoctor Now"/>

【讨论】：

【解决方案3】：

两个选项：

您可以在Button 上使用setBackgroundDrawable() 将按钮的背景设置为带有您想要的图标的图像，然后您的文字将出现在背景上方。

或者您可以尝试在嵌套在您的Button 中的 XML 文件中使用 android:drawableLeft="@drawable/yourimage" 和/或 android:drawableRight="@drawable/yourimage"。

HERE你可以找到更多关于drawableRight/Left的信息

【讨论】：

【解决方案4】：

我在下面的代码中遇到了同样的问题 ;)

            android:layout_width="370dp"
            android:layout_height="62dp"
            android:layout_marginTop="100dp"
            android:drawableLeft="@drawable/flag_us_little"
            android:drawableRight="@drawable/ic_arrow"
            android:text="English language"
            android:textAllCaps="true"
            android:textColor="@color/black"/>

干杯！

【讨论】：

【解决方案5】：

三个步骤：

截取您提供的图片的屏幕截图。
将屏幕截图放在我文件夹的可绘制项目中，并将其命名为“背景”

在我的布局 xml 文件中。将图片设置为按钮背景：

<Button
android:layout_width="165dp"
android:layout_height="35dp"
android:background="@drawable/background"
android:textColor="#FFFFFF"
android:id="@+id/button"
android:paddingTop="2sp"
android:drawablePadding="-1sp"
 ></Button>

最终结果：

【讨论】：

请不要使用图片发布代码。此外，这是一个非常糟糕的实现。原因是，它不会针对 DPI 和/或屏幕尺寸进行缩放。
我通常不这样做，但由于某种原因，我无法将按钮 xml 布局发布为我的答案的代码，可能是因为 > 与 SO 的编辑器冲突。随意发布更好的实现。我们都在这里向更好的人学习。
删除了反对票，因为答案格式更好。请参阅@portfoliobuilder 答案以了解我将如何做。所有 DPI 的文本和布局都可以更好地缩放，并且可以为图像提供一组可绘制对象或矢量。人们还暗示设置左右可绘制对象。我从来没有尝试过设置两者，不认为这是可能的。但如果是，它是一个很好的答案。