Material Design (Lecture 15 – material design)

Material Design
Android
Константин Золотов

Темное прошлое Google

Проект Кеннеди 2011

Основные принципы

Тактильные поверхности
Даешь простоту и "чистый" дизайн!

Material application
Контрастная журнальная типографика
Модульная сетка (Базовая сетка в 8dp и отступ слева в 72dp)
Геометрическая иконографика
Тени
Цвета
Material компоненты

Material
Материал является частью пространства с рядом свойств.
Большая часть свойств перенеса из реального трехмерного
мира.
Тени отбрасываются элементами находящимися выше
Материалы не могут занимать одно и то же место в пространстве
Материалы не могут проходить друг через друга
Материалы не могут сгибаться
Материалы могут менять форму
Несколько материалов могут объединяться в один
Материал может разделяться на несколько частей

Тени
Тени явно указывают на границы материала
Z = elevation + translationZ
android:elevation="2dp"

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

Анимации
Естественное ускорение нелинейно
Материалы "отвечают" на взаимодействие
Анимации перехода удерживают и акцентируют внимание пользователя
Анимации деталей

Движение
Используется для удержания фокуса на важных элементах
Показывает, что произойдет при действии
Овлечение внимания от того, что происходит "под капотом"

Как движется
Движение используется для демонстрации связи
Движение следует таковому в реальном мире (гравитация, трение, и т.д.)
Учитывает окружение
Использует интерполяторы для нелинейного и естественного ускорения и замедления

Интересные детали
Можно делать интересные пасхалки (превращение "гамбургера" в стрелочку)
Объекты, ведущие себя как настоящие (открывающийся конверт, перелистывание
календаря)
Иллюстрации

Цвета
Создание цветовой палитры для приложения
Использовать доп. цвета только когда нет подходящих в палитре
Держать список цветов максимально коротким
Не создавать новый ресурс, если он не будет использоваться

Палитра
Material design palette generator
1 <resources>
2 <color name="primary">#4CAF50</color>
3 <color name="primary_dark">#388E3C</color>
4 <color name="primary_light">#C8E6C9</color>
5 <color name="accent">#ff813aff</color>
6 <color name="secondary_text">#727272</color>
7 <color name="icons">#FFFFFF</color>
8 <color name="divider">#B6B6B6</color>
9 </resources>

App Style
1 <resources>
2 <style name="AppTheme" parent="Theme.AppCompat">
3 <item name="windowActionBar">false</item>
4 <item name="windowNoTitle">true</item>
5 <item name="colorPrimary">#009688</item>
6 <item name="colorPrimaryDark">#00796B</item>
7 <item name="colorEdgeEffect">?
attr/colorPrimary</item>
8 <item name="colorAccent">#B2DFDB</item>
9 <item
name="android:textColorPrimary">#fff</item>
10 </style>
11 </resources>

Palette
compile 'com.android.support:palette-v7:24.0.0'
1 Palette p = Palette.generate(bitmap);
2 Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
3 @Override
4 public void onGenerated(Palette palette) {
5 }
6 });
7
8 int vibrant = palette.getVibrantColor(0x000000);
9 int vibrantLight = palette.getLightVibrantColor(0x000000);

Android Design Support Library
Новая библиотека поддержки Android Design Support Library делает доступным весь набор
компонентов материального дизайна для всех версий, начиная с Android 2.1 и выше:
compile 'com.android.support:design:24.0.0'
Navigation View (для Navigation Drawer) — панель навигации
Floating Labels (для EditText) — плавающий ярлык
Floating Action Button (FAB) плавающая кнопка
Snackbar — всплывающее уведомление с кнопкой
Tabs — вкладки
Motion and Scroll framework — управление жестами и прокруткой

Floating Labels
1 <android.support.design.widget.TextInputLayout
2 android:layout_width="match_parent"
3 android:layout_height="wrap_content">
4 <EditText
6 android:layout_height="wrap_content"
7 android:hint="hint"
8 android:id="@+id/editText1" />
9 </android.support.design.widget.TextInputLayout>
setErrorEnabled(true); setError(getString(R.string.text_error_message));

Floating Action Button (FAB)
Normal (56dp) Mini (40dp)
1 <android.support.design.widget.FloatingActionButton
2 android:id=”@+id/fab_normal”
3 android:layout_width=”wrap_content”
4 android:layout_height=”wrap_content”
5 android:src=”@drawable/ic_plus”
6 app:backgroundTint="@color/red"
7 app:rippleColor="@color/white"
8 app:fabSize=”normal” />

