Android: объединение текста и изображения на кнопке или ImageButton

Я пытаюсь картинку (в качестве фона) на кнопку и динамически добавлять, в зависимости от того, что происходит во время выполнения, текст над изображением.

если я использую ImageButton У меня даже нет возможности добавить текст. Если я использую Button Я могу добавить текст, но только определить изображение с android:drawableBottom и аналогичные атрибуты XML, как определено здесь.

однако эти атрибуты объединяют только текст и изображение в X-и y-измерениях, что означает, что я могу рисовать изображение вокруг моего текста, но не ниже / под моим текстом (с осью z, определенной как выходящая из дисплея).

какие-либо предложения о том, как это сделать? Одной из идей было бы либо расширить Button или ImageButton и переопределить draw()-метод. Но с моим текущим уровнем знаний я действительно не знаю, как это сделать (2D-рендеринг). Может быть, кто-то с большим опытом знает решение или, по крайней мере, некоторые указатели для начала?

14 ответов


можно назвать setBackground() на Button для установки фона кнопки.

любой текст появится над фоном.

Если вы ищете что-то подобное в xml, есть: android:background атрибут, который работает одинаково.


для пользователей, которые просто хотят поставить фон, значок-изображение и текст в одном Button из разных файлов: установить на Button фон, drawableTop / снизу / Rigth / слева и обивка атрибуты.

<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


есть гораздо лучшее решение этой проблемы.

просто нормальный 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" />

таким образом, вы получите кнопку, которая отображает значок в левой части кнопки и текст в нужном месте значок посередине.


enter image description here

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

просто используйте 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>

просто заменить

android:background="@drawable/icon"

С

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

Изз довольно хороший трюк.. ;)


Я взял другой подход, чем те, которые указаны здесь, и он работает очень хорошо, поэтому я хотел поделиться им.

Я использую стиль для создания пользовательской кнопки с изображением слева и текстом в центре справа. Просто следуйте 4 "простых шага" ниже:

I. создайте свои 9 патчей, используя по крайней мере 3 разных файла PNG и инструмент, который у вас есть: /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

сохранить все в папке drawable / на вашем проекте Android.

II. Создайте XML-файл с именем button_selector.xml в вашем проекте в папке drawable/. Штаты должны быть такими:

<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. Перейдите в папку значения/ и откройте или создайте стили.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 ("родительский стиль").

обратите внимание, что изменение drawableLeft в стиле ButtonNormalTextWithIcon, drawableRight, drawableTop или drawableBottom вы можете поместить значок в другое положение по отношению к тексту.

IV. Перейдите в макет / папку, где у вас есть XML для пользовательского интерфейса, и перейдите к кнопке, где вы хотите применить стиль и сделать его выглядеть так:

<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, используя стили.

вы также можете создать тему для вашего приложения и добавить "родительский стиль" в это так, чтобы все кнопки выглядели одинаково, и применяйте "детский стиль" со значком только там, где вам это нужно.


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

можно использовать drawableTop (кроме drawableLeft и т. д.) Для изображения и установите текст под изображением, добавив gravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />

наверное, мое решение подойдет для многих пользователей, я надеюсь.

то, что я предлагаю, это создание TextView с вашим стилем. Он отлично работает для меня и имеет все функции, такие как кнопка.

прежде всего, давайте сделаем стиль кнопки, который вы можете использовать везде...Я создаю 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" />

и это результат. Затем стиль вашей пользовательской кнопки с любым цвета или любые другие свойства и поля. Удачи!--3-->

enter image description here


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


этот код отлично работает для меня

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

Вы можете использовать это:

  <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, а также добавлен текст..!


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