Material design library android

Android Design Support Library — поддержка компонентов Material Design в приложениях с Android 2.1 до Android 5+ (с примерами)

Android 5.0 Lollipop — один из самых значимых релизов системы Android , в немалой степени благодаря введению концепции Material Design, нового языка дизайна, который преобразил Android. Подробные спецификации помогают начать использовать Material Design, но не решают проблемы разработчиков, связанные с обеспечением обратной совместимости приложений.

Новая библиотека поддержки Android Design Support Library делает доступным весь набор компонентов материального дизайна для всех версий, начиная с Android 2.1 и выше:

• Navigation View (для Navigation Drawer) — панель навигации
• Floating Labels (для EditText) — плавающий ярлык
• Floating Action Button (FAB) плавающая кнопка
• Snackbar — всплывающее уведомление с кнопкой
• Tabs — вкладки
• Motion and Scroll framework — управление жестами и прокруткой

Как подключить Android Design Support Library в проект Android Studio

Обновите Android Support Repository в SDK менеджере. Для подключения Android Design Support Library в ваш проект добавьте строку в секцию зависимостей файла build.gradle:

Так как библиотека материального дизайна зависит от Support v4 и AppCompat Support Libraries, те будут включаться автоматически при добавлении библиотеки com.android.support:design:22.2.0 .

Все новые виджеты, перечисленные в этой статье, должны быть доступны в редакторе макетов Android Studio (на вкладке CustomView), для некоторых компонентов доступен предварительный просмотр.

Navigation View

Navigation drawer является важным элементом навигации вашего приложения, он ориентирует и координирует пользователя, что особенно важно для пользователей-новичков. NavigationView делает это проще, обеспечивая каркас для панели навигации, а также возможность создавать новые элементы навигации через ресурсы меню.

Используйте NavigationView как DrawerLayout представление в макете, например:

Обратите внимание на два атрибута NavigationView:

• app:headerLayout — устанавливает (опционально) макет, используемый для заголовка
• app:menu подключает ресурсы меню для элементов навигации (которые также могут обновляться во время выполнения)

NavigationView обеспечивает взаимодействие со строкой состояния (status bar), как на устройствах с версией API21+.

Пример простого меню для Navigation Drawer с отмечаемыми пунктами:

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

Вы также можете использовать подзаголовки в меню на отдельные группы пунктов:

Вы будете получать обратные вызовы для выбранных элементов, установив слушатель OnNavigationItemSelectedListener , использующий метод setNavigationItemSelectedListener() . Это позволяет обрабатывать события выбора MenuItem , выполняя дополнительные действия, например изменение статуса отмеченных пунктов, загрузку нового контента, программное закрытие Navigation Drawer, или любые другие действия, которые могут потребоваться.

Floating Labels для EditText

Даже для скромного EditText нашлось улучшение в духе материального дизайна. EditText скрывает текст подсказки (hint) сразу после того, как пользователь начинает вводить текст. Вы можете теперь обернуть EditText в TextInputLayout , и текст подсказки отобразится в floating label выше EditText , демонстрируя пользователю подсказку во время ввода.

В дополнение к подсказке, можно отобразить сообщение об ошибке ниже EditText путем вызова метода setError() .

Подробнее процесс создания Floating Labels для EditText смотрите в видео:

Floating Action Button

Floating action button — это круглая кнопка, обозначающий основное действие в интерфейсе вашего приложения. FloatingActionButton из Android Design Support Library предоставляет единую последовательную реализацию FAB, используя цвета colorAccent из вашей темы по умолчанию.

В дополнение к обычному размеру плавающей кнопки действия, он также поддерживает мини-размер ( fabSize=»mini» ) для обеспечения визуальной целостности интерфейса и согласованности с другими элементами.

FloatingActionButton унаследован от ImageView , поэтому можно использовать атрибут макета android:src или, например, метод setImageDrawable() для установки иконки, отображаемой внутри FloatingActionButton .

Snackbar

Обратную связь о какое-либо действии в интерфейсе приложения можно обеспечить, используя snackbar. Снекбары отображаются в нижней части экрана и содержат текст и действие (кнопку). Они показываются в течении определенного времени, в зависимости от продолжительности подсветки экрана, затем скрываются автоматически. Кроме того, пользователи могут убрать его жестом до тайм-аута.

Для включения возможности взаимодействия со Snackbar путем смахивания его жестом или выполнения указанного действия. Это значительно более мощный, чем тосты, и в то же время очень удобный механизм обратной связи. Его API достаточно прост:

Обратите внимание на первый параметр метода make() — он определяет корневой View, по нижней границе которого будет отображаться всплывающее сообщение.

Tabs — вкладки

Переключение между различными режимами в вашем приложение через tabs (вкладки) — это не новая концепция материального дизайна. Но вкладки одинаково эффективны и в качестве top level navigation pattern, и для организации различных групп информации в рамках одного приложения (скажем, разные жанры музыки).

TabLayout из Android Design Support Library реализует как фиксированные вкладки, где ширина и высота делится поровну между всеми вкладками, а также вкладки с возможностью прокрутки, где вкладки не одинакового размера и с горизонтальной прокруткой. Вкладки могут быть добавлены программно:

Однако, если вы используете ViewPager для горизонтального свайпа между вкладками, вы можете создать вкладки прямо в вашем PagerAdapter методом getPageTitle() и затем соединить вместе, используя setupWithViewPager() . Это гарантирует, что при выборе заголовка ViewPager обновит содержимое выбранной вкладки.

CoordinatorLayout, жесты и прокрутка

Отличительные визуальные эффекты являются только одной частью материального дизайна. Другой важной частью интерфейса вашего приложения является движение. В то время как есть много элементов движения в Material Design, в том числе touch ripples и meaningful transitions, Android Design Support Library вводит новый компонент — CoordinatorLayout. Это макет, который обеспечивает дополнительный уровень контроля над событиями прикосновения между дочерними View, доступными в новой библиотеке поддержки com.android.support:design:22.2.0.

CoordinatorLayout и floating action buttons

Прекрасным примером взаимодействия CoordinatorLayout и floating action buttons является добавление FloatingActionButton дочерним элементом в CoordinatorLayout и передача CoordinatorLayout в метод Snackbar.make(). В итоге snackbar отображается не поверх плавающей кнопки FloatingActionButton, перекрывая ее, а использует дополнительные обратные вызовы (callbacks), предоставляемые CoordinatorLayout, чтобы автоматически сдвигать FAB вверх и возвращать к своей позиции. Анимация движения кнопки поддерживается на устройствах с Android 3.0 и выше — никакого дополнительного кода при этом не требуется.

CoordinatorLayout и Toolbar

Другой основной вариант использования для CoordinatorLayout касается панели приложения (ранее action bar) и методов скроллинга. Возможно, вы уже используете в Toolbar в ваших макетах. Android Design Support Library поднимает это на новый уровень: использование AppBarLayout позволяет компоненту Toolbar и другим View (например, вкладкам, созданным через TabLayout ) реагировать на события прокрутки в родственном View, отмеченном как ScrollingViewBehavior . Пример макета:

Источник

Material design library android

Copy raw contents

Getting started with Material Components for Android

1. Migration guidance

Take a look at our guide and codelab to help you migrate your codebase using Material Components for Android to the new Material 3 system.

Additionally, if you are still using the legacy Design Support Library, take a look at our legacy guide to help you migrate your codebase to Material Components for Android.

2. Maven library dependency

Material Components for Android is available through Google’s Maven Repository. To use it:

Open the build.gradle file for your application.

Make sure that the repositories section includes Google’s Maven Repository google() . For example:

Add the library to the dependencies section:

Visit Google’s Maven Repository or MVN Repository to find the latest version of the library.

