page.title=Material Design
page.tags=Material Design
page.type=design
page.image=design/material/images/MaterialLight.png

@jd:body

<!-- developer docs box -->
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
  <div>
    <h3>Документация для разработчиков</h3>
    <p>Создание приложений с помощью Material Design</p>
  </div>
</a>

<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
    <h3>Видеоролик</h3>
    <p>Введение в Material Design</p>
</div>
</a>

<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
<div>
    <h3>Видеоролик</h3>
    <p>Бумага и чернила: материалы, имеющие первостепенное значение</p>
</div>
</a>

<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
<div>
    <h3>Видеоролик</h3>
    <p>Material Design в приложениях для конференции Google I/O</p>
</div>
</a>


<p itemprop="description">Material Design представляет собой комплексную концепцию создания визуальных, движущихся и
 интерактивных элементов для различных платформ и устройств. Теперь Android включает в себя поддержку
приложений с элементами Material Design. Чтобы использовать элементы Material Design в своих приложениях под Android, руководствуйтесь инструкциями
в <a href="http://www.google.com/design/spec">спецификации Material Design</a>, а также воспользуйтесь
новыми компонентами и функциями, доступными в Android 5.0 (уровень API 21) и выше.</p>

<p>Android предоставляет следующие элементы для построения приложений в соответствии с концепцией Material Design:</p>

<ul>
  <li>новую тему;</li>
  <li>новые виджеты для сложных представлений;</li>
  <li>новые API-интерфейсы для нестандартных теней и анимаций.</li>
</ul>

<p>Дополнительные сведения о реализации Material Design в Android см. в разделе
<a href="{@docRoot}training/material/index.html">Создание приложений с помощью Material Design</a>.</p>


<h3>Тема Material Design</h3>

<p>Тема Material Design предоставляет новый стиль для ваших приложений, системные виджеты, для которых можно настраивать
цветовую палитру, и анимации, выполняемые по умолчанию в качестве реакции на касание и при переходах между действиями.</p>

<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
  <div style="width:140px;margin:0 auto">
  <p style="margin-top:8px">Тема Material Design в темных тонах</p>
  </div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
  <div style="width:140px;margin:0 auto">
  <p style="margin-top:8px">Тема Material Design в светлых тонах</p>
  </div>
</div>
<br style="clear:left"/>
</div>

<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/theme.html">Использование темы
Material Design</a>.</p>


<h3>Списки и подсказки</h3>

<p>Android предоставляет два новых виджета для отображения подсказок и списков с использованием стилей
и анимаций Material Design:</p>

<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
  <p>Виджет <code>RecyclerView</code> Представляет собой более гибкую версию <code>ListView</code>,
которая поддерживает различные типы макетов и способствует повышению производительности.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
  <p>Виджет <code>CardView</code> позволяет отображать важные элементы информации внутри
  подсказок, имеющие согласованный внешний вид и поведение.</p>
</div>
<br style="clear:left"/>
</div>

<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/lists-cards.html">Создание списков
и подсказок</a>.</p>


<h3>Тени представлений</h3>

<p>Теперь, помимо свойств X и Y, представления в Android имеют свойство
Z. Это новое свойство показывает, насколько представление "приподнято", иными словами, определяет</p>

<ul>
<li>размер тени: чем больше Z, тем больше тени, отбрасываемые представлением;</li>
<li>порядок рисования: представления с более высокими значениями Z отображаются поверх других.</li>
</ul>

<div style="width:290px;margin-left:35px;float:right">
  <div class="framed-nexus5-port-span-5">
  <video class="play-on-hover" autoplay>
    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
  </video>
  </div>
  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
    <em>Для воспроизведения фильма нажмите на экран устройства</em>
  </div>
</div>

<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/shadows-clipping.html">Определение
теней и обрезка представлений</a>.</p>


<h3>Анимация</h3>

<p>Новые API-интерфейсы анимации позволяют создавать нестандартную анимацию для реакции на касание в элементах пользовательского интерфейса,
изменения состояниия представления и переходов между действиями.</p>

<p>Эти API-интерфейсы позволяют</p>

<ul>
<li style="margin-bottom:15px">
реагировать на касание в представлениях, используя анимацию для <strong>реакции на касание</strong>;
</li>
<li style="margin-bottom:15px">
скрывать и отображать представление с помощью анимации для <strong>кругового появления</strong>;
</li>
<li style="margin-bottom:15px">
переключаться меду действиями с помощью настраиваемой анимации для <strong>переходов между действиями</strong>;
</li>
<li style="margin-bottom:15px">
создавать более естественное движение с помощью анимации для <strong>перемещения по кривой</strong>;
</li>
<li style="margin-bottom:15px">
анимировать изменение одного или нескольких свойств представления с помощью анимации для <strong>изменения состояния представления</strong>;
</li>
<li style="margin-bottom:15px">
отображать анимацию в <strong>графических элементах списков состояний</strong> в помежутке между изменением состояний представления.
</li>
</ul>

<p>Анимация для реакции на касание встроена а некоторые стандартные представления, например, кнопки. Новые API-интерфейсы
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления.</p>

<p>Дополнительные сведения, см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой 
анимации</a>.</p>


<h3>Графические объекты</h3>

<p>Следующие возможности по работе с графическими объектами облегчают реализацию приложений с элементами Material Design:</p>

<ul>
<li><strong>векторные объекты</strong> можно масштабировать без ущерба для четкости, и они отлично подходят
в качестве одноцветных значков приложения;</li>
<li><strong>тонирование графических объектов</strong> позволяет определять растровые изображения как альфа-маску и тонировать их
нужным цветом во время выполнения;</li>
<li><strong>извлечение цвета</strong> позволяет автоматически извлекать главные цвета из
растровых изображений.</li>
</ul>

<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с 
элементами дизайна</a>.</p>