presionar - personalizar botones android studio

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

Question

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?

Answer 1

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>

Answer 2

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 .

Answer 3

Probablemente mi solución sea adecuada para muchos usuarios, espero que sí.

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

En primer lugar, permite crear un estilo de botón, que puedes 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, permite 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 aplique un estilo a su botón personalizado con cualquier color o cualquier otra propiedad y margen. Buena suerte

Answer 4

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.

Answer 5

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

Answer 6

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 eso puse una imagen como background y también agregué texto ...!

Answer 7

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>

Answer 8

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.

Answer 9

solo reemplaza

android:background="@drawable/icon"

con

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

Izz un buen truco ..;)

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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