Come mostrare il testo su un ImageButton?


127

Ho un ImageButtone voglio mostrare un testo e un'immagine su di esso. Ma quando provo l'emulatore:

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

Ottengo l'immagine ma senza il testo. Come posso mostrare il testo? Mi aiuti per favore!

Risposte:


271

Dato che non puoi usare android:textti consiglio di usare un pulsante normale e usare uno dei disegni estraibili composti. Per esempio:

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

È possibile inserire il drawable dove vuoi utilizzando: drawableTop, drawableBottom, drawableLefto drawableRight.

AGGIORNARE

Anche per un pulsante funziona abbastanza bene. Mettere android:backgroundva bene!

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

Ho appena avuto questo problema e funziona perfettamente.


2
Questa opzione funziona meglio, a meno che tu non abbia bisogno di una sorta di layout pulsante dall'aspetto pazzo, come un'immagine levigata da due visualizzazioni di testo. Inizialmente ho provato un oggetto layout definito come widget.button, quindi ho inserito una visualizzazione immagine e una visualizzazione di testo, ma dopo averlo profilato, e il layout Button sopra, ho risparmiato quasi il 30% nel tempo di misurazione, il 50% nel tempo di layout e 15 -20% in Draw time sul mio FramLayout, e sono passato da 38 oggetti fino a 26. Questo è un risparmio piuttosto sostanziale.
Evan R.,

3
@shim drawableTop posizionerà il drawable nella parte superiore del pulsante, drawableRight nella parte inferiore, ecc.
Cristian,

1
@RenanBandeira sì, setCompoundDrawables*()metodi uset
Cristian

6
Come posso ridimensionare l'immagine per adattarla al pulsante? Oppure regola automaticamente l'immagine per adattarla al pulsante.
Alston,

3
Stessa domanda di @Stallman, come adattare l'immagine al pulsante e impostarla a sinistra?
Khuong,

63

È tecnicamente possibile inserire una didascalia su un ImageButtonse si vuole davvero farlo. Basta mettere una TextViewsopra l' ImageButtonuso FrameLayout. Ricorda solo di non rendere Textviewselezionabile.

Esempio:

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

Questo non sembra funzionare su Lollipop sebbene funzioni perfettamente su altri.
Hong

2
Il problema con questo approccio è che il testo non è influenzato dallo stato del pulsante (disabilitato, ecc.) ... a meno che non lo si faccia manualmente.
TheOperator,

9

Ragazzi, devo sviluppare il pulsante di impostazione e disconnessione, ho usato il codice seguente. inserisci qui la descrizione dell'immagine

    <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

In realtà, android:textnon è un argomento accettato da ImageButton ma, se stai cercando di ottenere un pulsante con uno sfondo specificato (non predefinito di Android) usa l' android:backgroundattributo xml o dichiaralo dalla classe con.setBackground();


4

Puoi usare un LinearLayoutinvece di usare Buttonun accordo che ho usato nella mia app

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

Ottima soluzione! onClick funziona perfettamente anche su LinearLayout. Non vedo un motivo per cui dovremmo usare un Button o ImageButton
Sam,

2

puoi invece usare un normale Buttone l'attributo android: drawableTop (o left, right, bottom).


2

Miglior modo:

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

2
Questo non sembra essere diverso da quello che l'OP ha tentato inizialmente.
PhonicUK,

Scusa, ho sbagliato il mio codice. Non era ImageButton, era solo Button.
eloytxo,

2

Ho risolto questo mettendo il ImageButtone TextViewdentro a LinearLayoutcon orientamento verticale. Funziona alla grande!

<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

Ecco un bell'esempio di cerchio:

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>

E poi il pulsante nel tuo file xml:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>

0

ImageButtonnon può avere text(o almeno android:textnon è elencato nei suoi attributi).

Il trucco è:

Sembra che tu debba usare Button(e guardare drawableTopo setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.