Screen Shot 2015-08-04 at 9.20.42 AM.png

Material design это исчерпывающая кросс-платформенная концепция визуального оформления приложений, затрагивающая правила отображения анимации, общий стиль приложения и правила взаимодействия с управляющими элементами. В этом руководстве, вы узнаете основные принципы данного подхода, создав приложение-пример на Android.

Что вы узнаете

Что вам потребуется

* Могут быть использованы устройства Android 2.3.3 (Gingerbread, API Level 10) или выше, однако, часть эффектов material design (например, круговая анимация) может не воспроизводиться на Android 4.4 (KitKat) и ранее.

Скачайте приложение-пример

Вы можете скачать весь код примера на ваш компьютер...

Скачать Zip

...или клонировать GitHub репозиторий из командной строки.

$ git clone https://github.com/googlecodelabs/android-design-library.git

Запустите приложение-пример

Во-первых давайте рассмотрим как выглядит завершённый вариант приложения. Следующие инструкции опишут как его открыть в Android Studio.

  1. Импортируйте android-design-library пакет.
  2. Для этого выберите корневую директорию android_studio_folder.pngandroid-design-library (Quickstart > Import Project... > android-design-library). Дальнейшую работу мы будем вести в модуле Base-1.
  3. Кликните на кнопку gradlesync.pngGradle sync.
  4. Включите режим отладки по USB на вашем Android устройстве.
  5. Подключите ваше Android устройство и кликните кнопку execute.pngRun. Вы увидите домашний экран приложения через несколько секунд.

Часто задаваемые вопросы

Давайте рассмотрим два ключевых нововведения: темы и цвета!

Благодаря темам можно выбирать подходящие к нашему приложению цвета. Разработчики могут выбирать между светлыми и тёмными темами (см. рис. 1 и 2).

Screen Shot 2015-08-11 at 5.24.37 PM.png

Настройка цветов производится через атрибуты темы, которые автоматически используются всеми компонентами приложения, например colorPrimaryDark для Status Bar и colorPrimary для App Bar (см. рис. 3).

Screen Shot 2015-08-11 at 5.39.40 PM.png

  1. Добавим светлую тему в наше приложение и настроим часть цветов в res/values/styles.xml

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#3F51B5</item>
        <!-- Light Indigo -->
        <item name="colorPrimaryDark">#3949AB</item>
        <!-- Dark Indigo -->
        <item name="colorAccent">#00B0FF</item>
        <!-- Blue -->
    </style>
    <style name="AppTheme" parent="AppTheme.Base"></style>
</resources>

Приложение должно выглядеть следующим образом:

Screenshot_20151008-155946.png

В этом примере мы создадим общую структуру приложения, которую впоследствии заполним компонентами material design.

Screenshot_20150924-154133.png

Добавим toolbar

Теперь вы готовы писать поверх стартового проекта (Base-1).

  1. Добавим toolbar и tabs в activity_main.xml and MainActivity.java
  2. Удалим TextView в activity_main.xml

activity_main.xml

<RelativeLayout 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">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Adding Toolbar to Main screen
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

Добавим tabs в toolbar

  1. В activity_main.xml удалим RelativeLayout и заменим на CoordinatorLayout.
  2. В activity_main.xml добавим Tablayout внутри AppBarLayout.
  3. В MainActivity.java создадим класс tabs и инициализируем меню

activity_main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

MainActivity.java

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setText("Tab 1"));
tabs.addTab(tabs.newTab().setText("Tab 2"));
tabs.addTab(tabs.newTab().setText("Tab 3"));

Приложение должно выглядеть следующим образом:

Screenshot_20150923-165129.png

Добавим Fragment и ViewPager

Создадим отдельные контейтеры в каждый из табов, чтобы при навигации между ними у вас были разные уровни(слои).

  1. Создадим 3 фрагмента. ListContentFragment.java , TileContentFragment.java и CardContentFragment.java .
  2. В MainActivity.java создадим объект ViewPager и Adapter для прокручивания контента.
  3. В activity_main.xml добавим элемент ViewPager вне AppBarLayout.
  4. Создадим файлы, описывающие внешний вид каждого из фрагментов: item_list.xml, item_tile.xml и item_card.xml внутри res/layout/. Обратите внимание на индивидуальные атрибуты, чтобы понять какие варианты настройки доступны.

Приложение должно выглядеть следующим образом:

Screenshot_20150923-174747.png

