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

Estoy tratando de tener una imagen (como fondo) en un botón y añadir de forma dinámica, dependiendo de lo que está sucediendo durante la ejecución, algún texto por encima / sobre la imagen.

Si utilizo ImageButton , ni siquiera tengo la posibilidad de agregar texto. Si utilizo el Button puedo añadir texto pero sólo definir una imagen con android:drawableBottom y atributos XML similares como se definen aquí .

Sin embargo, estos atributos sólo combinan texto e imagen en dimensiones x y 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 Button o ImageButton y anular el método draw() . Pero con mi nivel actual de conocimiento realmente no sé cómo hacer esto (renderizado 2D). Tal vez alguien con más experiencia sabe una solución o al menos algunos indicadores para empezar?

Puede llamar a setBackgroundDrawable() en un Button para establecer el fondo del botón.

Cualquier texto aparecerá sobre el fondo.

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

Para los usuarios que sólo quieren poner Background, Icon-Image y Text en un Button de diferentes archivos: Set en un fondo Button , drawableTop / Bottom / Rigth / Left y los 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 usted también puede utilizar RelativeLayout y hacerlo clickable.

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 un Button normal y utilice 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 obtendrá 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 .

Introduzca aquí la descripción de la imagen

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

Basta con usar LinearLayout y fingir que es un Button configuración de background y clicable 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> 

Solo reemplaza

 android:background="@drawable/icon" 

con

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

Izz un buen truco ..;)

Tomé un acercamiento diferente de los indicados aquí, y está trabajando realmente bien, así que quise compartirlo.

Estoy usando un estilo para crear un botón personalizado con la imagen a la izquierda y el texto en el centro-derecha. Simplemente siga los 4 "sencillos pasos" a continuación:

I. Crea tus 9 parches utilizando al menos 3 archivos PNG diferentes y la herramienta que tienes 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, descargue o cree un icono de 24×24 png.

Ic_your_icon.png

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

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

 <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 los valores / carpeta 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 padre").

Tenga en cuenta que el cambio de 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 presentación / carpeta donde tiene su XML para la interfaz de usuario y vaya al botón donde desea aplicar el estilo y hacer 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 se puede administrar el tamaño del texto del botón por separado del icono que desea mostrar y utilizar el mismo fondo dibujable para varios botones con diferentes iconos respetando las directrices de la interfaz de usuario de Android utilizando estilos.

También puedes crear un tema para tu aplicación y añadirle el "estilo padre" para que todos los botones tengan el mismo aspecto y aplicar el "estilo de niño" con el icono solo donde lo necesites.

  <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 utilizar drawableTop (también drawableLeft , etc) para la imagen y establecer el texto debajo de la imagen mediante la adición de la 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" /> 
 <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 perfectamente para mí

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

Probablemente mi solución se adapte a un montón de usuarios, espero que sí.

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

En primer lugar permite hacer estilo de botón, que 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 los márgenes. Buena suerte

Introduzca aquí la descripción de la imagen

Puede utilizar 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ñadió texto ..!

FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.