Bouton Android avec icône et texte


92

J'ai quelques boutons comme celui-ci dans mon application:

    <Button
        android:id="@+id/bSearch"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Search"
        android:textSize="24sp" />

J'essaye de créer un même bouton avec du texte et une icône. android: drawableLeft ne fonctionne pas pour moi (peut-être que ça le ferait, mais je ne sais pas comment définir une hauteur maximale pour l'icône).

J'ai donc créé un LinearLayout avec un ImageView et un TextView et l'ai fait agir comme un bouton:

    <LinearLayout
        android:id="@+id/bSearch2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_default"
        android:clickable="true"
        android:padding="16dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:adjustViewBounds="true"
            android:maxHeight="30dp"
            android:maxWidth="30dp"
            android:scaleType="fitCenter"
            android:src="@drawable/search_icon" />

        <TextView
            android:id="@+id/tvSearchCaption"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textSize="24sp"
            android:paddingRight="30dp"
            android:gravity="center"
            android:text="Search" />
    </LinearLayout>

Mon nouveau bouton est exactement ce que je veux (taille de police, icône et placement du texte). Mais cela ne ressemble pas à mes boutons par défaut:

entrez la description de l'image ici

J'ai donc essayé de changer l'arrière-plan et la couleur du texte de mon nouveau bouton:

Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());

Cela donne un résultat étrange, mon ancien bouton, est foiré:

entrez la description de l'image ici

Lorsque je change l'ordre de ces deux boutons dans le XML, donc le "nouveau bouton" passe en premier, cela fait un autre résultat étrange:

entrez la description de l'image ici

Maintenant, j'ai remarqué que lorsque j'essaye d'appuyer sur l'ancien bouton, le nouveau est pressé.

Des idées?

Réponses:


283

Essaye celui-là.

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:textSize="24sp"/>

3
Cela ressemble exactement à ce que je veux, mais je veux utiliser mes propres icônes, pas celles d'Android par défaut. Mes icônes sont de plus grande taille. Cela signifie-t-il que je dois créer des bitmaps plus petits pour chaque résolution? Y a-t-il un paramètre qui me permet de contrôler la taille de l'icône?
Dusan

C'est correct. Vous devez créer une taille d'image différente pour chaque résolution
Liem Vo

Ok, merci pour votre aide, mais maintenant j'ai une autre question ... Mes icônes sont claires, car le texte est blanc sur un bouton sombre, comme vous pouvez le voir dans les images de ma question. L'application est configurée pour utiliser un thème disponible dans la version Android. Mes exemples proviennent d'Android 4.3. Lorsque l'application s'exécute sur Android 2.3.3, les boutons par défaut sont clairs avec du texte sombre. Un peu quelque chose comme le bouton sur ma première image. Existe-t-il un moyen de fournir une image bitmap alternative pour l'icône fonctionnant sur des appareils plus anciens? J'espère que vous comprenez ma question :)
Dusan

Voilà une bonne question. Vous pouvez définir un style différent pour votre icône, un style plus frais pour chaque niveau d'API (cela signifie la version Android OS). Vous pouvez voir les dossiers values-v11, values-v14.
Liem Vo

2
Vous pouvez également ajouter un remplissage à l'icône android: drawablePadding = ""
Asad Mirza

15

Pour ajouter une image à gauche, à droite, en haut ou en bas, vous pouvez utiliser des attributs comme celui-ci:

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

L'exemple de code est donné ci-dessus. Vous pouvez également y parvenir en utilisant une disposition relative.


Comment faire cela par programme
Sujay UN

1
Vous pourriez dire android:drawableStartau lieu de Gauche et android:drawableEndau lieu de Droite.
Simão Garcia

@ SimãoGarcia * devrait. Le début doit remplacer la droite et la fin doit remplacer la gauche à tous les endroits. Ceci permet de garantir que la lecture de droite à gauche ainsi que la lecture de gauche à droite sont disponibles puisque certains autres pays lisent différemment.
Carson J.

11

Pour tous ceux qui cherchent à le faire de manière dynamique setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom), l'objet boutons aidera.

Échantillon

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawables('your_drawable',null,null,null);

5
L'utilisation de setCompoundDrawables ne reflétait pas l'interface utilisateur. Utilisé setCompoundDrawablesWithIntrinsicBounds à la place, et cela a fonctionné.
Aldo

5

C'est ce que tu veux vraiment.

<Button
       android:id="@+id/settings"
       android:layout_width="190dp"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal"
       android:background="@color/colorAccent"
       android:drawableStart="@drawable/ic_settings_black_24dp"
       android:paddingStart="40dp"
       android:paddingEnd="40dp"
       android:text="settings"
       android:textColor="#FFF" />

4

Vous pouvez utiliser la bibliothèque de composants de matériaux et le MaterialButtoncomposant.
Utilisez le app:iconetapp:iconGravity="start" attributs .

Quelque chose comme:

  <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="start"
        ../>

entrez la description de l'image ici


Notez que si vous avez un thème de conception matérielle pour votre application, le widget Button standard est automatiquement gonflé en tant que MaterialButton. Par ici - material.io/develop/android/components/buttons
dodgy_coder

2

La réponse de @Liem Vo est correcte si vous utilisez android.widget.Button sans aucun remplacement. Si vous remplacez votre thème à l'aide de MaterialComponents, cela ne résoudra pas le problème.

Donc si tu es

  1. Utilisation de com.google.android.material.button.MaterialButton ou
  2. Remplacer AppTheme à l'aide de MaterialComponents

Utiliser l' application: paramètre d' icône .

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:textSize="24sp"
    app:icon="@android:drawable/ic_menu_search" />
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.