Question Android: combiner texte et image sur un bouton ou ImageButton


J'essaie d'avoir une image (en arrière-plan) sur un bouton et d'ajouter dynamiquement, 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 attributs XML similaires tels que définis ici.

Cependant, ces attributs ne combinent que du texte et de l'image en dimensions x et y, ce qui signifie que je peux dessiner une image autour de mon texte, mais pas en dessous / sous mon texte (l'axe z étant défini comme sortant de l'écran).

Des suggestions sur la façon de procéder? Une idée serait soit d'étendre Button ou ImageButton et remplacer le draw()-méthode. 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 pointeurs pour commencer?


485
2017-10-07 16:56


origine


Réponses:


Tu peux 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 cherchez quelque chose de similaire en XML, il y a: android:background attribut qui fonctionne de la même manière.


192
2017-10-07 17:35



Pour les utilisateurs qui veulent simplement mettre en arrière-plan, icône-image et texte en un  Button à partir de fichiers différents: définir sur un Button arrière-plan, drawableTop / Bottom / Rigth / gauche et rembourrage les attributs.

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

Didacticiel: Excellent tutoriel qui couvre les deux cas: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx


562
2017-09-17 09:48



Il y a une bien meilleure solution pour ce problème.

Prends juste une normale Button et utilisez le drawableLeft et le gravity les attributs.

<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 sur le côté gauche du bouton et le texte sur le bon site de l'icône centré vertical.


314
2018-05-14 09:31



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

57
2017-09-10 06:36



Il suffit d'utiliser un LinearLayout et prétendre que c'est un Button - réglage background et cliquable C'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>

46
2018-01-04 03:26



juste remplacer

android:background="@drawable/icon"

avec

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

izz un très bon truc ..;)


40
2018-05-24 09:11



J'ai adopté une approche différente de celles énoncées ici, et cela fonctionne très bien, alors je voulais le 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 patches 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

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

ic_your_icon.png

Enregistrez tout dans le dossier drawable / sur votre projet Android.

II. Créez un fichier XML appelé button_selector.xml dans votre projet sous le dossier / drawable. 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 ​​/ folder et 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, drawableRight, drawableTop ou drawableBottom, vous pouvez placer l'icône dans une autre position par rapport au texte.

IV. Allez dans la disposition / dossier où vous avez votre XML pour l'interface utilisateur et allez dans le bouton où vous voulez appliquer le style et le faire ressembler à ceci:

<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! car vous pouvez ainsi gérer la taille du texte du bouton séparément de l'icône que vous souhaitez afficher et utiliser le même dessin d'arrière-plan pour plusieurs boutons avec des icônes différentes respectant les directives d'interface utilisateur Android utilisant les 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.


20
2017-09-15 17:04