Пример использования SnackBar в Android. Создаем кастомный SnackBar

В этом уроке мы рассмотрим пример создания и настройки разных форм виджета SnackBar в простом приложении.

Краткое описание SnackBar в Android

SnackBar — виджет библиотеки материального дизайна (Material Design) для замены всплывающего сообщения Toast.

SnackBar является простым и функциональным виджетом, который используется для отображения сообщений в нижней части приложения. К тому же этот виджет может содержать дополнительную программируемую кнопку для различных действий.

Разница между Toast и SnackBar

Toast-сообщения можно настраивать в любом месте экрана, а SnackBar может быть показан только в нижней части экрана.
В Toast-сообщения нет возможности добавлять элементы управления, а виджет SnackBar может содержать одну кнопку.
Toast-сообщения нельзя закрыть до окончания указанного программистом времени, а SnackBar можно закрыть в любое время.

Пример создания виджета SnackBar

Для создания виджета SnackBar в Android необходимо использовать метод компоновки make() с тремя параметрами:

Snackbar myAwesomeSnackbar = Snackbar.make(
       coordLayout,
       "https://javadevblog.com",
       Snackbar.LENGTH_LONG
);
myAwesomeSnackbar.show();

Snackbar myAwesomeSnackbar = Snackbar.make(

coordLayout,

"https://javadevblog.com",

Snackbar.LENGTH_LONG

);

myAwesomeSnackbar.show();

В коде выше параметр coordLayout представляет собой корневой элемент активити.
Параметр «https://javadevblog.com» — текстовое сообщение, которое будет показано в SnackBar
Snackbar.LENGH_LONG — сколько времени сообщение будет показано на экране.

Вызов метода show() покажет на экране скомпонованное методом make() сообщение.

Но можно сделать и проще, если нам не нужна ссылка myAwesomeSnackbar на созданный SnackBar:

Snackbar.make(
         coordLayout,
         "JavaDevBlog.com - программирование на Java | Android",
         Snackbar.LENGTH_LONG
).show();

Snackbar.make(

coordLayout,

"JavaDevBlog.com - программирование на Java | Android",

Snackbar.LENGTH_LONG

).show();

Пример использования SnackBar в Android

Создайте новый проект в Android Studio по примеру, но вместо Empty Activity используйте Basic Activity:

После создания проекта у вас будет 2 макета в папке res/layout:

content_main.xml — с корневым RelativeLayout и TextView.
activity_main.xml — с корневым CoordinatorLayout, Toolbar и FloatingActionButton (здесь его не приводим, так как ничего в нем не меняем. В конце статьи можно скачать проект со всеми файлами).

В компоновке content_main.xml добавим 3 виджета Button для тестирования трех различных способов настройки виджета SnackBar:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/content_main_layout"
    tools:showIn="@layout/activity_main"
    tools:context="ua.com.prologistic.snackbartestapp.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/default_snackbar_txt"
        android:id="@+id/button_default"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/call_action_snackbar_txt"
        android:id="@+id/button_call_action"
        android:layout_below="@+id/button_default"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/custom_snackbar_txt"
        android:id="@+id/button_custom"
        android:layout_below="@+id/button_call_action"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:id="@+id/content_main_layout"

tools:showIn="@layout/activity_main"

tools:context="ua.com.prologistic.snackbartestapp.MainActivity">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/default_snackbar_txt"

android:id="@+id/button_default"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/call_action_snackbar_txt"

android:id="@+id/button_call_action"

android:layout_below="@+id/button_default"

android:layout_centerHorizontal="true" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/custom_snackbar_txt"

android:id="@+id/button_custom"

android:layout_below="@+id/button_call_action"

android:layout_centerHorizontal="true" />

</RelativeLayout>

Файл strings.xml с надписями на кнопках:

<resources>
    <string name="app_name">SnackBarTestApp</string>
    <string name="default_snackbar_txt">Стандартный SnackBar</string>
    <string name="call_action_snackbar_txt">SnackBar с кнопкой</string>
    <string name="custom_snackbar_txt">Нестандартный SnackBar</string>
</resources>

<string name="app_name">SnackBarTestApp</string>

<string name="default_snackbar_txt">Стандартный SnackBar</string>

<string name="call_action_snackbar_txt">SnackBar с кнопкой</string>

<string name="custom_snackbar_txt">Нестандартный SnackBar</string>

</resources>

Теперь напишем инициализацию наших кнопок в onCreate() методе класса MainActivity и добавим различные компоновки виджетов SnackBar по нажатию на каждую кнопку.