RecyclerView – это контейнер для отображения больших массивов данных, который может пролистываться очень эффективно (с большой скоростью), удерживая в памяти ограниченное количество элементов списка. Наш набор данных для этого руководство состоит из пустых карточек, похожих на листки бумаги и служащих как короткая репрезентация информации. Для получения большего количества информации необходимо зайти"внутрь" карточки, кликнув на неё и вызвав открытие Detail View.

Давайте добавим RecyclerView в приложение:

  1. Добавим зависимости в build.gradle для использования CardView и RecyclerView.

build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
    compile 'com.android.support:cardview-v7:23.0.1'
    compile 'com.android.support:recyclerview-v7:23.0.1'
}
  1. Создадим recycler_view.xml в папке res/layout.

recycler_view.xml

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:paddingBottom="@dimen/md_keylines"
    android:paddingTop="@dimen/md_keylines"
    android:scrollbars="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  1. В каждом из созданных фрагментов создайте экземпляр RecyclerView.Adapter для настройки RecyclerView.
public static class ContentAdapter extends RecyclerView.Adapter<ViewHolder> {
    // Установим количество элементов списка в RecyclerView.
    private static final int LENGTH = 18;

    public ContentAdapter() {
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()), parent);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // no-op
    }

    @Override
    public int getItemCount() {
        return LENGTH;
    }
}
  1. В каждом фрагменте сконфигурируйте ViewHolder для адаптера. Замените R.layout.item_tile на view, который вы создадите для каждого фрагмента.
public static class ViewHolder extends RecyclerView.ViewHolder {
    public ViewHolder(LayoutInflater inflater, ViewGroup parent) {
        super(inflater.inflate(R.layout.item_tile, parent, false));
    }
}
  1. Для каждого фрагмента обновите onCreateView(), чтобы использовать ContentAdapter.

    Специально для TileContentFragment уделим внимание настройке отступов и укажем в RecyclerView использование GridLayout — это сделает внешний вид более приятным на вид.
public class TileContentFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        RecyclerView recyclerView = (RecyclerView) inflater.inflate(
                R.layout.recycler_view, container, false);
        ContentAdapter adapter = new ContentAdapter();
        recyclerView.setAdapter(adapter);
        recyclerView.setHasFixedSize(true);
        
        // Set padding for Tiles (not needed for Cards/Lists!)
        int tilePadding = getResources().getDimensionPixelSize(R.dimen.tile_padding);
        recyclerView.setPadding(tilePadding, tilePadding, tilePadding, tilePadding);
        recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 2));

        return recyclerView;
    }

Если вы не справляетесь - взгляните на примеры TileContentFragment.java, ListContentFragment.java, и CardContentFragment.java. На этом шаге приложение должно выглядеть следующим образом:

Screenshot_20151008-171028.png

  1. Чтобы завершить эффект, давайте стилизуем каждый view через модифицирование item_list.xml, item_tile.xml, чтобы добавить изображение.

    Мы так же сделаем то же самое для item_card.xml, оборачивая наш RelativeLayout в CardView, чтобы получить тени и скруглённые углы, характерные для "карточек". (На Lollipop и более новых ОС, тени будут отображаться через нативное для Android свойство elevation. На старых устройствах support library симулирует эффект используя drawables).

Мы должны получить следующую картинку:

Screenshot_20151008-173707.png

Добавим NavigationDrawer

Навигационная панель выдвигается слева. Это общий паттерн, характерный для приложений Google и соответствующий спецификации MD для листов.

  1. Создадим файл menu_navigation.xml, который будет определять элементы навигации в папке res/menu.

menu_navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:icon="@drawable/ic_home_black_24dp"
            android:tint="@color/button_grey"
            android:title="One" />
        <item
            android:icon="@drawable/ic_favorite_black_24dp"
            android:tint="@color/button_grey"
            android:title="Two" />
        <item
            android:icon="@drawable/ic_bookmark_border_black_24dp"
            android:tint="@color/button_grey"
            android:title="Three" />
    </group>
</menu>
  1. Создадим файл navheader.xml определяющий содержание верхней части Navigation Drawer. Файл должен быть размещён в папке res/layout/.

navheader.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/navheader_height"
    android:background="?attr/colorPrimaryDark"
    android:orientation="vertical"
    android:padding="@dimen/md_keylines">
</LinearLayout>
  1. В activity_main.xml:

activity_main.xml

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

activity_main.xml

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navheader"
        app:menu="@menu/menu_navigation" />
  1. В MainActivity.java:
private DrawerLayout mDrawerLayout;
// Create Navigation drawer and inflate layout
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

