web-dev-qa-db-fra.com

Android: combinaison de texte et image sur un bouton ou un bouton image

J'essaie d'avoir une image (comme arrière-plan) sur un bouton et d'ajouter de manière dynamique, en fonction de ce qui se passe pendant l'exécution, du texte au-dessus/au-dessus de l'image.

Si j'utilise ImageButton je n'ai même pas la possibilité d'ajouter du texte. Si j'utilise Button, je peux ajouter du texte mais ne définir qu'une image avec Android:drawableBottom et des attributs XML similaires à ceux définis ici .

Cependant, ces attributs ne combinent que le texte et l'image dans les dimensions x et y, ce qui signifie que je peux dessiner une image autour de mon texte, mais pas sous/sous mon texte (avec l'axe z défini comme sortant de l'affichage).

Des suggestions sur la façon de faire ceci? Une idée serait d'étendre Button ou ImageButton et de remplacer la méthode draw()-. Mais avec mon niveau actuel de connaissances, je ne sais pas vraiment comment faire cela (rendu 2D). Peut-être que quelqu'un avec plus d'expérience connaît une solution ou au moins quelques indications pour commencer?

androidimagetextbutton
521
znq

Vous pouvez appeler setBackground() sur un Button pour définir l'arrière-plan du bouton.

Tout texte apparaîtra au-dessus de l'arrière-plan.

Si vous recherchez quelque chose de similaire au format XML, il existe: Android:background attribut qui fonctionne de la même manière.

200
m_vitaly

Pour les utilisateurs qui souhaitent simplement mettre en arrière-plan, icône-image et texte en un Button à partir de différents fichiers: défini sur un Button background, drawableTop/Bottom/Rigth/Left et des attributs de remplissage .

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

Pour un arrangement plus sophistiqué, vous pouvez également utiliser RelativeLayout et le rendre cliquable.

Tutoriel: Excellent tutoriel couvrant les deux cas: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating -Android-bouton-avec-image-et-texte-utilisant-relatif-layout.aspx

593
OneWorld

Il existe une bien meilleure solution à ce problème.

Prenez juste un Button normal et utilisez les attributs drawableLeft et gravity.

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

De cette façon, vous obtenez un bouton qui affiche une icône à gauche du bouton et le texte à droite de l’icône vertical centré.

335
schlingel

enter image description here

     <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" />
64
Dhina k

Utilisez simplement un LinearLayout et prétendez que c'est un Button - paramètre background et cliquable est la clé:

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

il suffit de remplacer

Android:background="@drawable/icon"

avec

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

izz un très bon truc ..;)

43
CMA

J'ai adopté une approche différente de celle énoncée ici, et cela fonctionne très bien, alors je voulais la partager.

J'utilise un style pour créer un bouton personnalisé avec une image à gauche et un texte au centre à droite. Suivez simplement les 4 "étapes faciles" ci-dessous:

I. Créez vos 9 correctifs en utilisant au moins 3 fichiers PNG différents et l’outil que vous avez à: /YOUR_OWN_PATH/Android-sdk-mac_x86/tools/./draw9patch. Après cela, vous devriez avoir:

button_normal.9.png, button_focused.9.png et button_pressed.9.png

Ensuite, téléchargez ou créez une icône PNG 24x24.

ic_your_icon.png

Tout enregistrer dans le dossier/de votre projet Android.

II. Créez un fichier XML appelé button_selector.xml dans votre projet sous le dossier /. Les états devraient être comme ceci:

<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. Accédez au dossier values ​​/, ouvrez ou créez le fichier styles.xml et créez le code XML suivant:

<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 est un "style enfant" car il étend ButtonNormalText (le "style parent").

Notez que, si vous modifiez drawableLeft dans le style ButtonNormalTextWithIcon en drawableRight, drawableTop ou drawableBottom, vous pouvez placer l’icône dans une autre position par rapport au texte.

IV Accédez au modèle/dossier dans lequel vous avez votre code XML pour l'interface utilisateur et cliquez sur le bouton auquel vous souhaitez appliquer le style et donnez-lui la forme suivante:

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

Et ... voilà! Vous avez votre bouton avec une image sur le côté gauche.

Pour moi, c'est la meilleure façon de le faire! En procédant ainsi, vous pouvez gérer la taille du texte du bouton séparément de l'icône que vous souhaitez afficher et utiliser le même fond pouvant être dessiné pour plusieurs boutons avec des icônes différentes respectant les Android Directives d'utilisation de l'interface utilisateur à l'aide de styles.

Vous pouvez également créer un thème pour votre application et y ajouter le "style parent" afin que tous les boutons se ressemblent et appliquer le "style enfant" avec l'icône uniquement là où vous en avez besoin.

21
Oscar S.
 <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"         
        />
12
Salman Khursheed Khaleeqi

Vous pouvez utiliser drawableTop (ainsi que drawableLeft, etc.) pour l'image et définir le texte en dessous de l'image en ajoutant le paramètre gravityleft|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" />
11
Kalai.G

J'espère que ma solution conviendra probablement à beaucoup d'utilisateurs.

Ce que je propose, c'est de créer TextView avec votre style. Cela fonctionne parfaitement pour moi et possède toutes les fonctionnalités, comme un bouton.

Tout d’abord, créons un style de bouton que vous pouvez utiliser partout ... Je crée 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>

Deuxièmement, permet de créer un bouton de visualisation de texte.

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

Et c'est un résultat. Style ensuite votre bouton personnalisé avec des couleurs ou d'autres propriétés et marges. Bonne chance

enter image description here

7
Jevgenij Kononov

Mise à jour importante

N'utilisez pas Android:drawableLeft etc etc ... avec un vecteur extractible, sinon cela planterait dans les versions inférieures de l'API . (Je l'ai affronté dans l'application en direct)

Pour vecteur dessinable

Si vous utilisez un vecteur drawable, alors vous devez

  • Avez-vous migré vers AndroidX? sinon, vous devez d'abord migrer vers AndroidX. C'est très simple, voyez qu'est-ce qu'androidx et comment migrer?

  • Il a été publié dans la version 1.1.0-alpha01 , donc la version de appcompat doit être au moins 1.1.0-alpha01. La dernière version actuelle est 1.1.0-alpha02, utilisez les dernières versions pour une meilleure fiabilité. Consultez les notes de version - lien .

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

  • Utilisez AppCompatTextView/AppCompatButton/AppCompatEditText

  • Utilisez app:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompat et app:drawableEndCompat

Pour tirable régulier

Si vous n'avez pas besoin de vector drawable, alors vous pouvez

  • utilisez Android:drawableLeft, Android:drawableRight, Android:drawableBottom, Android:drawableTop
  • Vous pouvez utiliser les classes TextView, Button & EditText ou AppCompat ordinaires.

Vous pouvez obtenir la sortie comme ci-dessous -

output

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

6
Sam

Ce code fonctionne parfaitement pour moi

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

Vous pouvez utiliser ceci:

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

en ce que j'ai mis une image comme background et aussi ajouté du texte ..!

0
jigar