Aggiungere pulsanti all'app

Prova la modalità Scrivi
Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come aggiungere componenti in Compose.

Un pulsante è costituito da testo, da un'icona o da entrambi che comunica l'azione che si verifica quando l'utente lo tocca.

Puoi creare un pulsante nel layout in tre modi, a seconda che tu voglia un pulsante con testo, un'icona o entrambi:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

Il codice precedente genera qualcosa di simile al seguente:

Un&#39;immagine che mostra tre tipi di pulsanti
Figura 1. Tre stili di pulsanti.

Rispondere agli eventi di clic

Quando l'utente tocca un pulsante, l'oggetto Button riceve un evento al clic.

Per dichiarare il gestore di eventi in modo programmatico, crea un oggetto View.OnClickListener e assegnalo al pulsante chiamando setOnClickListener(View.OnClickListener), come nell'esempio seguente:

Kotlin

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Java

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

Definisci lo stile del pulsante

L'aspetto del pulsante (l'immagine di sfondo e il carattere) varia da un dispositivo all'altro, poiché i dispositivi di produttori diversi spesso hanno stili predefiniti diversi per i controlli di input.

Per personalizzare singoli pulsanti con uno sfondo diverso, specifica l'attributo android:background con una risorsa di disegno o colore. In alternativa, puoi applicare uno stile per il pulsante, che funziona in modo simile agli stili HTML, in modo da definire più proprietà di stile come sfondo, carattere e dimensione. Per ulteriori informazioni sull'applicazione di stili, consulta Stili e temi.

Pulsante senza bordo

Un design che può essere utile è un pulsante "senza bordi". I pulsanti senza bordi assomigliano a pulsanti di base, ad eccezione del fatto che non hanno bordi o sfondo, ma cambiano aspetto in base ai diversi stati, ad esempio quando vengono toccati.

Per creare un pulsante senza bordi, applica lo stile borderlessButtonStyle al pulsante, come nell'esempio seguente:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

Sfondo personalizzato

Se vuoi ridefinire l'aspetto del pulsante, puoi specificare uno sfondo personalizzato. Tuttavia, invece di fornire una semplice bitmap o un colore, lo sfondo deve essere una risorsa di elenco di stati che cambia l'aspetto in base allo stato attuale del pulsante.

Puoi definire l'elenco degli stati in un file XML che definisce tre immagini o colori da utilizzare per i diversi stati del pulsante.

Per creare un elenco di stati disegnabile per lo sfondo del pulsante:

  1. Crea tre bitmap per lo sfondo del pulsante che rappresentano gli stati predefiniti, toccati e con lo stato attivo del pulsante. Per assicurarti che le immagini si adattino a pulsanti di varie dimensioni, crea bitmap come bitmap 9-patch.
  2. Inserisci i bitmap nella directory res/drawable/ del progetto. Assegna a ogni bitmap un nome che rifletta lo stato del pulsante che rappresenta, ad esempio button_default.9.png, button_pressed.9.png e button_focused.9.png.
  3. Crea un nuovo file XML nella directory res/drawable/. Assegna un nome, ad esempio button_custom.xml. Inserisci un codice XML come il seguente:
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/button_pressed"
              android:state_pressed="true" />
        <item android:drawable="@drawable/button_focused"
              android:state_focused="true" />
        <item android:drawable="@drawable/button_default" />
    </selector>
    

    Definisce una singola risorsa disegnabile che cambia l'immagine in base allo stato attuale del pulsante.

    • Il primo <item> definisce la bitmap da utilizzare quando si tocca il pulsante (attivato).
    • Il secondo <item> definisce la bitmap da utilizzare quando il pulsante è attivo, ad esempio quando il pulsante viene evidenziato utilizzando la trackball o il pad direzionale.
    • Il terzo <item> definisce la bitmap da utilizzare quando il pulsante è nello stato predefinito, né toccato né attivo.

    Questo file XML rappresenta una singola risorsa disegnabile. Quando lo sfondo fa riferimento a un elemento Button, l'immagine visualizzata cambia in base allo stato del pulsante.

  4. Applica il file XML disegnabile come sfondo del pulsante:
    <Button
        android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage"
        android:background="@drawable/button_custom"  />
    

Per ulteriori informazioni sulla sintassi XML, incluso come definire un pulsante disattivato, sottoposto al passaggio del mouse o in un altro stato, leggi le informazioni su StateListDrawable.