Dans ce tutoriel, nous allons découvrir le snackbar, un composant introduit dans le material design .Il est similaire au Toast à l’exception qu’il propose une action avec laquelle l’utilisateur pourra interagir.
Pour le material design, le snackbar est un remplacement au Toast.Si vous souhaitez donc complètement intégrer le material design dans votre application ,il est recommandé de l’utiliser au lieu d’utiliser un Toast.
Le snackbar est à présent disponible dans librairie des composants android et il fournit plusieurs méthodes pour facilement le personnaliser.
Un Snackbar s’affiche en base de l’écran et disparaît soit automatiquement après une certaine période soit après que que vous l’ayez glissé de l’écran.
Il sert surtout à fournir un Feedback sous la forme d’un message après une opération qui vient d’être effectué.Il offre aussi la possibilité d’exécuter une action avant qu’il disparaît, par exemple annuler une opération qui vient de se produire,ou réessayer une opération qui vient d’échouer.
Table des matières
La différence entre un snackbar et le Toast
- -Le vue d’un Toast peu être modifié et afficher partout sur l’écran par contre la vue d’un snackbar ne peut pas être modifié et il s’affichera toujours en bas de la fenêtre
- Un snackbar peut avoir optionnellement une action par contre un Toast ne l’a pas;
- Un snackbar peut être glissé par un utilisateur pour disparaître ce qui n’est pas le cas avec un Toast.
Point comment entre Toast et Snackbar
Le Toast et le snackbar disposent des constantes que nous pouvons utiliser pour définir la durant pendant laquelle ils s’afficherons.
- LENGTH_SHORT
- LENGTH_LONG
- LENGTH_INDEFINITE (uniquement disponible pour le snackbar).
Limitation du snackbar
Un snackbar fonctionne correctement si le parent de la vue dans laquelle il s’affiche est le CoordinatorLayout. Le CoordinatorLayout permet au snackbar de pouvoir communiquer avec d’autres widget et d’activer les comportements tel que la possibilité d’être glisser et disparaître ou de déplacer un bouton flottant lorsque qu’il souhaiterai s’afficher
Snackbar sans Action
Vous pouvez créer un snackbar qui affiche un message sans action à exécuter de la manière suivante
val snackbar :Snackbar = Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
snackbar.show() Snackbar snackbar= Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_SHORT);
snackbar.show(); make :Cette méthode prend trois paramètres dont une vue qui peut être le CoordinatorLayout ou un autre vue,puis le texte à afficher , et une durée pour afficher le snackbar pour (soit une durée prédéfini ou une durée en millisecondes).
Show:La méthode make crée uniquement le snackbar, elle ne le rend pas visible à l’écran. Pour afficher le snackbar, utilisez la méthode show sur l’instance Snackbar retournée. Notez qu’un seul snackbar sera affiché à la fois. Afficher un nouveau snackbar supprimera d’abord les précédents.
SnackBar avec une Action
Pour ajouter une action au snackbar, vous devez appeler la méthode setAction. Une action requière un texte à afficher pour représenter l’action et un OnClickListener pour géré le click sur l’action.Le Snackbar diaprait automatiquement dès que l’utilisateur clic sur l’action.
L’exemple suivant montre comment créer un snackbar avec une action.
val snackbar :Snackbar = Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", View.OnClickListener {
})
snackbar.show() Snackbar snackbar= Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_SHORT)
.setAction("Annuler", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.show(); Personnaliser un snackbar
Personnalisé la couleur du texte de l’action
La couleur du texte de l’action peut aussi être personnalisé via la méthode setActionTextColor. La couleur par défaut est la couleur accent de votre thème.
val snackbar :Snackbar = Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", View.OnClickListener {
})
snackbar.setActionTextColor(Color.WHITE)
snackbar.show() Snackbar snackbar= Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.WHITE);
snackbar.show(); Personnaliser la couleur d’arrière plan
Vous pouvez aussi personnaliser la couleur d’arrière plan du snackbar comme suit
val snackbar :Snackbar = Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", View.OnClickListener {
}) snackbar.setBackgroundTint(ContextCompat.getColor(applicationContext,R.color.colorPrimaryDark))
snackbar.show() Snackbar snackbar= Snackbar.make(constraintLayout,"Snackbar avec Action", Snackbar.LENGTH_LONG)
.setAction("Annuler", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setBackgroundTint(ContextCompat.getColor(getApplicationContext(),R.color.colorPrimaryDark));
snackbar.show(); Personnaliser le message textuel du snackbar
Vous pouvez personnaliser le message textuel du snackbar avec la méthode setTextColor de la manière suivante.
val snackbar :Snackbar = Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", View.OnClickListener {
})
snackbar.setTextColor(ContextCompat.getColor(applicationContext,R.color.colorAccent))
snackbar.show() Snackbar snackbar= Snackbar.make(coordinatorLayout,"Afficher le snackbar", Snackbar.LENGTH_LONG)
.setAction("Annuler", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setTextColor(ContextCompat.getColor(getApplicationContext(),R.color.colorAccent));
snackbar.show(); Exemple d’utilisation d’un snackbar
Etape 1: Créer un nouveau projet dans Android studio en allant sur File->New ->New Projet puis remplissez les champs nécessaire
Etape 2:Ouvrez le fichier build.gradle(Module app) puis ajouter les dépendance suivante
implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'com.google.android.material:material:1.1.0-alpha10'
Pour savoir comment utiliser la librairie des composants matériel dans votre projet,je vous recommande de lire ce tutoriel.
Etape 3:Ouvrez le ficher res/values/style.xml puis ajoutez le contenu suivant
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Etape 3: ouvrez le fichier res/layout/activity_main.xml et ajoutez le code suivant
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity">
<Button
android:id="@+id/btn"
android:text="Simple Snackbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:layout_marginBottom="8dp"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn2"
app:layout_constraintTop_toBottomOf="@id/btn"
app:layout_constraintStart_toStartOf="parent"
android:text="Snackbar avec action"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout> Etape 4:Ajoutez le code suivant dans le fichier src/MainActivity.java ou src/MainActivity.kt
package com.example.snackbarkotlin
import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.ContextCompat
import com.google.android.material.snackbar.Snackbar
class MainActivity : AppCompatActivity() {
private lateinit var constraintLayout: ConstraintLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
constraintLayout=findViewById(R.id.root)
val btn1:Button =findViewById(R.id.btn);
val btn2:Button=findViewById(R.id.btn2);
btn1.setOnClickListener {
val snackbar :Snackbar = Snackbar.make(constraintLayout,"Simple Snackbar", Snackbar.LENGTH_LONG)
snackbar.setBackgroundTint(ContextCompat.getColor(applicationContext,R.color.colorPrimaryDark))
snackbar.show()
}
btn2.setOnClickListener {
val snackbar :Snackbar = Snackbar.make(constraintLayout,"Snackbar avec Action", Snackbar.LENGTH_LONG)
.setAction("Annuler", View.OnClickListener {
})
snackbar.setActionTextColor(Color.WHITE)
snackbar.setTextColor(ContextCompat.getColor(applicationContext,R.color.colorAccent))
snackbar.show()
}
}
}
package com.example.snackbarjava;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.core.content.ContextCompat;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.button.MaterialButton;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
ConstraintLayout constraintLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
constraintLayout=findViewById(R.id.root);
Button btn1=findViewById(R.id.btn);
Button btn2=findViewById(R.id.btn2);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar snackbar= Snackbar.make(constraintLayout,"Simple Snackbar", Snackbar.LENGTH_LONG);
snackbar.setBackgroundTint(ContextCompat.getColor(getApplicationContext(),R.color.colorPrimaryDark));
snackbar.show();
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar snackbar= Snackbar.make(constraintLayout,"Snackbar avec Action", Snackbar.LENGTH_LONG)
.setAction("Annuler", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.WHITE);
snackbar.setTextColor(ContextCompat.getColor(getApplicationContext(),R.color.colorAccent));
snackbar.show();
}
});
}
}
Exécutez ensuite l’application puis cliquez sur les boutons qui s’affiche dans la fenêtre de l’application pour afficher le Snackbar.
Résultat du bouton « simple snackbar »
Résultat du bouton « snackbar avec action »
Autres ressources
https://material.io/components/snackbars/
https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar
Conclusion
Nous sommes à la fin de ce tutoriel dans lequel nous avons appris à comment uutiliser le snackbar, j’espère que ce tutoriel vous aidera à utiliser un snackbar dans un prochain tutoriel.
Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.
