Como mostrar o texto em um ImageButton?

127

Eu tenho um ImageButtone quero mostrar um texto e uma imagem nele. Mas quando eu tento no emulador:

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

Recebo a imagem, mas sem o texto. Como posso mostrar o texto? Por favor me ajude!

Võ Quang Hòa
fonte

Respostas:

271

Como você não pode usar android:text, recomendo que você use um botão normal e use um dos drawables compostos. Por exemplo:

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

Você pode colocar o drawable onde quiser usando: drawableTop, drawableBottom, drawableLeftou drawableRight.

ATUALIZAR

Para um botão, isso também funciona muito bem. Colocar android:backgroundestá bem!

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

Acabei de ter esse problema e está funcionando perfeitamente.

Cristian
fonte
2
Essa opção funciona melhor, a menos que você precise de algum tipo de layout de botão com aparência maluca, como uma imagem coberta por duas visualizações de texto. Inicialmente, tentei um objeto de layout definido como widget.button, depois coloquei uma visualização de imagem e uma visualização de texto, mas depois de criar um perfil e o layout do botão acima, economizei quase 30% no tempo de medição, 50% no tempo de layout e 15 -20% no tempo de desenho no meu FramLayout e passou de 38 objetos para 26. isso representa uma economia bastante substancial.
Evan R.
3
@shim drawableTop colocará o drawable na parte superior do botão, drawableRight na parte inferior, etc.
Cristian
1
@RenanBandeira sim, use setCompoundDrawables*()métodos
Cristian
6
Como dimensionar a imagem para caber no botão? Ou ajustaria automaticamente a imagem para caber no botão.
Alston
3
Mesma pergunta que @Stallman, como ajustar a imagem com o botão e configurá-la para a esquerda?
Khuong
63

É tecnicamente possível colocar uma legenda em ImageButtonse você realmente quiser fazê-lo. Basta colocar um TextViewover the ImageButtonusing FrameLayout. Lembre-se de não tornar o Textviewclicável.

Exemplo:

<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>
UncleIstvan
fonte
Isso não parece funcionar no Lollipop, mas funciona perfeitamente em outros.
Hong
2
O problema dessa abordagem é que o texto não é afetado pelo estado do botão (desativado etc.) ... a menos que você faça isso manualmente.
TheOperator
9

Pessoal, preciso desenvolver o botão de configuração e logout, usei o código abaixo. insira a descrição da imagem aqui

    <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" />
Namaded Ahmad
fonte
4

Na verdade, android:textnão é um argumento aceito por ImageButton , mas, se você estiver tentando obter um botão com um plano de fundo especificado (não o padrão do android), use o android:backgroundatributo xml ou declare-o da classe com.setBackground();

Samuel
fonte
4

Você pode usar um LinearLayoutem vez de usar Buttoné um arranjo que eu usei em meu aplicativo

 <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
fonte
Ótima solução! O onClick também funciona perfeitamente no LinearLayout. Não vejo uma razão pela qual devemos usar um botão ou ImageButton
Sam
2

você pode usar um Buttonatributo regular e o android: drawableTop (ou esquerdo, direito, baixo).

Nathan Schwermann
fonte
2

Melhor maneira:

<Button 
android:text="OK" 
android:id="@+id/buttonok" 
android:background="@drawable/buttonok"
android:layout_width="match_parent" 
android:layout_height="wrap_content"/>
eloytxo
fonte
2
Isso não parece ser diferente do que o OP originalmente tentou.
PhonicUK
Desculpe, eu confundo o meu código. Não era o ImageButton, era apenas o Button.
22712 eloytxo
2

Eu resolvi isso colocando o ImageButtone TextViewdentro de um LinearLayoutcom orientação vertical. Funciona bem!

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

Aqui está um bom exemplo 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>

E então o botão no seu arquivo xml:

<Button
    android:id="@+id/btn_send"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/circle"
    android:text="OK"/>
K - A toxicidade no SO está crescendo.
fonte
0

ImageButtonnão pode ter text(ou, pelo menos, android:textnão está listado em seus atributos).

O truque é:

Parece que você precisa usar Button(e veja drawableTopou setCompoundDrawablesWithIntrinsicBounds(int,int,int,int)).

Ajay Venugopal
fonte