package ua.com.prologistic.snackbartestapp;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private CoordinatorLayout coordLayout;
    private Button buttonDefault, buttonCallAction, buttonCustom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(this);

        // получаем корневой CoordinatorLayout в макете activity_main.xml
        coordLayout = (CoordinatorLayout) findViewById(R.id.coordLayout);

        // получаем корневой RelativeLayout в макете content_main.xml
        View contentMainLayout = findViewById(R.id.content_main_layout);

        buttonDefault = (Button) contentMainLayout.findViewById(R.id.button_default);
        buttonCallAction = (Button) contentMainLayout.findViewById(R.id.button_call_action);
        buttonCustom = (Button) contentMainLayout.findViewById(R.id.button_custom);

        // вешаем слушатели
        buttonDefault.setOnClickListener(this);
        buttonCallAction.setOnClickListener(this);
        buttonCustom.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        switch (id) {
            case R.id.button_default: {
                // SnackBar без создания ссылки на объект
                Snackbar.make(
                        coordLayout,
                        "JavaDevBlog.com - программирование на Java | Android",
                        Snackbar.LENGTH_LONG
                ).show();
                break;
            }
            case R.id.button_call_action: {
                // создаем Snackbar
                Snackbar snackbar = Snackbar
                        // с текстовой компоновкой "Вы изменили что-то"
                        .make(coordLayout, "Вы изменили что-то", Snackbar.LENGTH_LONG)
                        // и кнопкой "Вернуть как было?"
                        .setAction("Вернуть как было?", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                // показываем сообщение "Все вернулось на свои места!"
                                Snackbar.make(
                                        coordLayout,
                                        "Все вернулось на свои места!",
                                        Snackbar.LENGTH_SHORT
                                ).show();
                            }
                        });
                snackbar.show();
                break;
            }
            case R.id.button_custom: {
                // Виджет Snackbar с кастомной компоновкой
                Snackbar snackbar = Snackbar
                        .make(coordLayout, "Повторите еще раз!", Snackbar.LENGTH_LONG)
                        // По нажатию на кнопку "Повторить действие" ничего не будет происходить
                        .setAction("Повторить", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {}
                        });
                // кастомизуем наш snackbar с помощью другого цвета
                snackbar.setActionTextColor(Color.CYAN);
                // и добавлением текстового сообщения с помощью виджета TextView
                TextView textView = (TextView) snackbar.getView()
                        .findViewById(android.support.design.R.id.snackbar_text);
                // зеленого цвета
                textView.setTextColor(Color.LTGRAY);

                snackbar.show();
                break;
            }
            // действие по нажатию на FloatingActionButton
            case R.id.fab: {
                Snackbar.make(
                        view,
                        "Вы нажали на FloatingActionButton",
                        Snackbar.LENGTH_LONG
                ).show();
            }
        }
    }
}

100

101

102

103

104

105

106

107

108

package ua.com.prologistic.snackbartestapp;

import android.graphics.Color;

import android.os.Bundle;

import android.support.design.widget.CoordinatorLayout;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private CoordinatorLayout coordLayout;

private Button buttonDefault, buttonCallAction, buttonCustom;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(this);

// получаем корневой CoordinatorLayout в макете activity_main.xml

coordLayout = (CoordinatorLayout) findViewById(R.id.coordLayout);

// получаем корневой RelativeLayout в макете content_main.xml

View contentMainLayout = findViewById(R.id.content_main_layout);

buttonDefault = (Button) contentMainLayout.findViewById(R.id.button_default);

buttonCallAction = (Button) contentMainLayout.findViewById(R.id.button_call_action);

buttonCustom = (Button) contentMainLayout.findViewById(R.id.button_custom);

// вешаем слушатели

buttonDefault.setOnClickListener(this);

buttonCallAction.setOnClickListener(this);

buttonCustom.setOnClickListener(this);

}

@Override

public void onClick(View view) {

int id = view.getId();

switch (id) {

case R.id.button_default: {

// SnackBar без создания ссылки на объект

Snackbar.make(

coordLayout,

"JavaDevBlog.com - программирование на Java | Android",

Snackbar.LENGTH_LONG

).show();

break;

}

case R.id.button_call_action: {

// создаем Snackbar

Snackbar snackbar = Snackbar

// с текстовой компоновкой "Вы изменили что-то"

.make(coordLayout, "Вы изменили что-то", Snackbar.LENGTH_LONG)

// и кнопкой "Вернуть как было?"

.setAction("Вернуть как было?", new View.OnClickListener() {

@Override

public void onClick(View view) {

// показываем сообщение "Все вернулось на свои места!"

Snackbar.make(

coordLayout,

"Все вернулось на свои места!",

Snackbar.LENGTH_SHORT

).show();

}

});

snackbar.show();

break;

}

case R.id.button_custom: {

// Виджет Snackbar с кастомной компоновкой

Snackbar snackbar = Snackbar

.make(coordLayout, "Повторите еще раз!", Snackbar.LENGTH_LONG)

// По нажатию на кнопку "Повторить действие" ничего не будет происходить

.setAction("Повторить", new View.OnClickListener() {

@Override

public void onClick(View view) {}

});

// кастомизуем наш snackbar с помощью другого цвета

snackbar.setActionTextColor(Color.CYAN);

// и добавлением текстового сообщения с помощью виджета TextView

TextView textView = (TextView) snackbar.getView()

.findViewById(android.support.design.R.id.snackbar_text);

// зеленого цвета

textView.setTextColor(Color.LTGRAY);

snackbar.show();

break;

}

// действие по нажатию на FloatingActionButton

case R.id.fab: {

Snackbar.make(

view,

"Вы нажали на FloatingActionButton",

Snackbar.LENGTH_LONG

).show();

}

Теперь запустим проект и посмотрим что получилось:

и кнопка с нестандартным виджетом SnackBar:

Как видите, библиотека материального дизайна вводит SnackBar — новый, более удобный способ оповестить о чем-то пользователя и даже отменить какие-то свои действия. Это не только смотрится красивее, но и более функционально, чем обычный Toast.

Скачать проект приложения Пример использования SnackBar в Android.

Подписывайтесь на новые статьи и следите за обновлениями раздела Android!