Android: combinar texto e imagen en un botón o Botón de imagen

Para los usuarios que solo quieren poner Fondo, Imagen de Icono y Texto en uno Button desde diferentes archivos: Establecer en un fondo Button, drawableTop/Bottom/Rigth/Left y padding atributos.

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

Para un arreglo más sofisticado también puede usar RelativeLayout y hacer que se pueda hacer clic.

Tutorial: Gran tutorial que cubre ambos casos: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

Hay una solución mucho mejor para este problema.

Simplemente toma un Button normal y usa los atributos drawableLeft y gravity.

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

De esta manera se obtiene un botón que muestra un icono en el lado izquierdo del botón y el texto en el sitio derecho del icono vertical centrado.

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

Simplemente use un LinearLayout y finja que es un Button - setting background y clickable es la clave:

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

Simplemente reemplace

android:background="@drawable/icon"

Con

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

Izz un truco bastante bueno.. ;)

Tomé un enfoque diferente de los que se indican aquí, y está funcionando muy bien, así que quería compartirlo.

Estoy usando un Estilo para crear un botón personalizado con imagen a la izquierda y texto en el centro-derecha. Solo tienes que seguir los 4 "pasos fáciles" a continuación:

I. Cree sus 9 parches utilizando al menos 3 archivos PNG diferentes y la herramienta que tiene en: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./ draw9patch. Después de esto usted debe tener:

Button_normal.9.png, button_focused.9.png y button_pressed.9.png

A continuación, descargar o crear un icono PNG 24x24.

Ic_your_icon.png

Guarda todo en la carpeta drawable/ de tu proyecto Android.

II. Cree un archivo XML llamado button_selector.xml en su proyecto bajo la carpeta/ drawable. Los estados deben ser así:

<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. Vaya a la carpeta values/ y abra o cree los estilos.archivo xml y crear el siguiente código 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 es un " estilo hijo" porque está extendiendo ButtonNormalText (el"estilo padre").

Tenga en cuenta que cambiando el drawableLeft en el estilo ButtonNormalTextWithIcon, a drawableRight, drawableTop o drawableBottom puede colocar el icono en otra posición con respecto al texto.

IV. Vaya a la carpeta layout / donde tiene su XML para la interfaz de usuario y vaya al Botón donde desea aplicar el estilo y haga que se vea así:

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

Y... ¡voilà! Tienes tu botón con una imagen en el izquierdo.

Para mí, esta es la mejor manera de hacerlo! porque al hacerlo de esta manera, puedes administrar el tamaño del texto del botón por separado del icono que deseas mostrar y usar el mismo elemento de diseño de fondo para varios botones con iconos diferentes respetando las Pautas de la interfaz de usuario de Android usando estilos.

También puede crear un tema para su Aplicación y agregar el "estilo padre" para que todos los botones se vean iguales, y aplicar el "estilo hijo" con el icono solo donde lo necesite.

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

Puede usar drawableTop (también drawableLeft, etc.) para la imagen y establecer el texto debajo de la imagen agregando el 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" />

Probablemente mi solución se adapte a muchos usuarios, eso espero.

Lo que estoy sugiriendo es hacer TextView con tu estilo. Funciona perfectamente para mí, y tiene todas las características, como un botón.

En primer lugar vamos a hacer estilo de botón, que se puede utilizar en todas partes...Estoy creando 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>

En segundo lugar, Vamos a crear un botón 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" />

Y esto es un resultado. A continuación, el estilo de su botón personalizado con cualquier color o cualquier otra propiedad y margen. Buena suerte

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

Este código funciona para mí perfectamente

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

Puedes usar esto:

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

En que he puesto una imagen como background y también añadido texto..!

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