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

Question

J'essaie d'avoir une image (comme 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 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 seulement définir une image avec android:drawableBottom et des attributs XML similaires tels que définis ici .

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

Avez-vous des suggestions sur la manière de procéder ? Une idée serait d'étendre Button ou ImageButton et remplacer le draw() -de la méthode. Mais avec mon niveau actuel de connaissances, je ne sais pas vraiment comment faire (rendu 2D). Peut-être que quelqu'un ayant plus d'expérience connaît une solution ou au moins quelques pistes pour commencer ?

Answer 1

Pour les utilisateurs qui souhaitent simplement placer l'arrière-plan, l'image-icône et le texte en un seul endroit. Button à partir de différents fichiers : Définir sur un Button background, drawableTop/Bottom/Rigth/Left et rembourrage 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 (ou toute autre mise en page) et le rendre cliquable.

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

Answer 2

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

Prenez juste une normale Button et utiliser le drawableLeft et le gravity 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 côté droit de l'icône. vertical centré .

Answer 3

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 cherchez quelque chose de similaire en xml, il existe : android:background qui fonctionne de la même manière.

Answer 4

Il suffit d'utiliser un LinearLayout et de prétendre qu'il s'agit d'une Button - réglage 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>

Answer 5

remplacez simplement

android:background="@drawable/icon"

avec

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

C'est un bon truc ;)