Le Tutoriel de Android SnackBar

Android Snackbar
Example de Snackbar
Example de Snackbar (+CoordinatorLayout)

1. Android Snackbar

Android Snackbar est un petit composant d'interface qui fournit une réponse brève après une action de l'utilisateur, il apparaît en bas (bottom) de l'écran et disparaît automatiquement une fois le temps écoulé ou disparaît. prend lorsque l'utilisateur interagit ailleurs sur l'écran.

Snackbar fournit également un bouton en option pour effectuer une action. Par exemple, annulez une action qui vient d'être exécutée (undo) ou réessayez l'action exécutée en cas d'échec.

Snackbar with action button

Snackbar snackbar = Snackbar
        .make(baseView, "Message is deleted", Snackbar.LENGTH_LONG)
        .setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Show another Snackbar.
                Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                snackbar1.show();
            }
        });

snackbar.show();

Snackbar n'est pas disponible dans le Android SDK, vous devez donc déclarer cette bibliothèque dans build.gradle (Module app):

build.gradle (Module: app)

...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}

Et consultez la nouvelle version ici:

https://mvnrepository.com/artifact/com.google.android.material/material

2. Example de Snackbar

OK, nous allons maintenant créer un portefeuille de projet simple en utilisant Snackbar. Pour des applications plus sophistiquées avec la participation de Snackbar, FloatingActionButton, .. vous devez utiliser CoordinatorLayout. (Voir le deuxième exemple.)

Exemple d'aperçu:

Snackbar (Default)

Snackbar with action button

Snackbar (Styling)

OK, sur Android Studio, créez un projet:

File > New > New Project > Empty Activity
- Name: SnackbarExample
- Package name: org.o7planning.snackbarexample
- Language: Java

Comme mentionné ci-dessus, Snackbar n'est pas disponible dans le Android SDK, vous devez donc déclarer la bibliothèque suivante dans votre projet:

build.gradle (Module: app)

...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}

L'interface de l'application:

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Default)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar with action button"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Styling)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.snackbarexample;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

    private View baseView;

    private Button button1;
    private Button button2;
    private Button button3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Container
        this.baseView = this.findViewById(R.id.constraintLayout);

        this.button1 = (Button) this.findViewById(R.id.button1);
        this.button2 = (Button) this.findViewById(R.id.button2);
        this.button3 = (Button) this.findViewById(R.id.button3);

        this.button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarDefault();
            }
        });
        this.button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarActionCall();
            }
        });
        this.button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarCustom();
            }
        });
    }

    private void showSnackbarDefault()  {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Install successful!", Snackbar.LENGTH_LONG);
        // Show
        snackbar.show();
    }

    private void showSnackbarActionCall() {

        Snackbar snackbar = Snackbar
                .make(this.baseView, "Message is deleted", Snackbar.LENGTH_LONG)
                .setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // Show another Snackbar.
                        Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                        snackbar1.show();
                    }
                });

        snackbar.show();
    }


    private void showSnackbarCustom() {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Try again!", Snackbar.LENGTH_LONG)
                .setAction("RETRY", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                    }
                });
        snackbar.setActionTextColor(Color.RED);
        View sbView = snackbar.getView();
        TextView textView = sbView.findViewById(com.google.android.material.R.id.snackbar_text);
        textView.setTextColor(Color.YELLOW);
        // Align center.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
            textView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
        } else {
            textView.setGravity(Gravity.CENTER_HORIZONTAL);
        }
        // Show Sneckbar
        snackbar.show();
    }
}

3. Example de Snackbar (+CoordinatorLayout)

Pour une application complexe et participative de Snackbar, FloatingActionButton, ... vous devez utiliser CoordinatorLayout, cela permet d'éviter le chevauchement de Snackbar et FloatingActionButton.

En utilisant Snackbar, FloatingActionBar avec CoordinatorLayout vous aide à avoir une interface fluide, éliminant les chevauchements (overlap).

Voir l'article plus détaillé sur CoordinatorLayout:
Le Tutoriel de Android CoordinatorLayout

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android SnackBar

1. Android Snackbar

2. Example de Snackbar

3. Example de Snackbar (+CoordinatorLayout)

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents