Компоненты дизайна Snackbar Material Design в Android

Опубликовано: 5 Января, 2022

Для реализации различных других компонентов материального дизайна требуются специальные атрибуты. Но в этой статье реализована Snackbar Material design, и для ее реализации в приложении не требуются специальные атрибуты. Взгляните на следующее изображение, чтобы различать обычную закусочную и закусочную панель Material Design в Android. Что отличает Material design Snackbar, так это его дизайн, который легко реализовать и настроить. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

Шаги по реализации Snackbar Material Design

Шаг 1. Создайте пустой проект Android Studio.

  • Создайте пустой проект Android Studio Activity. Обратитесь к Android | Как создать / запустить новый проект в Android Studio для создания проекта Android Studio. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

Шаг 2: Добавьте необходимую зависимость

  • Добавьте библиотеку зависимостей материального дизайна в файл градиента уровня приложения.
  • Чтобы получить файл градиента уровня приложения, перейдите в Project> app> build.gradle .
  • И вызовите следующую зависимость.

implementation ‘com.google.android.material:material:1.3.0-alpha03’

  • Обратитесь к следующему изображению, если не удалось получить файл градиента уровня приложения и вызвать зависимость. После вызова зависимости нажмите кнопку « Синхронизировать сейчас » в правом верхнем углу. И убедитесь, что система должна быть подключена к сети, чтобы она могла загружать необходимые файлы.

Шаг 3. Измените базовую тему приложения на тему «Компоненты материала» в файле styles.xml.

  • Чтобы изменить базовую тему приложения, перейдите к app> src> res> styles.xml и вызовите следующий код.

XML

< resources >
<!-- Base application theme. -->
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
<!-- Customize your theme here. -->
< item name = "colorPrimary" >@color/colorPrimary</ item >
< item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item >
< item name = "colorAccent" >@color/colorAccent</ item >
</ style >
</ resources >
  • Обратитесь к следующему изображению, если не удается найти и вызвать тему компонентов материала.

Шаг 4. Теперь работаем с файлом activity_main.xml.

  • Вызовите следующий код XML в файле activity_main.xml или создайте его самостоятельно.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
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:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--a sample button to show or popup a MDC snackbar-->
< Button
android:id = "@+id/show_snackbar_button"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_marginStart = "32dp"
android:layout_marginTop = "128dp"
android:layout_marginEnd = "32dp"
android:text = "SHOW SNACKBAR" />
</ LinearLayout >

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

Шаг 5: Теперь работаем с MainActivity.java

Джава

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
// Button to show the snackbar
Button bShowSnackbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register the show snackbar button with the appropriate ID
bShowSnackbar = findViewById(R.id.show_snackbar_button);
// button click listener to show the snackbar
bShowSnackbar.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar.make(v, "You have deleted an item" , Snackbar.LENGTH_LONG);
snackbar.setAction( "UNDO" , new View.OnClickListener() {
@Override
public void onClick(View v) {
// perform any action when the button on the snackbar is clicked here in this case
// it shows a simple toast
Toast.makeText(MainActivity. this , "The item has been restored" , Toast.LENGTH_SHORT).show();
}
});
snackbar.show();
}
});
}
}

Производится следующий вывод:

Дополнительные функции Snackbar Material Design

Функциональность 1. Установите продолжительность Snackbar вручную.

  • Вызовите следующий код внутри MainActivity.java .
  • В этом случае продолжительность закрытия Snackbar установлена на 3 секунды.

Джава

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
// Button to show the snackbar
Button bShowSnackbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register the show snackbar button with the appropriate ID
bShowSnackbar = findViewById(R.id.show_snackbar_button);
// button click listener to show the snackbar
bShowSnackbar.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar.make(v, "You have deleted an item" , Snackbar.LENGTH_LONG);
snackbar.setAction( "UNDO" , new View.OnClickListener() {
@Override
public void onClick(View v) {
// perform any action when the button on the snackbar is clicked here in this case
// it shows a simple toast
Toast.makeText(MainActivity. this , "The item has been restored" , Toast.LENGTH_SHORT).show();
}
});
// the duration is in terms of milliseconds in this case its 3 seconds
snackbar.setDuration( 3000 );
snackbar.show();
}
});
}
}

Создается следующий результат:

