Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Combinar la imagen de fondo, el estilo de fondo dibujable en un botón

Me pregunto si es posible combinar tanto tener una imagen en un botón y el uso de una fuente dibujable y tener texto por encima de eso?

Actualmente estoy usando esto como mi estilo de botón en drawable / red_btn.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> 

Y luego mi botón

  <Button android:id="@+id/testButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Income" android:textSize="15dip" android:background="@drawable/red_btn" android:textColor="#fff" android:textStyle="bold" /> 

Que se parece a esto

Introduzca aquí la descripción de la imagen

Ahora me gustaría añadir otra imagen .png (arrow.png) encima de este botón a la derecha como este

Introduzca aquí la descripción de la imagen

¿Es esto posible, y si, cómo puedo hacerlo?

Gracias por adelantado. __________________________________________________________________________________________________________________________________________

Editar

Después de seguir los consejos de Luksprog a continuación, ahora tengo "red_btn_normal.xml" en drawable

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> </selector> 

Y red_btn_pressed.xml

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true"> <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <bitmap android:gravity="right" android:src="@drawable/arrow" /> </item> </layer-list> 

Y entonces creo mi botón como este "red_btn.xml"

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/red_btn_normal"></item> </selector> 

Y finalmente mi botón

  <Button android:id="@+id/testButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Income" android:textSize="15dip" android:background="@drawable/red_btn" android:textColor="#fff" android:textStyle="bold" /> 

El problema es que sólo muestra las flechas blancas cuando hago clic en el botón y no se muestra cuando no se presiona . ¿Qué hay de malo en el código? =)

2 Solutions collect form web for “Combinar la imagen de fondo, el estilo de fondo dibujable en un botón”

Me pregunto si es posible combinar tanto tener una imagen en un botón y el uso de una fuente dibujable y tener texto por encima de eso?

Si es posible. Su selector se convertirá en:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/red_btn_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/red_btn_normal"></item> </selector> 

Donde los dos elementos estirables son dos elementos layer-list con el primer elemento que son los elementos de su selector inicial y el segundo es la imagen .png envuelto como un drawbale de mapa de bits. Por ejemplo, para red_btn_pressed.xml tendrás:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <bitmap android:gravity="right" android:src="@drawable/arrow" /> </item> </layer-list> 

Y el red_btn_normal.xml será:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <gradient android:angle="270" android:endColor="#992f2f" android:startColor="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /> </shape> </item> <item> <bitmap android:src="@drawable/allowed" android:gravity="right"/> </item> </layer-list> 

Tenga en cuenta que la imagen de flecha estará a la derecha del texto sólo si el tamaño del Button permite (como parte del fondo del Button ). Si estás tratando de imponer algún tipo de relación de posicionamiento entre el texto del Button y esa flecha, entonces necesitarás extender la clase Button y hacerlo tú mismo.

Fui con el simple

 <Button android:id="@+id/testButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="Income" android:textSize="15dip" android:background="@drawable/red_btn" android:drawableRight="@drawable/arrow" android:textColor="#fff" android:textStyle="bold" /> 
FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.