Android: combinando texto e imagem em um botão ou ImageButton

Estou tentando ter uma imagem (como plano de fundo) em um botão e adicionar dinamicamente, dependendo do que está acontecendo durante o tempo de execução, algum texto acima / acima da imagem.

Se eu usar ImageButton, nem tenho a possibilidade de adicionar texto. Se eu usarButton , posso adicionar texto, mas apenas definir uma imagem com android:drawableBottomatributos XML semelhantes e como definido aqui .

No entanto, esses atributos combinam apenas texto e imagem nas dimensões x e y, o que significa que posso desenhar uma imagem em torno do meu texto, mas não abaixo / abaixo do meu texto (com o eixo z definido como saindo da tela).

Alguma sugestão de como fazer isso? Uma idéia seria estender Buttonou ImageButtonsubstituir o draw()método. Mas com meu nível atual de conhecimento, eu realmente não sei como fazer isso (renderização em 2D). Talvez alguém com mais experiência saiba uma solução ou pelo menos alguns indicadores para começar?

Você pode chamar setBackground()a Buttonpara definir o plano de fundo do botão.

Qualquer texto aparecerá acima do plano de fundo.

Se você está procurando algo semelhante no xml, existe: android:backgroundattribute que funciona da mesma maneira.

Para usuários que querem apenas colocar o plano de fundo, imagem de ícone e texto em um Button de diferentes arquivos: em um Buttonplano de fundo, os atributos drawableTop / Bottom / Rigth / Left e padding .

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

Para arranjos mais sofisticados, você também pode usar RelativeLayout(ou qualquer outro layout) e torná-lo clicável.

Tutorial: ótimo tutorial que abrange os dois casos: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

Existe uma solução muito melhor para esse problema.

Basta pegar um normal Buttone usar drawableLeftos gravityatributos

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

Dessa forma, você obtém um botão que exibe um ícone no lado esquerdo do botão e o texto no site direito do ícone centralizado na vertical .

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

Basta usar um LinearLayout e fingir que é uma Button- configuração backgrounde clicável é a chave:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

apenas substitua

android:background="@drawable/icon"

com

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

izz um truque muito bom ..;)

Eu adotei uma abordagem diferente da descrita aqui e está funcionando muito bem, então eu queria compartilhá-la.

Estou usando um estilo para criar um botão personalizado com imagem à esquerda e texto no centro-direita. Basta seguir os 4 "passos fáceis" abaixo:

I. Crie seus 9 patches usando pelo menos 3 arquivos PNG diferentes e a ferramenta que você possui em: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. Depois disso, você deve ter:

button_normal.9.png, button_focused.9.png e button_pressed.9.png

Em seguida, faça o download ou crie um ícone PNG 24x24.

ic_your_icon.png

Salve tudo na pasta drawable / no seu projeto Android.

II Crie um arquivo XML chamado button_selector.xml no seu projeto na pasta drawable /. Os estados devem ser assim:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

III Vá para os valores / pasta e abra ou crie o arquivo styles.xml e crie o seguinte código XML:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon é um "estilo filho" porque está estendendo o ButtonNormalText (o "estilo pai").

Observe que, alterando o drawableLeft no estilo ButtonNormalTextWithIcon, para drawableRight, drawableTop ou drawableBottom, você pode colocar o ícone em outra posição em relação ao texto.

IV Vá para o layout / pasta em que você possui seu XML para a interface do usuário e vá para o botão em que deseja aplicar o estilo e faça com que fique assim:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

E ... voilà! Você conseguiu o seu botão com uma imagem no lado esquerdo.

Para mim, esta é a melhor maneira de fazê-lo! porque dessa maneira, você pode gerenciar o tamanho do texto do botão separadamente do ícone que deseja exibir e usar o mesmo plano de fundo desenhável para vários botões com ícones diferentes, respeitando as Diretrizes da interface do usuário do Android usando estilos.

Você também pode criar um tema para o seu aplicativo e adicionar o "estilo pai" a ele, para que todos os botões tenham a mesma aparência e aplicar o "estilo filho" com o ícone somente onde for necessário.

 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   

Você pode usar drawableTop(também drawableLeftetc) para a imagem e definir o texto abaixo da imagem adicionando ogravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />

Atualização Importante

Não use normal android:drawableLeftetc ... com drawables vetoriais, senão ele trava nas versões mais baixas da API . (Eu já enfrentei isso no aplicativo ao vivo)

Para vetor desenhável

Se você estiver usando um vetor desenhável, deverá

• Você migrou para o AndroidX? Caso contrário, você deve migrar para o AndroidX primeiro. É muito simples, veja o que é o androidx e como migrar?

• Foi lançado na versão 1.1.0-alpha01, portanto a versão appcompat deve ser pelo menos 1.1.0-alpha01. A versão mais recente atual é 1.1.0-alpha02, use as versões mais recentes para melhor confiabilidade, consulte as notas de versão - link .

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• Use AppCompatTextView/ AppCompatButton/AppCompatEditText

• Use app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompateapp:drawableEndCompat

Para drawable regular

Se você não precisar de um desenho vetorial, poderá

• uso android:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• Você pode usar aulas regulares TextView, Button& EditTextou AppCompat.

Você pode obter resultados como abaixo -

Provavelmente minha solução servirá para muitos usuários, espero que sim.

O que estou sugerindo é criar o TextView com seu estilo. Funciona perfeitamente para mim e possui todos os recursos, como um botão.

Antes de tudo, vamos criar o estilo do botão, que você pode usar em qualquer lugar ... Estou criando o button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

Em segundo lugar, vamos criar um botão de exibição de texto.

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

E isso é resultado. Em seguida, estilize seu botão personalizado com todas as cores ou outras propriedades e margens. Boa sorte

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

Este código funciona para mim perfeitamente

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/choose_photo"/>

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

Você pode usar isto:

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

em que eu coloquei uma imagem como backgrounde também adicionei texto ..!

<Button android:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

Ou você pode programaticamente:

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />