Android Studio - SnackBar

Quando utilizziamo le app sui nostri dispositivi abbiamo notato un messaggio che appare in fondo allo schermo il quale ci informa dell'azione che viene eseguita, ad esempio in Gmail quando eliminiamo una mail ci informa che è stata eliminata e c'è anche un pulsante per annullare l'operazione.

Questo messaggio si chiama SnackBar.
La SnackBar è un messaggio che a differenza del Toast può essere personalizzato in base alle proprie esigenze, come ad esempio il colore dello sfondo, il colore del testo e visualizzare o meno un pulsante per eseguire una determinata funzione. La SnackBar è visualizzata in fondo allo schermo e la sua costruzione è un po più complessa rispetto al Toast.

Per prima cosa occorre che il nostro Layout sia di tipo ScrollView e gli sia assegnato un id.
Quindi ad esempio il file activity_main.xml deve essere così composto

	<?xml version="1.0" encoding="utf-8"?>
	<android.support.constraint.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">
	<ScrollView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:id="@+id/root_layout">
	</ScrollView>
	</android.support.constraint.ConstraintLayout>

view raw SB_activity_main.xml hosted with ❤ by GitHub

Alla riga 11 viene impostato l' id del Layout ScrollView: questo servirà per far funzionare la SnackBar
Tra la riga 12 e 14 inserire tutti gli elementi della nostra app
Una volta creato il layout passare alla programmazione in Kotlin

Dichiarazione della SnackBar

	//dichiarazione della variabile SnackBar
	var snackBar: Snackbar? = null

view raw snackbar0.kt hosted with ❤ by GitHub

ESEMPIO 1:

	//visualizzazione di un messaggio nella SnackBar di breve durata (LENGTH_SHORT)
	//questo messaggio nella SnackBar verrà visualizzato con la grafica predefinita
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar di breve durata",Snackbar.LENGTH_SHORT )
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar1.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di breve durata

---

ESEMPIO 2:

	//visualizzazione di un messaggio nella SnackBar di lunga durata (LENGTH_LONG)
	//questo messaggio nella SnackBar verrà visualizzato con la grafica predefinita
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar di lunga durata",Snackbar.LENGTH_LONG )
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar2.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata

---

Gli esempi 1 e 2 presentano una costruzione molto simile al Toast. Nei prossimi esempi vediamo come personalizzare al meglio la SnackBar

---

ESEMPIO 3:

	//questo messaggio nella SnackBar verrà visualizzato con un pulsante che permette di eseguire una determinata funzione
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("OK", View.OnClickListener {
	//inserire il codice che deve essere eseguito quando si preme il pulsante
	//all'interno della SnackBar
	Toast.makeText(this, "Hai premuto il tasto OK della SnackBar", Toast.LENGTH_SHORT).show()
	})
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar3.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata con un pulsante che esegue una determinata funzione (in questo esempio visualizza un messaggio Toast che sta ad indicare che abbiamo premuto quel pulsante, ma è possibile inserire qualsiasi funzione che si desidera)

Cliccando sul pulsante viene eseguita una funzione

---

ESEMPIO 4:

	//questo messaggio nella SnackBar verrà visualizzato con un pulsante chiudi
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante chiudi",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar4.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata con un pulsante che permette di chiudere la SnackBar

---

ESEMPIO 5:

	//questo messaggio nella SnackBar verrà visualizzato con un pulsante chiudi colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante chiudi colorato con colore primario",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//impostazione del colore del pulsante
	snackBar!!.setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar5.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata con un pulsante che permette di chiudere la SnackBar colorato in modo diverso dall'esempio precedente

---

ESEMPIO 6:

	//questo messaggio nella SnackBar verrà visualizzato colorato e con un pulsante chiudi colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar colorato 'Accent' e pulsante chiudi colorato con colore primario",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//impostazione del colore del pulsante
	snackBar!!.setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
	//impostazione del colore del testo
	val view = snackBar!!.view
	val text = view.findViewById<TextView>(android.support.design.R.id.snackbar_text)
	text.setTextColor(ContextCompat.getColor(this, R.color.colorAccent))
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar6.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata con testo colorato in modo diverso dall'esempio precedente ed un pulsante che permette di chiudere la SnackBar

---

ESEMPIO 7:

	//questo messaggio nella SnackBar verrà visualizzato colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar colorato in giallo",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	//impostazione del colore del testo
	val view = snackBar!!.view
	val text = view.findViewById<TextView>(android.support.design.R.id.snackbar_text)
	text.setTextColor(Color.YELLOW)
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar7.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di lunga durata con testo colorato in giallo

Alla riga 8 è possibile inserire questi colori:

	//colore testo: nero
	text.setTextColor(Color.BLACK)

view raw snackbar7_color1_bk.kt hosted with ❤ by GitHub

	//colore testo: blu
	text.setTextColor(Color.BLUE)

view raw snackbar7_color1_bl.kt hosted with ❤ by GitHub

	//colore testo: azzurro
	text.setTextColor(Color.CYAN)

view raw snackbar7_color1_cy.kt hosted with ❤ by GitHub

	//colore testo: grigio scuro
	text.setTextColor(Color.DKGRAY)

view raw snackbar7_color1_dg.kt hosted with ❤ by GitHub

	//colore testo: verde
	text.setTextColor(Color.GREEN)

view raw snackbar7_color1_gr.kt hosted with ❤ by GitHub

	//colore testo: grigio
	text.setTextColor(Color.GRAY)

view raw snackbar7_color1_gy.kt hosted with ❤ by GitHub

	//colore testo: grigio chiaro
	text.setTextColor(Color.LTGRAY)

view raw snackbar7_color1_lg.kt hosted with ❤ by GitHub

	//colore testo: magenta
	text.setTextColor(Color.MAGENTA)

view raw snackbar7_color1_mg.kt hosted with ❤ by GitHub

	//colore testo: rosso
	text.setTextColor(Color.RED)

view raw snackbar7_color1_rd.kt hosted with ❤ by GitHub

	//colore testo: trasparente
	text.setTextColor(Color.TRANSPARENT)

view raw snackbar7_color1_tr.kt hosted with ❤ by GitHub

	//colore testo: bianco
	text.setTextColor(Color.WHITE)

view raw snackbar7_color1_wh.kt hosted with ❤ by GitHub

	//colore testo: giallo
	text.setTextColor(Color.YELLOW)

view raw snackbar7_color1_yw.kt hosted with ❤ by GitHub

Oppure la riga 8 può essere sostituita con questa riga di codice in modo da inserire il colore con il codice RGB in modo da personalizzare al meglio la grafica del testo

	//colore del testo con codice RGB
	text.setTextColor(Color.rgb(255, 128, 192))

view raw snackbar7_color2.kt hosted with ❤ by GitHub

Vedi come creare il codice RGB

---

ESEMPIO 8:

	//questo messaggio lungo lungo nella SnackBar
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar della durata di 10 secondi",Snackbar.LENGTH_LONG )
	//impostazione della durata di visualizzazione 10000 millisecondi = 10 secondi
	snackBar!!.setDuration(10000);
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar8.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio di della durata di 10 secondi

---

ESEMPIO 9:

	//questo messaggio lungo lungo nella SnackBar
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con sfondo colorato",Snackbar.LENGTH_LONG )
	//impostazione dello sfondo
	val view = snackBar!!.view
	view.setBackgroundColor(Color.GRAY)
	//visualizzazione SnackBar
	snackBar!!.show()

view raw snackbar9.kt hosted with ❤ by GitHub

In questo caso viene visualizzato un messaggio con colore sfondo diverso dallo standard

Anche per lo sfondo della SnackBar è possibile alla riga 6 inserire i colori

	//colore sfondo: nero
	view.setBackgroundColor(Color.BLAK)

view raw snackbar9_color1_bk.kt hosted with ❤ by GitHub

	//colore sfondo: blu
	view.setBackgroundColor(Color.BLUE)

view raw snackbar9_color1_bl.kt hosted with ❤ by GitHub

	//colore sfondo: azzurro
	view.setBackgroundColor(Color.CYAN)

view raw snackbar9_color1_cy.kt hosted with ❤ by GitHub

	//colore sfondo: grigio scuro
	view.setBackgroundColor(Color.DKGRAY)

view raw snackbar9_color1_dg.kt hosted with ❤ by GitHub

	//colore sfondo: verde
	view.setBackgroundColor(Color.GREEN)

view raw snackbar9_color1_gr.kt hosted with ❤ by GitHub

	//colore sfondo: grigio
	view.setBackgroundColor(Color.GRAY)

view raw snackbar9_color1_gy.kt hosted with ❤ by GitHub

	//colore sfondo: grigio chiaro
	view.setBackgroundColor(Color.LTGRAY)

view raw snackbar9_color1_lg.kt hosted with ❤ by GitHub

	//colore sfondo: magenta
	view.setBackgroundColor(Color.MAGENTA)

view raw snackbar9_color1_mg.kt hosted with ❤ by GitHub

	//colore sfondo: rosso
	view.setBackgroundColor(Color.RED)

view raw snackbar9_color1_rd.kt hosted with ❤ by GitHub

	//colore sfondo: trasparente
	view.setBackgroundColor(Color.TRANSPARENT)

view raw snackbar9_color1_tr.kt hosted with ❤ by GitHub

	//colore sfondo: bianco
	view.setBackgroundColor(Color.WHITE)

view raw snackbar9_color1_wh.kt hosted with ❤ by GitHub

	//colore sfondo: giallo
	view.setBackgroundColor(Color.YELLOW)

view raw snackbar9_color1_yw.kt hosted with ❤ by GitHub

oppure è possibile utilizzare questa riga di codice per utilizzare il codice colore RGB

	//colore dello sfondo con codice RGB
	view.setBackgroundColor(Color.rgb(120,203,0))

view raw snackbar9_color2.kt hosted with ❤ by GitHub

Vedi come creare il codice RGB

---

Esempio all'interno di MainActivity.kt

	package com.dm.tutorialsnackbar
	import android.content.res.ColorStateList //importazione della Classe: ColorStateList
	import android.graphics.Color //importazione della Classe: Color
	import android.support.v7.app.AppCompatActivity
	import android.os.Bundle
	import android.support.design.widget.Snackbar //importazione della CLasse: Sanckbar
	import android.support.v4.content.ContextCompat
	import android.view.View
	import android.widget.Button //importazione della CLasse: Button
	import android.widget.TextView //importazione della Classe: TextView
	import android.widget.Toast //importazione della CLasse: Toast
	import android.widget.Toast.* //importazione della Classe: Toast estesa
	import kotlinx.android.synthetic.main.activity_main.*
	class MainActivity : AppCompatActivity() {
	var myButton1: Button? = null
	var myButton2: Button? = null
	var myButton3: Button? = null
	var myButton4: Button? = null
	var myButton5: Button? = null
	var myButton6: Button? = null
	var myButton7: Button? = null
	var myButton8: Button? = null
	var myButton9: Button? = null
	//dichiarazione della variabile snackBar
	var snackBar: Snackbar? = null
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	myButton1 = findViewById(R.id.button1)
	myButton2 = findViewById(R.id.button2)
	myButton3 = findViewById(R.id.button3)
	myButton4 = findViewById(R.id.button4)
	myButton5 = findViewById(R.id.button5)
	myButton6 = findViewById(R.id.button6)
	myButton7 = findViewById(R.id.button7)
	myButton8 = findViewById(R.id.button8)
	myButton9 = findViewById(R.id.button9)
	button1.setOnClickListener{
	//visualizzazione di un messaggio nella SnackBar di breve durata (LENGTH_SHORT)
	//questo messaggio nella SnackBar verrà visualizzato con la grafica predefinita
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar di breve durata",Snackbar.LENGTH_SHORT )
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button2.setOnClickListener{
	//visualizzazione di un messaggio nella SnackBar di lunga durata (LENGTH_LONG)
	//questo messaggio nella SnackBar verrà visualizzato con la grafica predefinita
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar di lunga durata",Snackbar.LENGTH_LONG )
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button3.setOnClickListener{
	//questo messaggio nella SnackBar verrà visualizzato con un pulsante che permette di eseguire una determinata funzione
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("OK", View.OnClickListener {
	//inserire il codice che deve essere eseguito quando si preme il pulsante
	//all'interno della SnackBar
	Toast.makeText(this, "Hai premuto il tasto OK della SnackBar", Toast.LENGTH_SHORT).show()
	})
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button4.setOnClickListener{
	//questo messaggio nella SnackBar verrà visualizzato con un pulsante chiudi
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante chiudi",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button5.setOnClickListener{
	//questo messaggio nella SnackBar verrà visualizzato con un pulsante chiudi colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con pulsante chiudi colorato con colore primario",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//impostazione del colore del pulsante
	snackBar!!.setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button6.setOnClickListener{
	//questo messaggio nella SnackBar verrà visualizzato colorato e con un pulsante chiudi colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar colorato 'Accent' e pulsante chiudi colorato con colore primario",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	snackBar!!.setAction("Chiudi", View.OnClickListener {
	snackBar!!.dismiss() //chiude la SnackBar
	})
	//impostazione del colore del pulsante
	snackBar!!.setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
	//impostazione del colore del testo
	val view = snackBar!!.view
	val text = view.findViewById<TextView>(android.support.design.R.id.snackbar_text)
	text.setTextColor(ContextCompat.getColor(this, R.color.colorAccent))
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button7.setOnClickListener{
	//questo messaggio nella SnackBar verrà visualizzato colorato
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar colorato in giallo",Snackbar.LENGTH_LONG )
	//visualizzazione pulsante all'interno della SnackBar
	//impostazione del colore del testo
	val view = snackBar!!.view
	val text = view.findViewById<TextView>(android.support.design.R.id.snackbar_text)
	text.setTextColor(Color.YELLOW)
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button8.setOnClickListener{
	//questo messaggio lungo lungo nella SnackBar
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar della durata di 10 secondi",Snackbar.LENGTH_LONG )
	//impostazione della durata di visualizzazione 10000 millisecondi = 10 secondi
	snackBar!!.setDuration(10000);
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	button9.setOnClickListener{
	//questo messaggio lungo lungo nella SnackBar
	//root_layout è l'id della ScrollView
	snackBar = Snackbar.make(root_layout, "Messaggio nella SnackBar con sfondo colorato",Snackbar.LENGTH_LONG )
	//impostazione dello sfondo
	val view = snackBar!!.view
	view.setBackgroundColor(Color.GRAY)
	//visualizzazione SnackBar
	snackBar!!.show()
	}
	}
	}

view raw snackbar_full.kt hosted with ❤ by GitHub

Download Project
Download file APK

Visualizza differenza tra SnackBar e Toast cliccando qui