Руководство Android SnackBar

Android Snackbar
Пример Snackbar
Пример Snackbar (+CoordinatorLayout)

1. Android Snackbar

Android Snackbar это маленький компонент интерфейса, предоставляющий короткий ответ после действия пользователя, он появляется в самом конце (bottom) экрана и автоматически исчезает после того, как время истекло или когда пользователь взаимодействует в другом месте экрана.

Snackbar так же предоставляет button как опцию для выполнения действия. Например отменить (undo) только что выполненное действие или попробовать перевыполнить последнее действие если оно было неудачным.

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 не имеется готовым в Android SDK, поэтому вам нужно объявить данную библиотеку в build.gradle (Module app):

build.gradle (Module: app)

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

И проверить версию новее здесь:

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

2. Пример Snackbar

OK, теперь мы создадим простой project используя Snackbar. С более сложными приложениями с участием Snackbar, FloatingActionButton,.. вам стоит использовать CoordinatorLayout. (Смотрите второй пример).

Просмотр примера:

Snackbar (Default)

Snackbar with action button

Snackbar (Styling)

OK, на Android Studio создайте новый project:

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

Как было сказано выше, Snackbar не имеется готовым в Android SDK, поэтому вам нужно объявить следующую библиотеку в ваш project:

build.gradle (Module: app)

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

Интерфейс приложения:

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. Пример Snackbar (+CoordinatorLayout)

Для сложного приложения, с участием Snackbar, FloatingActionButton,... вам стоит использовать CoordinatorLayout, это поможет предотвратить перекрытие между Snackbar и FloatingActionButton.

Использование Snackbar, FloatingActionBar с CoordinatorLayout поможет вам получить гладкий интерфейс, избежать перекрытия (overlap).

Смотрите более подробную статью про CoordinatorLayout:
Руководство Android CoordinatorLayout

Pуководства Android

Pуководства Flutter

Руководство Android SnackBar

1. Android Snackbar

2. Пример Snackbar

3. Пример Snackbar (+CoordinatorLayout)

Pуководства Android

Pуководства Android

Новейшие статьи