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!

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.


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>

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

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


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>

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


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

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>

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

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.