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

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.


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>

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

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();


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>

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.


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

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>

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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.