Pulsante Android con icona e testo


92

Ho alcuni pulsanti come questo nella mia app:

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

Sto cercando di creare uno stesso pulsante con testo e un'icona. android: drawableLeft non funziona per me (forse lo farebbe, ma non so come impostare un'altezza massima per l'icona).

Quindi ho creato un LinearLayout con ImageView e TextView e l'ho fatto agire come un pulsante:

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

Il mio nuovo pulsante è esattamente quello che voglio (dimensione del carattere, icona e posizionamento del testo). Ma non sembra i miei pulsanti predefiniti:

inserisci qui la descrizione dell'immagine

Quindi ho provato a cambiare lo sfondo e il colore del testo del mio nuovo Button:

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());

Questo dà uno strano risultato, il mio vecchio pulsante, si incasina:

inserisci qui la descrizione dell'immagine

Quando cambio l'ordine di questi due pulsanti nell'XML, quindi il "nuovo pulsante" va per primo, produce un altro strano risultato:

inserisci qui la descrizione dell'immagine

Ora ho notato che quando provo a premere il vecchio pulsante, viene premuto quello nuovo.

Qualche idea?

Risposte:


283

Prova questo.

<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
Sembra esattamente come lo voglio, ma voglio usare le mie icone, non quelle predefinite di Android. Le mie icone sono di dimensioni maggiori. Ciò significa che devo creare bitmap più piccoli per ogni risoluzione? C'è qualche parametro che mi permette di controllare la dimensione dell'icona?
Dusan

È corretto. È necessario creare immagini di dimensioni diverse per ogni risoluzione
Liem Vo

Ok, grazie per il tuo aiuto, ma ora ho un'altra domanda ... Le mie icone sono chiare, perché il testo è bianco su un pulsante scuro, come puoi vedere nelle immagini nella mia domanda. L'app è impostata per utilizzare un tema disponibile nella versione Android. I miei esempi provengono da Android 4.3. Quando l'app viene eseguita su Android 2.3.3, i pulsanti predefiniti sono chiari con testo scuro. Un po 'qualcosa come il pulsante sulla mia prima immagine. C'è un modo per fornire una bitmap alternativa per l'icona in esecuzione su dispositivi meno recenti. Spero che tu abbia capito la mia domanda :)
Dusan

Questa è una bella domanda. Puoi definire uno stile diverso per la tua icona, uno stile più fresco per ogni livello API (significa versione del sistema operativo Android). Puoi vedere le cartelle values-v11, values-v14.
Liem Vo

2
Puoi anche aggiungere il riempimento all'icona android: drawablePadding = ""
Asad Mirza

15

Per aggiungere un'immagine a sinistra, a destra, in alto o in basso, puoi utilizzare attributi come questo:

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

Il codice di esempio è fornito sopra. Puoi anche ottenere ciò utilizzando il layout relativo.


Come faccio a farlo in modo programmatico
Sujay UN

1
Potresti dire android:drawableStartinvece di Sinistra e android:drawableEndinvece di Destra.
Simão Garcia

@ SimãoGarcia * dovrebbe. L'inizio dovrebbe sostituire a destra e la fine dovrebbe sostituire a sinistra in tutti i punti. Questo per garantire che la lettura da destra a sinistra e la lettura da sinistra a destra siano disponibili poiché alcuni altri paesi leggono in modo diverso.
Carson J.

11

Per chiunque cerchi di farlo dinamicamente setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom), l'oggetto pulsanti aiuterà.

Campione

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

5
L'utilizzo di setCompoundDrawables non si rifletteva sull'interfaccia utente. Ho usato setCompoundDrawablesWithIntrinsicBounds invece, e ha funzionato.
Aldo

5

Questo è quello che vuoi veramente.

<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

È possibile utilizzare la libreria dei MaterialButtoncomponenti dei materiali e il componente.
Usa gli attributi app:icone app:iconGravity="start".

Qualcosa di simile a:

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

inserisci qui la descrizione dell'immagine


Nota che se hai un tema di material design per la tua app, il widget Button standard viene gonfiato automaticamente come MaterialButton. Per here - material.io/develop/android/components/buttons
dodgy_coder

2

La risposta di @Liem Vo è corretta se stai usando android.widget.Button senza alcun override. Se stai sovrascrivendo il tuo tema usando MaterialComponents, questo non risolverà il problema.

Quindi se lo sei

  1. Utilizzando com.google.android.material.button.MaterialButton o
  2. Sostituzione di AppTheme utilizzando MaterialComponents

Usa app: parametro icona .

<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" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.