Material Design

Содержание

Цели МД
Основные элементы Material Design
Floating Action Button
Слои
Импорт библиотек
CoordinatorLayout, Toolbar и др.
Material

Цели МД

Создать визуальный язык, который бы сочетал в себе классические принципы

Материал – это метафора

Метафора материала – это теория, объединяющая рациональное использование

Основные элементы Material Design

Идея дизайна заключается в создании приложений, которые

Floating Action Button

Не менее значима концепция плавающей кнопки , отражающей главное действие во

Слои

Новое пространство имен и Android

Если ваше приложение в настоящее время зависит

Импорт библиотек

Так как мы используем Android Studio, импорт модулей необходимо выполнять

CoordinatorLayout, Toolbar и др.

CoordinatorLayout, позволяет связывать (координировать) виджеты, помещенные в него

CoordinatorLayou

xmlns:android=http://schemas.android.com/apk/res/android
xmlns:app=http://schemas.android.com/apk/res-auto
android:layout_width="match_parent“
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
android:layout_width="match_parent"
android:layout_height="192dp“
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar“
android:id="@+id/appbar“
android:fitsSystemWindows="true" >

CoordinatorLayou

android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary”
app:layout_scrollFlags="scroll|exitUntilCollapsed“
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp" >

FrameLayout

android:layout_width="match_parent"
android:layout_height="match_parent“
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true" />

CoordinatorLayout

Видно, что у CoordinatorLayout два дочерних элемента: AppBarLayout и контейнер FrameLayout.

FrameLayout предназначен для блокирования области на экране для отображения одного элемента.

AppBarLayout

Идеологически AppBarLayout в чем-то напоминает вертикальный LinearLayout, элементы которого могут вести

CollapsingToolbarLayout - это оболочка для панели инструментов, которая реализует сворачивающуюся панель

Дочерние представления с параллаксной прокруткой

Дочерние представления могут быть прокручены в

CollapsingToolbarLayout

Параметр contentScrim="?attr/colorPrimary" задает цвет фона, в который переходит фоновое изображение при свертывании CollapsingToolbarLayout.

Код

public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private CollapsingToolbarLayout

Комментарий

SetSupportActionBar переключает ActionBar на Toolbar с сохранением почти всех свойств и

Material Design 2.0.

Команда Google провела крупный рефакторинг и выпустила обновленную

Material library

Все старые UI-компоненты из Support Library переехали в Material library,

BottomAppbar

BottomAppbar – это что-то похожее на Appbar, только с возможностью прикрепления Floating

Внутри CoordinatorLayout

android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/bottomAppBar"/>

Chips

Chip – еще одна новая View в библиотеке. С её помощью можно

Chips

BackDrop

BackDrop – новый для Android паттерн навигации.
Есть основной контент, который расположен

XML

android:layout_height="match_parent">
android:id="@+id/toolbar“
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

BackDrop

MaterialButtons

MaterialButtons – обновленные более кастомизируемые кнопки.
У них есть следующие параметры для

Кастомизация кнопок хорошо работает «из коробки»

android:layout_height="wrap_content”
app:cornerRadius="16dp"
app:icon="@drawable/ic_close"

Text Fields

Теперь текстовому полю «из коробки» можно добавить обводку по контуру,

Text Fields

MaterialCardView

MaterialCardView – это все старая CardView, но теперь с обводкой по контуру,