¿Cómo mostrar el texto en un ImageButton?

127

Tengo un ImageButtony quiero mostrar un texto y una imagen en él. Pero cuando pruebo el emulador:

<ImageButton 
    android:text="OK" 
    android:id="@+id/buttonok" 
    android:src="@drawable/buttonok"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" />

Me sale la imagen pero sin el texto. ¿Cómo puedo mostrar el texto? ¡Por favor, ayúdame!

Võ Quang Hòa
fuente

Respuestas:

271

Como no puede usar, android:textle recomiendo que use un botón normal y use uno de los elementos dibujables compuestos. Por ejemplo:

<Button 
    android:id="@+id/buttonok" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/buttonok"
    android:text="OK"/>

Se puede poner el dibujable donde quiera que desee utilizando: drawableTop, drawableBottom, drawableLefto drawableRight.

ACTUALIZAR

Para un botón, esto también funciona bastante bien. ¡Poner android:backgroundestá bien!

<Button
    android:id="@+id/fragment_left_menu_login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_bg"
    android:text="@string/login_string" />

Acabo de tener este problema y funciona perfectamente.

Cristian
fuente
2
Esta opción funciona mejor, a menos que necesite algún tipo de diseño de botón de aspecto loco, como una imagen rodeada por dos vistas de texto. Originalmente probé un objeto de diseño definido como widget.button, luego puse una vista de imagen y una vista de texto, pero después de perfilar eso, y el diseño del botón anterior, ahorré casi 30% en tiempo de medición, 50% en tiempo de diseño y 15 -20% en tiempo de sorteo en mi FramLayout, y pasé de 38 objetos a 26. Eso es un ahorro bastante sustancial.
Evan R.
3
@shim drawableTop colocará el dibujable en la parte superior del botón, drawableRight en la parte inferior, etc.
Cristian
1
@RenanBandeira sí, setCompoundDrawables*()métodos uset
Cristian
66
¿Cómo puedo escalar la imagen para que se ajuste al botón? O ajustaría automáticamente la imagen para que se ajuste al botón.
Alston
3
La misma pregunta que @Stallman, ¿cómo ajustar la imagen con el botón y configurarla a la izquierda?
Khuong
63

Es técnicamente posible poner un subtítulo en un ImageButtonsi realmente quieres hacerlo. Simplemente ponga un TextViewsobre el ImageButtonuso FrameLayout. Solo recuerda no hacer que se pueda hacer Textviewclic.

Ejemplo:

<FrameLayout>
    <ImageButton
        android:id="@+id/button_x"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@null"
        android:scaleType="fitXY"
        android:src="@drawable/button_graphic" >
    </ImageButton>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clickable="false"
        android:text="TEST TEST" >
    </TextView>
</FrameLayout>
TíoIstvan
fuente
Esto no parece funcionar en Lollipop, aunque funciona perfectamente en otros.
Hong
2
El problema con este enfoque es que el texto no se ve afectado por el estado del botón (deshabilitado, etc.) ... a menos que lo haga manualmente.
TheOperator
9

Chicos, necesito desarrollar el botón de configuración y cierre de sesión, utilicé el siguiente código. ingrese la descripción de la imagen aquí

    <Button
        android:id="@+id/imageViewLogout"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/size_30dp"
        android:layout_alignParentLeft="true"
        android:text="Settings"
        android:drawablePadding="10dp"
        android:background="@android:color/transparent"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/logout" />
Naveed Ahmad
fuente
4

En realidad, android:textno es un argumento aceptado por ImageButton , pero, si está tratando de obtener un botón con un fondo específico (no el predeterminado de Android), use el android:backgroundatributo xml o declare desde la clase con.setBackground();

Samuel
fuente
4

Puedes usar un en LinearLayoutlugar de usarlo Button, es un arreglo que usé en mi aplicación

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@color/mainColor"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/ic_cv"
            android:textColor="@color/offBack"
            android:textSize="20dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/cartyCv"
            android:textColor="@color/offBack"
            android:textSize="25dp" />

    </LinearLayout>
mxml
fuente
Gran solución! onClick también funciona perfectamente en LinearLayout. No veo una razón por la que deberíamos usar un botón o un ImageButton
Sam
2

puedes usar un Buttonatributo regular y android: drawableTop (o izquierda, derecha, abajo) en su lugar.

Nathan Schwermann
fuente
2

Mejor manera:

<Button 
android:text="OK" 
android:id="@+id/buttonok" 
android:background="@drawable/buttonok"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>
eloytxo
fuente
2
Esto no parece ser diferente a lo que el OP intentó originalmente.
PhonicUK
Lo siento, confundo mi código. No era ImageButton, solo era Button.
eloytxo
2

Resolví esto poniendo el ImageButtony TextViewdentro de a LinearLayoutcon orientación vertical. ¡Funciona genial!

<LinearLayout
    android:id="@+id/linLayout"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/camera_ibtn"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@drawable/camera" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/take_pic"
        android:textColor="#FFFFFF"
        android:textStyle="bold" />

</LinearLayout>
Rafael Dvl
fuente
1

Aquí hay un buen ejemplo de círculo:

drawable/circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#ff87cefa"/>

    <size
        android:width="60dp"
        android:height="60dp"/>
</shape>

Y luego el botón en su archivo xml:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>
K - La toxicidad en SO está creciendo.
fuente
0

ImageButtonno puede tener text(o, al menos, android:textno está en la lista de sus atributos).

El truco es:

Parece que necesita usar Button(y mirar drawableTopo setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

Ajay Venugopal
fuente