Die Anleitung zu Android SnackBar

Android Snackbar
Das Beispiel vom Snackbar
Zum Beispiel: Snackbar (+CoordinatorLayout)

1. Android Snackbar

Android Snackbar ist eine kleine Interface-Komponente, die nach einer Benutzeraktion einer kurze Anwort liefert. Es wird am unteren Bildschirmrand angezeigt und verschwindet automatisch nach dem Timeout oder wenn der Benutzer an anderer Stelle auf dem Bildschirm interagiert.

Snackbar bietet auch ein Button als eine Option zur Ausführung einer Aktion. Zum Beispiel: Sie machen eine gerade ausgeführte Aktion rückgangig oder versuchen Sie erneut, die zuletzt ausgeführte Aktion auszuführen wenn sie fehlschlägt.

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 ist im Android SDK nicht verfügbar. Deshalb müssen Sie diese Bibliothek in build.gradle (Module app) deklarieren:

build.gradle (Module: app)

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

Und dann prüfen Sie die neuere Version hier aus:

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

2. Das Beispiel vom Snackbar

OK! Jetzt erstellen wir ein einfaches Projekt mit Snackbar. Falls es andere komplexere Anwendungen gibt, die Snackbar, FloatingActionButton usw. betreffen, sollten Sie CoordinatorLayout verwenden. (Weitere Informationen finden Sie im zweiten Beispiel.)

Schauen Sie das Beispiel vor:

Snackbar (Default)

Snackbar with action button

Snackbar (Styling)

OK, Auf Android Studio erstellen Sie ein Projekt:

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

Wie bereits erwähnt ist Snackbar nocth nicht im Android SDK verfügbar. Daher müssen Sie die folgende Bibliothek in Ihr Projekt deklarieren:

build.gradle (Module: app)

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

Die Interface der Anwendung sieht aus:

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. Zum Beispiel: Snackbar (+CoordinatorLayout)

Falls es eine komplexe Anwendung mit Snackbar, FloatingActionButton usw. gibt, sollten Sie CoordinatorLayout verwenden. Es hilft, die Überlappung zwischen Snackbar und FloatingActionButton zu verhindern.

Mit Snackbar bietet FloatingActionBar mit CoordinatorLayout eine glatte Interface und vermeidet Überlappungen.

Lesen Sie den detailierten Artikel für CoordinatorLayout:
Die Anleitung zu Android CoordinatorLayout

Anleitungen Android

Anleitungen Flutter

Die Anleitung zu Android SnackBar

1. Android Snackbar

2. Das Beispiel vom Snackbar

3. Zum Beispiel: Snackbar (+CoordinatorLayout)

Anleitungen Android

Anleitungen Android

Neueste Artikel