Aggiungere pulsanti all'app

Prova Compose

Jetpack Compose è il toolkit UI consigliato per Android. Scopri come aggiungere componenti in Compose.

Pulsante →

Un pulsante è costituito da testo, un'icona o entrambi, che comunicano 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 un risultato simile al seguente:

Rispondere agli eventi di clic

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

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

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

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

Applicare uno stile al pulsante

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

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

Pulsante senza bordi

Un design che può essere utile è un pulsante "senza bordi". I pulsanti senza bordi assomigliano ai pulsanti di base, tranne per il fatto che non hanno bordi o sfondo, ma cambiano comunque aspetto durante i 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 completamente l'aspetto del pulsante, puoi specificare uno sfondo personalizzato. Tuttavia, anziché fornire una semplice bitmap o un colore, lo sfondo deve essere una risorsa di elenco di stati che cambia aspetto a seconda dello stato attuale del pulsante.

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

Per creare una risorsa drawable di elenco di stati per lo sfondo del pulsante:

1. Crea tre bitmap per lo sfondo del pulsante che rappresentano gli stati predefinito, toccato e con stato attivo del pulsante. Per assicurarti che le immagini si adattino a pulsanti di varie dimensioni, crea le bitmap come bitmap a nove patch.
2. Inserisci le 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/. Assegnagli un nome come button_custom.xml. Inserisci un codice XML simile al 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>

   Questo definisce una singola risorsa disegnabile che cambia immagine in base allo stato attuale del il pulsante.

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

   Questo file XML rappresenta una singola risorsa disegnabile. Quando viene fatto riferimento a un Button per lo sfondo, 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 saperne di più su questa sintassi XML, incluso come definire un pulsante disattivato, su cui è stato passato il mouse o in un altro stato, consulta StateListDrawable.