В этом уроке мы рассмотрим пример создания и настройки разных форм виджета SnackBar
в простом приложении.
Краткое описание SnackBar в Android
SnackBar
— виджет библиотеки материального дизайна (Material Design) для замены всплывающего сообщения Toast
.
SnackBar
является простым и функциональным виджетом, который используется для отображения сообщений в нижней части приложения. К тому же этот виджет может содержать дополнительную программируемую кнопку для различных действий.
Разница между Toast и SnackBar
- Toast-сообщения можно настраивать в любом месте экрана, а SnackBar может быть показан только в нижней части экрана.
- В Toast-сообщения нет возможности добавлять элементы управления, а виджет SnackBar может содержать одну кнопку.
- Toast-сообщения нельзя закрыть до окончания указанного программистом времени, а SnackBar можно закрыть в любое время.
Пример создания виджета SnackBar
Для создания виджета SnackBar
в Android необходимо использовать метод компоновки make()
с тремя параметрами:
1 2 3 4 5 6 |
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
:
1 2 3 4 5 |
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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?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 с надписями на кнопках:
1 2 3 4 5 6 |
<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
по нажатию на каждую кнопку.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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!