Android按钮带有图标和文本

时间:2014-04-09 14:45:42

标签: android android-layout android-button

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

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

我尝试使用文字和图标创建相同的按钮。 android:drawableLeft对我不起作用(也许它会,但我不知道如何设置图标的最大高度)。

所以我创建了一个带有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>

我的新按钮正是我想要的(字体大小,图标和文字放置)。 但它看起来不像我的默认按钮:

enter image description here

所以我试过,改变我的新按钮的背景和文字颜色:

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());

这会给我一个奇怪的结果,我的旧按钮搞砸了:

enter image description here

当我在XML中更改这两个按钮的顺序时,所以&#34; new按钮&#34;首先,它会产生另一个奇怪的结果:

enter image description here

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

有什么想法吗?

9 个答案:

答案 0 :(得分:231)

试试这个。

<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"/>

答案 1 :(得分:15)

要向左,右,上或下添加图像,您可以使用以下属性:

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

上面给出了示例代码。您也可以使用相对布局来实现此目的。

答案 2 :(得分:9)

对于任何想要动态执行此操作的人来说,按钮对象上的setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)会有所帮助。

示例

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

答案 3 :(得分:6)

这是您真正想要的。

<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" />

答案 4 :(得分:6)

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

类似的东西:

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

enter image description here

答案 5 :(得分:2)

如果您使用的是android.widget.Button而没有任何改写,

@Liem Vo的答案是正确的。如果使用MaterialComponents覆盖主题,则无法解决问题。

如果你是

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

使用 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" />

答案 6 :(得分:1)

@Liem Vo是正确的,但是如果你使用End / Start而不是Right / Left,android studio会很感激:)

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

答案 7 :(得分:0)

res / drawable / circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1000dp" />
    <solid android:color="#41ba7a" />
    <stroke
        android:width="2dip"
        android:color="#03ae3c" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

res / layout / custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="16dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/circle"
            android:drawableTop="@android:drawable/ic_dialog_email"
            android:paddingTop="20dp"
            android:text="Contact"
            android:textColor="#fff" />
        <Button
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/circle"
            android:drawableTop="@android:drawable/ic_dialog_map"
            android:paddingTop="20dp"
            android:text="Map"
            android:textColor="#fff" />
        <Button
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/circle"
            android:drawableTop="@android:drawable/ic_dialog_info"
            android:paddingTop="20dp"
            android:text="Info"
            android:textColor="#fff" />
    </LinearLayout>
</LinearLayout>

图像和链接示例 enter image description here

示例:https://code-android-example.blogspot.com/2019/07/custom-button-with-icon-and-text-in-android.html

答案 8 :(得分:0)

这样的呢?

<Button
            android:id="@+id/yourID"
            android:drawableStart="@drawable/ic_flag"
            android:textColor="#FFFFFF"
            android:textSize="12sp"
            android:textStyle="bold"
            android:textAlignment="textStart"
            android:background="@drawable/btn_background"
            android:fontFamily="@font/YourFont"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Your Text" />