Android: combina texto e imagen en un botón o ImageButton

Estoy tratando de tener una imagen (como fondo) en un botón y agregar dinámicamente, dependiendo de lo que ocurra durante el tiempo de ejecución, algo de texto sobre / sobre la imagen.

Si lo uso ImageButton, ni siquiera tengo la posibilidad de agregar texto. Si lo uso Button, puedo agregar texto pero solo definir una imagen con android:drawableBottomatributos XML similares a los definidos aquí .

Sin embargo, estos atributos solo combinan texto e imagen en dimensiones x e y, lo que significa que puedo dibujar una imagen alrededor de mi texto, pero no debajo / debajo de mi texto (con el eje z definido como saliendo de la pantalla).

¿Alguna sugerencia sobre cómo hacer esto? Una idea sería extender Buttono ImageButtonanular el draw()método-. Pero con mi nivel actual de conocimiento, realmente no sé cómo hacer esto (renderizado 2D). ¿Quizás alguien con más experiencia conoce una solución o al menos algunos consejos para comenzar?

Puede llamar setBackground()a a Buttonpara establecer el fondo del botón.

Cualquier texto aparecerá sobre el fondo.

Si está buscando algo similar en xml hay: android:backgroundatributo que funciona de la misma manera.

Para los usuarios que solo desean poner Fondo, Imagen de icono y Texto en uno Button de diferentes archivos: Establecer en un Buttonfondo, dibujable Superior / Inferior / Derecho / Izquierdo y atributos de relleno .

<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(o cualquier otro diseño) y hacer clic en él.

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 tome una normalidad Buttony use drawableLeftlos gravityatributos y.

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

De esta forma, obtienes un botón que muestra un icono en el lado izquierdo del botón y el texto en el sitio derecho del icono centrado verticalmente .

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

Solo use un LinearLayout y pretenda que es una Buttonconfiguración : la clave es hacer clicbackground y hacer clic

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

solo reemplace

android:background="@drawable/icon"

con

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

izz un muy buen truco ..;)

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. Simplemente siga los 4 "pasos fáciles" a continuación:

I. Cree sus 9 parches usando 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 deberías tener:

button_normal.9.png, button_focused.9.png y button_pressed.9.png

Luego, descargue o cree un icono PNG 24x24.

ic_your_icon.png

Guarde todo en la carpeta dibujable / en su proyecto de Android.

II Cree un archivo XML llamado button_selector.xml en su proyecto en la carpeta / dibujable. Los estados deberían 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 valores / y abra o cree el archivo styles.xml y cree 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 secundario" porque está extendiendo ButtonNormalText (el "estilo principal").

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

IV. Vaya al diseño / carpeta 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 lado izquierdo.

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

También puede crear un tema para su aplicación y agregarle el "estilo principal" para que todos los botones se vean iguales, y aplicar el "estilo secundario" con el ícono 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 elgravity 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" />

Actualización importante

No use normal, android:drawableLeftetc ... con dibujos vectoriales, de lo contrario se bloqueará en versiones de API inferiores . (Lo he enfrentado en la aplicación en vivo)

Para vector dibujable

Si está utilizando vectores dibujables, entonces debe

• ¿Has migrado a AndroidX? si no, primero debe migrar a AndroidX. Es muy simple, ¿ ves qué es androidx y cómo migrar?

• Fue lanzado en versión 1.1.0-alpha01, por lo que la versión de appcompat debería ser al menos 1.1.0-alpha01. La última versión actual es 1.1.0-alpha02, use las últimas versiones para una mejor confiabilidad, vea las notas de la versión - enlace .

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• Usar AppCompatTextView/ AppCompatButton/AppCompatEditText

• Uso app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompatyapp:drawableEndCompat

Para dibujable regular

Si no necesita un vector dibujable, entonces puede

• uso android:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• Puede utilizar cualquiera regulares TextView, Buttony EditTexto AppCompatclases.

Puede lograr la salida como a continuación:

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

Lo que estoy sugiriendo es hacer TextView con tu estilo. Me funciona perfectamente y tiene todas las funciones, como un botón.

En primer lugar, hagamos un estilo de botón, que puede usar 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 de vista de texto.

    <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 este es un resultado. Luego, diseñe su botón personalizado con cualquier color u otras propiedades y márgenes. 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 me funciona 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 el que he puesto una imagen backgroundy también he añadido texto ..!

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

O puedes programáticamente:

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

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