BottomAppBar — это один из новых Android Material компонентов, которые были представлены на Google I/O 2018. Это по сути расширение компонента Toolbar. Новый BottomAppBar располагается в нижней части окна приложения в отличие от тулбара, который находится в его верхней части. С помощью этой парадигмы команда Material Design ожидает нового пользовательского опыта (UX). BottomAppBar намного более доступен для пользователя в сравнении с обычным тулбаром. Переместив панель управления и меню в нижнюю часть приложения, BottomAppBar предлагает кардинально новый дизайн для Android приложений.
Вместе с BottomAppBar также изменилось расположение Floating Action Button (FAB) (рус. плавающая кнопка действия). Теперь FAB могут быть размещены либо «врезаясь» в BottomAppBar, либо перекрывая его.
В этой статье будет продемонстрирована реализация основ BottomAppBar вместе с новыми вариантами размещения FAB.
Настройка
Для начала требуются небольшие первоначальные настройки.
Подробное объяснение того, как включить Material компоненты для вашего Android проекта, вы можете найти на этой странице. Кроме того, в этом туториале вам необходимо использовать Android Studio 3.2 или выше.
Ниже приведены необходимые шаги настройки.
1. Добавьте репозиторий Google Maven в файле build.gradle.
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com"
}
}
}
2. Добавьте зависимость для support компонентов в файле build.gradle. Имейте в виду, что версия регулярно обновляется.
Есть два варианта использования компонента: с использованием пакета
AndroidX и с использованием Support библиотеки.
В двух словах AndroidX – support библиотеки + новые компоненты, вынесенные в отдельный open source проект. Подробнее прочитать про AndroidX вы можете здесь.
Вы можете использовать AndroidX, когда вы начинаете проект с нуля и все библиотеки, которые вы подключаете, используют AndroidX. На практике – большинство библиотек не используют AndroidX, поэтому приходится использовать Support библиотеку.
Подключение с использованием AndroidX:
implementation 'com.google.android.material:material:1.0.0-alpha1'
Подключение с использованием Support библиотеки:
implementation 'com.android.support:design:28.0.0'
3. Установите в качестве compileSdkVersion и targetSdkVersion версию API минимум для Android P (т.е. 28 и выше).
4. Убедитесь, что ваше приложение наследует тему Theme.MaterialComponents, чтобы BottomAppBar использовал самый последний стиль. В качестве альтернативы вы можете задавать стиль для BottomAppBar при объявлении виджета в XML-файле макета следующим образом:
style=”@style/Widget.MaterialComponents.BottomAppBar”
Реализация
Реализация показана с использованием AndroidX. Для использования Support вам просто необходимо изменять имя пакета компонентов с com.google.android.material на android.support.design. У FloatingActionButton пакет немного отличается и выглядит так для Support библиотеки: android.support.design.widget.FloatingActionButton.
Вы можете добавить BottomAppBar в свой макет следующим образом. Также BottomAppBar должен быть дочерним элементом CoordinatorLayout.
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="@drawable/baseline_menu_white_24"/>
Вы можете привязать FAB к BottomAppBar, указав id элемента BottomAppBar в атрибуте app:layout_anchor элемента FAB. BottomAppBar может обволакивать FAB или FAB может перекрывать BottomAppBar.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />
Атрибуты BottomAppBar
В таблице ниже показаны атрибуты BottomAppBar.
backgroundTint
Это атрибут установки цвета фона BottomAppBar.
fabAlignmentMode
Атрибут определяет положение FAB (либо в центре, либо в конце BottomAppBar). Ниже показано выравнивание FAB в конце BottomAppBar.
fabAttached
Атрибут предназначен для привязки FAB к BottomAppBar и может быть true или false. Хотя по руководству по материальному дизайну не рекомендуется размещать FAB за пределами BottomAppBar, возможность такой настройки имеется. Ниже показана ситуация, когда для атрибута fabAttached установлено значение false.
fabCradleDiameter
Определяет диаметр «колыбели», содержащей FAB.
fabCradleRoundedCornerRadius
Задаёт радиус угла в точке встречи «колыбели» и горизонтальной части BottomAppBar.
fabCradleVerticalOffset
Указывает смещение «колыбели» снизу.
Вот весь 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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="@drawable/baseline_menu_white_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Вот как выглядит итоговый код с использованием Support библиотеки:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_view"
app:layout_anchor="@id/bottom_app_bar"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>
Графические иконки удалены или изменены, т.к. в Support библиотеке нет необходимых ресурсов. При желании вы можете скачать их с сайта material.io и добавить в проект.
Мы разобрались с основами нового компонента Android Material — BottomAppBar, а также новыми функциями FAB. Виджет BottomAppBar сам по себе не является сложным в использовании, поскольку он расширяет обычный Toolbar, но он кардинально меняет подход к проектированию интерфейса приложения.
Вторая и третья части этой серии про BottomAppBar будут посвящены работе с меню и навигацией и реализацией различных поведений BottomAppBar в соответствии с принципами Material Design.
→ Реализация BottomAppBar. Часть 2: Меню и элемент управления Navigation Drawer
→ Реализация BottomAppBar. Часть 3: Поведения для Android
Перевод статьи «Implementing BottomAppBar I: Material Components for Android»
ПОХОЖИЕ ПУБЛИКАЦИИ
- None Found
14 комментариев к статье "Реализация BottomAppBar. Часть 1: Material компоненты для Android"
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Рекомендуемые курсы
Профессия Android разработчика
ОТКРЫТО 697
Android программирование для начинающих
ОТКРЫТО 2218
Доброго времени суток! Для какой минимальной версии android можно использовать данный виджет?
Здравствуйте!
Для material компонентов минимальной поддерживаемой версией является минимальная версия, поддерживаемая support library. На данный момент это 14 версия (https://developer.android.com/topic/libraries/support-library/).
Спасибо за ответ. Я только постигаю android разработку, и скорее всего задаю задам глупый вопрос, но все же. У меня нет опыта касаемо альфа версий, стабильных релизов, latest features и т.д. Т.е. если я увижу подобное, стараюсь выбрать последнюю стабильную версию, т.к. даже не подозреваю, чем мне может “аукнуться использование” других версий. Material компоненты как я понял, еще не являются стабильным релизом. Android Studio 3.2 я понимаю, что если что то пойдет не так, я могу продолжить писать код в последней стабильной версии, Но!…. Material компоненты, и именно BottomAppBar, могу ли я использовать его в программе, которая не является “pet project”, т.е. моим личным проектом для поднятия опыта разработки? Если я планирую использовать этот компонент в приложении минимальной версии 19-20, могу я быть уверен, что работать все будет стабильно практически на всех устройствах данной версии и выше?
P.S. Я чуть более года изучаю android разработку, часто в интернете натыкаюсь на статьи, в которых есть довольно интересная и полезная информация, но она уже устарела. Я еще не видел хорошей статьи, которая хоть немного прольет свет на то, какое положение дел на 2017-2018 год. Мне кажется новичкам было бы довольно познавательно прочитать статью об развитии android разработки, что уже устарело, и что пришло на замену. Пример: listView -> recyclerView, camera api -> camera2 api и т.д. Хотя бы в формате краткой информации. Спасибо за внимание!
Пока библиотека в альфа версии, то лучше на реальных проектах не использовать (баги, нестабильное api). Лично не помню, чтобы minSdk библиотеки отличалось в alpha, beta и в релизной версии. Поэтому, скорее всего, будет использоваться версия 14.
Спасибо за предложение, добавили в бэклог себе)
Никак не могу запустить пример, как только не пытался…. есть предположение, что необходимо подключать androidX библиотеки? Можно вкратце объяснить как запустить пример? Android Studio 3.2, все как в уроках. А вот как правильно подключить material не совсем понял по ссылке из статьи.
Посмотрите эту ссылку по подключению Material-компонентов. Там некоторые настройки обновились, возможно, это решит вашу проблему.
https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md
Вылетает при сборке:
Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
Suggestion: add ‘tools:replace=”android:appComponentFactory”‘ to element at AndroidManifest.xml:5:5-19:19 to override.
Я недели две по несколько часов пытался запустить этот пример, может я упустил какую то важную деталь, но все не собиралось, ошибки за ошибками и т.д…. раз 10-20 создавал новый проект и пробовал и так и сяк ))
Победил AndroidX, подключил… мой petProject рассыпался в пух и прах так как я использовал Moxy. Очень доволен им и отказываться не хочу, а поддержки androidx.appcompat на данный момент нет. Делать реализацию самостоятельно считаю глупой затеей, но не об этом.
Ну уж очень я захотел себе этот BottomAppBar **БУДЬ ОН ПРОКЛЯТ…
Уважаемый devColibri, это лично мое мнение, но мне кажется довольно много новичков прочитав пытались реализовать это, но у них не получилось и они забили и пошли делать что то другое – обратной связи то нет!
Кстати идея!! Если добавить к каждой статье виджет голосование что то вроде: получилось ли у вас выполнить урок, насколько сложным был и т.д. у Вас было бы больше информации о происходящем. Ведь далеко не каждый пройдет регистрацию/авторизацию что бы оставить комментарий. Да и опять же мое мнение: я ни вижу практически комментариев под статьями, и мне кажется что ответа могу и не дождаться, место то не оживленное.
Комментарий планировал о другом, о том как я победил BottomAppBar сохранив Moxy и не используя AndroidX – даже не подозревая как это может повлиять на дальнейшую разработку, т.к. считаю, что без хорошего опыта лезть в новые технологии не стоит, пусть лучше профи обкатают и заполнят интернет полезной информацией: где, что и как пошло не так, и как это можно исправить….
Вы новичок в андроид разработке и уже используете Moxy? Не слишком ли рано?
Как я смог подключить (кажется статью стоит отредактировать, т.к. если не получится этот урок, следующие два я даже не читал еще :)…
Увидев в этой статье строки вроде:
implementation ‘com.google.android.material:material:1.0.0-alpha1’
<com.google.android.material.bottomappbar.BottomAppBar
А так же строки на офф. сайте https://material.io/develop/android/components/bottom-app-bar/
<com.google.android.material.bottomappbar.BottomAppBar
Я подумал что все! Если хочу BottomAppBar надо implementation com.google.android.material. На что и угрохал огромное кол-во времени, поломал Moxy и т.д. (писал выше).
Потом рыская в поисках хоть каких то ответов (ну не должно же быть все так сложно) нашел на офф. сайте (https://material.io/develop/android/docs/getting-started/) такие строки:
(translator to help)
If you don’t want to switch over to the new androidx and com.google.android.material packages yet, you can use Material Components via the com.android.support:design:28.0.0-alpha3 dependency.
Т.е. com.google.android.material вовсе не обязателен!!! Попытки подключить который принесли больше вреда чем пользы.
Просто подключив implementation group: 'com.android.support', name: 'design', version: '28.0.0' и сменив тему на
Я использую <android.support.design.bottomappbar.BottomAppBar который ведет себя так же, как в этом уроке (ну может и не совсем так, но я этого не заметил).
P.S. Подправьте статью, не заставляйте страдать новичков :) И огромное спасибо за контент!
Спасибо за комментарий! Поправили статью.
Привет. А как сменить цвет кнопки больше (та что скрывает пункты меню в тулбаре) на белый? А то как то выбивается из общего стиля приложения.
Решил проблему так: bottomAppBar.setOverflowIcon(getDrawable(R.drawable.app_ic_round_more_vert));
Но как мне кажется, такое себе решение. Должен быть более адекватный вариант.
Решил проблему так: bottomAppBar.setOverflowIcon(getDrawable(R.drawable.app_ic_round_more_vert));
Но как мне кажется, такое себе решение. Должен быть более адекватный вариант.