Функциональность 2: предотвращение перекрытия Snackbar над FAB (плавающей кнопкой действия)

  • Чтобы предотвратить простое перекрытие панелей Sncakbar, обратитесь к разделу Как избежать плавающей кнопки действия Snackbar Overlap в Android ?. Этот метод показывает настройку acnhorPoint на плавающую кнопку действия.
  • Вызовите следующий код внутри activity_main.xml .

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:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--a sample button to show or popup a MDC snackbar-->
< Button
android:id = "@+id/show_snackbar_button"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginStart = "32dp"
android:layout_marginTop = "128dp"
android:layout_marginEnd = "32dp"
android:text = "SHOW SNACKBAR"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
<!--a simple floating action button with icon-->
< com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "16dp"
android:layout_marginBottom = "16dp"
android:backgroundTint = "@color/colorPrimary"
android:src = "@drawable/ic_add_black_24dp"
app:layout_constraintBottom_toTopOf = "@+id/snackbar_layout"
app:layout_constraintEnd_toEndOf = "parent" />
<!--this layout makes the floating action button to raise up
whenever the snackbar pops up from bottom-->
< androidx.coordinatorlayout.widget.CoordinatorLayout
android:id = "@+id/snackbar_layout"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_alignParentStart = "true"
android:layout_alignParentBottom = "true"
app:layout_constraintBottom_toBottomOf = "parent" />
</ androidx.constraintlayout.widget.ConstraintLayout >
  • Теперь работаем с файлом MainActivity.java, чтобы обработать перекрытие Snackbar.

Джава

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
// Button to show the snackbar
Button bShowSnackbar;
// coordinator layout for snackbar
CoordinatorLayout mSnackbarLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register the show snackbar button with the appropriate ID
bShowSnackbar = findViewById(R.id.show_snackbar_button);
// register the coordinator layout with the appropriate ID
mSnackbarLayout = findViewById(R.id.snackbar_layout);
// button click listener to show the snackbar
bShowSnackbar.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
// pass the mSnackbarLayout as the view to the "make" function
Snackbar snackbar = Snackbar.make(mSnackbarLayout, "You have deleted an item" , Snackbar.LENGTH_LONG);
snackbar.setAction( "UNDO" , new View.OnClickListener() {
@Override
public void onClick(View v) {
// perform any action when the button on the snackbar is clicked
// here in this case it shows a simple toast
Toast.makeText(MainActivity. this , "The item has been restored" , Toast.LENGTH_SHORT).show();
}
});
// the duration is in terms of milliseconds
snackbar.setDuration( 3000 );
snackbar.show();
}
});
}
}

Выход: запустить на эмуляторе

Функциональность 3: проведите по экрану, чтобы закрыть Snackbar.

  • Вызовите следующий код внутри activity_main.xml

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:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
<!--a sample button to show or popup a MDC snackbar-->
< Button
android:id = "@+id/show_snackbar_button"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginStart = "32dp"
android:layout_marginTop = "128dp"
android:layout_marginEnd = "32dp"
android:text = "SHOW SNACKBAR"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
<!--this layout makes the floating action button to
raise up whenever the snackbar pops up from bottom-->
< androidx.coordinatorlayout.widget.CoordinatorLayout
android:id = "@+id/snackbar_layout"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_alignParentStart = "true"
android:layout_alignParentBottom = "true"
app:layout_constraintBottom_toBottomOf = "parent" />
</ androidx.constraintlayout.widget.ConstraintLayout >
  • Теперь работаем с файлом MainActivity.java и при создании Snackbar не забудьте передать макет координатора для функции « make ».

Джава

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
// Button to show the snackbar
Button bShowSnackbar;
// coordinator layout for snackbar
CoordinatorLayout mSnackbarLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register the show snackbar button with the
// appropriate ID
bShowSnackbar = findViewById(R.id.show_snackbar_button);
// register the coordinator layout with the
// appropriate ID
mSnackbarLayout = findViewById(R.id.snackbar_layout);
// button click listener to show the snackbar
bShowSnackbar.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
// pass the mSnackbarLayout as the view
// to the make function
Snackbar snackbar = Snackbar.make(mSnackbarLayout, "You have deleted an item" , Snackbar.LENGTH_LONG);
snackbar.setAction( "UNDO" , new View.OnClickListener() {
@Override
public void onClick(View v) {
// perform any action when the button on the snackbar is clicked here in this
// case it shows a simple toast
Toast.makeText(MainActivity. this , "The item has been restored" , Toast.LENGTH_SHORT).show();
}
});
// the duration is in terms of milliseconds
snackbar.setDuration( 3000 );
snackbar.show();
}
});
}
}

Выход: запустить на эмуляторе

Хотите более динамичную и конкурентную среду для изучения основ Android?
Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!
Technical Scripter Android Java

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023
Подсчитать подстроки нечетной длины с медианой, такой же, как K-й символ строки
27 Февраля, 2023
Найти лексикографически первый идентификатор каждого домена из заданного массива идентификаторов электронной почты
27 Февраля, 2023
Найдите общее количество фигур 'X'
26 Февраля, 2023
Максимальное значение узла, которое может быть достигнуто с использованием данных соединений
26 Февраля, 2023