制作一个假按钮。

Question

我正在尝试在按钮上创建一个图像（作为背景）并动态添加，具体取决于运行时发生的情况，图像上方/上方的一些文本。

如果我使用ImageButton，我甚至无法添加文字。如果我使用Button我可以添加文字，但只定义带有android:drawableBottom的图片和类似here的类似XML属性。

然而，这些属性只包含文字和文字。 x和y维度的图像，这意味着我可以在文本周围绘制图像，但不能在文本的下方/下方（z轴定义为从显示中出来）。

有关如何执行此操作的任何建议？一种想法是扩展Button或ImageButton并覆盖draw() - 方法。但凭借我目前的知识水平，我真的不知道如何做到这一点（2D渲染）。也许有经验丰富的人知道解决方案或至少有一些启动指针？

Answer 1

对于只想将背景，图标 - 图片和文字放在一个 Button来自不同文件的用户：设置在Button背景上，drawableTop / Bottom / Rigth / Left和 padding 属性。

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

对于更复杂的安排，您还可以使用RelativeLayout并使其可点击。

教程：包含两种情况的精彩教程：http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

Answer 2

这个问题有一个更好的解决方案。

只需采用正常Button并使用drawableLeft和gravity属性。

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

通过这种方式，您可以获得一个按钮，该按钮在按钮左侧显示一个图标，并在图标垂直居中的右侧站点显示文本。

Answer 3

您可以在setBackground()上致电Button来设置按钮的背景。

任何文字都会显示在背景上方。

如果您在xml中寻找类似的东西，那么： android:background属性以相同的方式工作。

Answer 4

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

Answer 5

只需使用LinearLayout并假装它是Button - 设置background并且可点击是关键：

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

Answer 6

只需替换

android:background="@drawable/icon"

与

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz是一个非常好的技巧..;）

Answer 7

我采用了与此处所述方法不同的方法，并且工作得非常好，所以我想分享它。

我正在使用样式创建一个自定义按钮，左侧是图像，右侧是文本。只需按照下面的4个“简单步骤”进行操作：

予。使用至少3个不同的PNG文件和您拥有的工具创建9个补丁：/YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch。在此之后你应该：

button_normal.9.png，button_focused.9.png和button_pressed.9.png

然后下载或创建一个24x24 PNG图标。

ic_your_icon.png

将所有内容保存在Android项目的drawable /文件夹中。

II。在drawable /文件夹下的项目中创建名为button_selector.xml的XML文件。州应该是这样的：

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

III。转到values /文件夹并打开或创建styles.xml文件并创建以下XML代码：

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon是一个“子样式”，因为它正在扩展ButtonNormalText（“父样式”）。

请注意，将ButtonNormalTextWithIcon样式中的drawableLeft更改为drawableRight，drawableTop或drawableBottom，可以将图标放置在相对于文本的其他位置。

IV。转到您拥有用于UI的XML的布局/文件夹，然后转到要应用样式的Button，并使其如下所示：

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

而且......瞧！你的按钮左侧有一个图像。

对我来说，这是更好的方法！因为这样做，您可以单独管理按钮的文本大小，并与要显示的图标分开管理，并使用相同的背景可绘制多个按钮，使用不同的图标，使用样式的Android UI指南。

您还可以为应用创建主题并为其添加“父样式”，以便所有按钮看起来都相同，并将“子样式”仅应用于您需要的图标。

Answer 8

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />

Answer 9

您可以drawableTop drawableLeft

gravity

Answer 10

可能我的解决方案适合很多用户，我希望如此。

我建议您使用自己的风格制作TextView。它非常适合我，并且具有所有功能，如按钮。

首先让make按钮样式，你可以随处使用......我正在创建button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

其次，让我们创建一个textview按钮。

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

这就是结果。然后使用任何颜色或任何其他属性和边距设置自定义按钮的样式。祝你好运

Answer 11

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


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

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

Answer 12

重要更新

不要将普通android:drawableLeft等与矢量可绘制对象一起使用，否则在较低的API版本中会崩溃。（我已经在实时应用中遇到过

对于矢量可绘制

如果使用矢量可绘制，则必须

您是否已迁移到AndroidX？如果不是，则必须先迁移到AndroidX。这很简单，请参见what is androidx, and how to migrate?
它的发布版本为1.1.0-alpha01，因此appcompat版本应至少为1.1.0-alpha01。当前最新版本是1.1.0-alpha02，请使用最新版本以提高可靠性，请参阅发行说明-link。

implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'
使用AppCompatTextView / AppCompatButton / AppCompatEditText
使用app:drawableLeftCompat，app:drawableTopCompat，app:drawableRightCompat，app:drawableBottomCompat，app:drawableStartCompat和app:drawableEndCompat

对于常规可绘制对象

如果不需要矢量可绘制，则可以

使用android:drawableLeft，android:drawableRight，android:drawableBottom，android:drawableTop
您可以使用常规的TextView，Button和EditText或AppCompat类。

您可以实现输出，如下所示-

Answer 13

此代码非常适合我

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

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

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

Answer 14

MaterialButton支持设置图标并将其与文本对齐：

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My button"
        app:icon="@drawable/your_icon"
        app:iconGravity="textStart"
        />

app:iconGravity也可以是start / end，如果您想将图标与按钮对齐，而不是将按钮中的文本对齐。

Answer 15

您可以使用：

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

因为我将图像设为background并添加了文字..！

Answer 16

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />

或者您可以通过编程方式：

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

Answer 17

制作一个假按钮。

这是唯一的办法

  <FrameLayout
        android:id="@+id/fake_button"

        android:layout_width=" .. "
        android:layout_height=" .. "

        android:background="@android:color/transparent"

        android:clickable="true"
        android:onClick="tappedNext">

        <ImageView
            android:id="@+id/fake_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:src="@drawable/your_amazing_drawable" />

        <TextView
            android:id="@+id/fake_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"

            android:text="Next"
            android:fontFamily="@font/ .. "
            android:textColor="@color/ .. "
            android:textSize=" .. " />
    </FrameLayout>

Answer 18

要组合 Button 和 drawableTop 并仍然获得点击响应，您可以使用按钮样式 @style/Widget.AppCompat.Button.Borderless 使其透明。

<Button
    android:id="@+id/settings"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_baseline_settings_24"
    android:drawableTint="?attr/colorPrimary"
    android:text="@string/settings"
    android:textColor="?attr/colorPrimary" />

Answer 19

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />

Android：结合文字＆amp; Button或ImageButton上的图像

19 个答案:

重要更新

对于矢量可绘制

对于常规可绘制对象

制作一个假按钮。