studio - poner imagen a imagebutton android




Android: combinando texto e imagen en un botón o botón de imagen (10)

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

Si uso ImageButton , ni siquiera tengo la posibilidad de agregar texto. Si uso el Button , puedo agregar texto, pero solo defino una imagen con android:drawableBottom y atributos XML similares como se define here .

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 que sale 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 hacerlo (renderización 2D). Tal vez alguien con más experiencia sabe una solución o al menos algunos consejos para comenzar?


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>

Hay una solución mucho mejor para este problema.

Simplemente tome un Button normal y use 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, obtiene 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 .


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

Cualquier texto aparecerá sobre el fondo.

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


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

Simplemente use un LinearLayout y pretenda que es un Button : la configuración del background y la posibilidad de hacer clic 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>

Tomé un enfoque diferente de los que se mencionan 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 a la derecha. Solo sigue los 4 "pasos fáciles" 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 deberías tener:

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

Luego descarga o crea un icono PNG 24x24.

ic_your_icon.png

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

II. Cree un archivo XML llamado button_selector.xml en su proyecto en la carpeta drawable /. 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 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 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 ícono que desea mostrar y usar el mismo dibujo de fondo para varios botones con diferentes íconos que respetan las Pautas de la IU de Android que usan estilos.

También puede crear un tema para su aplicación y agregarle el "estilo principal" para que todos los botones tengan el mismo aspecto, y aplique el "estilo secundario" con el ícono solo donde lo necesite.


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

Para usuarios que solo quieren poner Fondo, Imagen de icono y Texto en un Button de diferentes archivos: Establecer en un fondo de Button , dibujar Arriba / Abajo / Derecho / Izquierda 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 una disposición más sofisticada, 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


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





button