Snackbar
1 Snackbar
2 .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
3 .setAction(R.string.snackbar_action, myOnClickListener)
4 .show(); // Don’t forget to show!

Coordinator Layout
1 <android.support.design.widget.CoordinatorLayout
2 android:id="@+id/main_content">
3 
4 <android.support.design.widget.FloatingActionButton
5 android:id=”@+id/fab_normal”
6 android:layout_width=”wrap_content”
7 android:layout_height=”wrap_content”
8 android:src=”@drawable/ic_plus”
9 android:layout_gravity="bottom|right"
10 app:fabSize=”normal” />
11 </android.support.design.widget.CoordinatorLayout>
Snackbar.make(mCoordinator, "Your message", Snackbar.LENGTH_SHORT) .show();

Card View
1 <android.support.v7.widget.CardView
2 xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
5 android:layout_height="match_parent"
6 app:contentPadding="8dp"
7 app:cardUseCompatPadding="true" >
8
9 <LinearLayout
11 android:layout_height="match_parent"
12 android:orientation="vertical" >
13
14 <TextView
15 android:id="@+id/title"
17 android:layout_height="wrap_content"
18 android:singleLine="true"
19 style="@style/Base.TextAppearance.AppCompat.Headline" />
20
21 <TextView
22 android:id="@+id/subtitle"

Recycler View
Ключевые моменты:
Adapter (аналогично ListView)
ItemAnimator (удаление, добавление, изменение)
ItemDecoration (добавление разделителей)
LayoutManager (LinearLayoutManager, GridLayoutManager, StaggeredGridLayoutManager)
ViewHolder pattern
RecyclerView объединяет все воедино

Объявление
compile 'com.jakewharton:butterknife:8.2.1'
lintOptions { disable 'InvalidPackage' }

Инициализации View
Activity
1 @BindView(R.id.title)
2 TextView title;
3 @BindView(R.id.subtitle)
4 TextView subtitle;
5
6 private Unbinder unbinder;
7
8 @Override
9 public void onCreate(Bundle savedInstanceState) {
10 super.onCreate(savedInstanceState);
11 setContentView(R.layout.simple_activity);
12 unbinder = ButterKnife.bind(this);
13 // TODO Use fields...
14 }
15
16 @Override
17 public void onDestroy() {
18 unbinder.unbind();
19 super.onDestroy();
20 }

Инициализации View
Fragment
1 @BindView(R.id.button1)
2 Button button1;
3 @BindView(R.id.button2)
4 Button button2;
5
6 private Unbinder unbinder;
7
8 @Override
9 public View onCreateView(LayoutInflater inflater,
10 ViewGroup container, Bundle savedInstanceState) {
11 View view = inflater.inflate(R.layout.fragment, container, false);
12 unbinder = ButterKnife.bind(this, view);
13 // TODO Use fields...
14 return view;
15 }
16
17 @Override
18 public void onDestroyView() {
19 unbinder.unbind();
20 super.onDestroyView();
21 }

ButterKnife в адаптерах
1 static class ViewHolder {
2 @BindView(R.id.title)
3 TextView name;
4
5 @BindView(R.id.job_title)
6 TextView jobTitle;
7
8 public ViewHolder(View view) {
9 ButterKnife.bind(this, view);
10 }
11 }

События
1 @OnClick(R.id.submit)
2 public void submit() {
3 }
4
5 @OnClick(R.id.submit)
6 public void sayHi(Button button) {
7 button.setText("Hello!");
8 }
9
10 @OnItemSelected(R.id.list_view)
11 void onItemSelected(int position) {
12 }

Опциональные
1 @Nullable
2 @Bind(R.id.might_not_be_there)
3 TextView mightNotBeThere;
4
5 @Nullable
6 @OnClick(R.id.maybe_missing)
7 public void onMaybeMissingClicked() {
8 }

Destroy
1 @Override
2 public void onDestroyView() {
3 super.onDestroyView();
4 ButterKnife.unbind(this);
5 }

Полезные ссылки
Material design about
Material design icons
Material design palette generator
ButterKnife

Material Design (Lecture 15 – material design)

More Related Content

Viewers also liked (19)

Similar to Material Design (Lecture 15 – material design) (20)

More from Noveo (18)

Material Design (Lecture 15 – material design)