// Adding menu icon to Toolbar
ActionBar supportActionBar = getSupportActionBar();
if (supportActionBar != null) {
    supportActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
    supportActionBar.setDisplayHomeAsUpEnabled(true);
}

// Set behavior of Navigation drawer
navigationView.setNavigationItemSelectedListener(
    new NavigationView.OnNavigationItemSelectedListener() {
        // This method will trigger on item Click of navigation menu
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            // Set item in checked state
            menuItem.setChecked(true);
            // TODO: handle navigation
            // Closing drawer on item click
            mDrawerLayout.closeDrawers();
            return true;
        }
    });
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    } else if (id == android.R.id.home) {
        mDrawerLayout.openDrawer(GravityCompat.START);
    }
    return super.onOptionsItemSelected(item);
}

Добавим Floating Action Button (FAB) и вызовем появление SnackBar

Парящая кнопка действия - поэтичный перевод FAB - используется для основного действия в вашем приложении и подчеркивает свою силу и важность паря над UI вашего аппа как единственная круглая кнопка. Создадим FAB, которая бы вызывала SnackBar, элемент, который обеспечивает легкий для восприятия ответ от интерфейса на операцию, проводимую пользователем.

  1. В activity_main.xml добавим FloatingActionButton в конце CoordinatorLayout.
  2. В MainActivity.java, добавим слушатель на касание FAB, которое будет создавать SnackBar

activity_main.xml

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="@dimen/md_keylines"
            android:layout_marginRight="@dimen/md_keylines"
            android:src="@drawable/ic_add_white_24dp" />

MainActivity.java

// Adding Floating Action Button to bottom right of main view
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "Hello Snackbar!",
                        Snackbar.LENGTH_LONG).show();
            }
        });
  1. В папке values-2, обновим styles.xml, чтобы сделать системную плашку прозрачной на Android 5 и выше.

styles.xml

<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
  1. InCardContentFragment.java file add methods when buttons within card pressed shows snackbar.

Приложение должно выглядеть следующим образом:

md-codelab01.png

Создадим Detail View

Используем Intent, чтобы позволить пользователям перемещаться между карточками и их полной репрезентацией. Создадим такой detail view в нашем приложении:

  1. Создадим DetailActivity.java и activity_detail.xml.
  2. Для каждого из элементов списка ListContentFragment.java, TileContentFragment.java, иCardContentFragment.java создадим новый Intent, чтобы каждый из элементов списка имел ссылку на подробный экран с развёрнутой информацией о контенте элемента.
public static class ViewHolder extends RecyclerView.ViewHolder {
    public ViewHolder(LayoutInflater inflater, ViewGroup parent) {
        super(inflater.inflate(R.layout.item_list, parent, false));
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Context context = v.getContext();
                Intent intent = new Intent(context, DetailActivity.class);
                context.startActivity(intent);
            }
        });
    }
}
  1. Не забудьте прописать ваш activity в AndroidManifest.xml.

AndroidManifest.xml

<activity
    android:name=".DetailActivity"
    android:parentActivityName=".MainActivity">
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value=".MainActivity" />
</activity>

Переход к Collapsing Toolbar

Collapsing Toolbar сворачивает toolbar, когда пользователь прокручивает экран вниз и разворачивает при прокручивании вверх. Давайте же двинемся вперёд к collapsing toolbar:

  1. В activity_detail.xml, добавим AppBarLayout и CollapsingToolbarLayout вместе с CoordinatorLayout.

activity_detail.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="@dimen/article_keylines"
        app:expandedTitleMarginStart="@dimen/md_keylines"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/paris"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
  1. В DetailActivity.java установим заголовок для CollapsingToolbar.

DetailActivity.java

// Получим объект Collapsing Toolbar для настройки
CollapsingToolbarLayout collapsingToolbar =
        (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
// Установим заголовок страницы
collapsingToolbar.setTitle(getString(R.string.item_title));

Ура, дело сделано! Теперь вы готовы создавать приложения, основанные на принципах material design.

Если у вас будет свободная минутка, то мы будем очень рады получить отзывы на это занятие. Мы используем эту информацию для улучшения наших уроков и этого урока в частности..

ЖДЁМ ОБРАТНОЙ СВЯЗИ

Что мы прошли:

Следующие шаги

Теперь пришло время добавить material design в ваши собственные приложения.

Узнать больше:

project-end.png

Статью подготовил Тимур Ахметгареев (tim@appintheair.mobi).