Note: In order to use the new Material3 themes and component styles, you must depend on version 1.5.0-alpha04 or later.

New Namespace and AndroidX

If your app currently depends on the original Design Support Library, you can make use of the Refactor to AndroidX… option provided by Android Studio. Doing so will update your app’s dependencies and code to use the newly packaged androidx and com.google.android.material libraries.

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 dependency.

Note: You should not use the com.android.support and com.google.android.material dependencies in your app at the same time.

3. Android 12 compilation

In order to use the latest versions of Material Components for Android and the AndroidX Jetpack libraries, you will have to install the latest version of Android Studio and update your app’s compileSdkVersion to 31 .

As part of migrating to Android 12, you’ll need to add android:exported to any activities, services, or broadcast receivers in your manifest that use intent filters (see the documentation). Consider reading through the Android 12 app migration guide and behavior changes for more tips and information.

4. Java 8 compilation

The latest AndroidX Jetpack libraries now require your app to be compiled with Java 8. See the Java 8 language features and APIs documentation for more information on Java 8 support and how to enable it for your app.

Use AppCompatActivity to ensure that all the components work correctly. If you are unable to extend from AppCompatActivity , update your activities to use AppCompatDelegate . This will enable the AppCompat or Material versions of components to be inflated (depending on your theme), among other important things.

6. Material3 theme inheritance

We recommend you perform an app-wide migration by changing your app theme to inherit from a Material3 theme. Be sure to test thoroughly afterwards, since this may change the appearance and behavior of existing layout components.

Check out the new Material Theme Builder which can be used to generate your Material3 app theme, with all of the Material Color System roles filled out based on your brand colors.

Note: If you can’t change your theme, you can continue to inherit from an AppCompat or MaterialComponents theme and add some new theme attributes to your theme. See the AppCompat or MaterialComponents themes section for more details.

Material3 themes

Here are the Material3 themes you can use to get the latest component styles and theme-level attributes, as well as their MaterialComponents equivalents when applicable.

Material3	MaterialComponents
Theme.Material3.Light	Theme.MaterialComponents.Light
Theme.Material3.Light.NoActionBar	Theme.MaterialComponents.Light.NoActionBar
Theme.Material3.Dark	Theme.MaterialComponents
Theme.Material3.Dark.NoActionBar	Theme.MaterialComponents.NoActionBar
Theme.Material3.DayNight	Theme.MaterialComponents.DayNight
Theme.Material3.DayNight.NoActionBar	Theme.MaterialComponents.DayNight.NoActionBar
N/A	Theme.MaterialComponents.Light.DarkActionBar
N/A	Theme.MaterialComponents.DayNight.DarkActionBar

Update your app theme to inherit from one of these themes:

For more information on how to set up theme-level attributes for your app, take a look at our Theming guide, as well as our Dark Theme guide for why it’s important to inherit from the DayNight theme.

Material3 themes enable a custom view inflater, which replaces default components with their Material counterparts. Currently, this replaces the following XML components:

AppCompat or MaterialComponents Themes

You can incrementally test new Material components without changing your app theme. This allows you to keep your existing layouts looking and behaving the same, while introducing new components to your layout one at a time.

However, you must add the following new theme attributes to your existing app theme, or you will encounter ThemeEnforcement errors:

7. Add Material components

Take a look at our documentation for the full list of available Material components. Each component’s page has specific instructions on how to implement it in your app.

Let’s use text fields as an example.

Implementing a text field via XML

The default outlined text field XML is defined as:

Note: If you are not using a theme that inherits from a Material3 theme, you will have to specify the text field style as well, via style=»@style/Widget.Material3.TextInputLayout.OutlinedBox»

Other text field styles are also provided. For example, if you want a filled text field in your layout, you can apply the Material3 filled style to the text field in XML:

Material Components for Android welcomes contributions from the community. Check out our contributing guidelines as well as an overview of the directory structure before getting started.

Источник