Кнопки для дизайна материалов для Android – Pre lollipop

Как реализовать «поднятую кнопку» и «плоскую кнопку», как описано в руководстве по дизайну материалов Google?


Приподнятые кнопки добавляют размерность в основном плоские макеты. Они подчеркивают> функции на занятых или широких пространствах.

Поднятые кнопки


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

Плоские кнопки

Источник: http://www.google.com/design/spec/components/buttons.html

Solutions Collecting From Web of "Кнопки для дизайна материалов для Android – Pre lollipop"

Для этого требуется Android 5.0

Поднятая кнопка

Наследуйте стиль своей кнопки от Widget.Material.Button, и будет применено стандартное повышение и повышение.

<style name="Your.Button" parent="android:style/Widget.Material.Button"> <item name="android:background">@drawable/raised_button_background</item> </style> 

Затем вам нужно создать файл raised_button_background.xml с цветом фона вашей кнопки внутри тега пульсации:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="@color/button_color"/> </ripple> 

Плоская кнопка

Изменить: вместо моего предыдущего совета для плоских кнопок вы должны использовать следующий совет, приведенный Стивеном Кайзером ниже:

 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?android:attr/borderlessButtonStyle" /> 

Изменить: если вы используете библиотеку поддержки, вы можете добиться того же результата на устройствах Pre-Lollipop, используя style="?attr/borderlessButtonStyle" . (Обратите внимание на отсутствие android: Приведенный выше пример

 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?attr/borderlessButtonStyle" /> 

Чтобы реализовать плоские кнопки, вы можете просто добавить style="?android:attr/borderlessButtonStyle" .

Пример:

 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?android:attr/borderlessButtonStyle" /> 

Вот ссылка для атрибута.

Вы можете использовать MaterialDesignLibrary . Это сторонняя библиотека.

Это библиотека с компонентами Android L, которую вы используете в android 2.2. Если вы хотите использовать эту библиотеку, вам нужно только загрузить проект MaterialDesign, импортировать его в рабочую область и добавить проект в качестве библиотеки в свои настройки проекта Android.

Я работаю над библиотекой материальной совместимости. Класс кнопки есть и поддерживает анимированные тени и пульсацию касания. Возможно, вы найдете это полезным. Вот ссылка .

Я использую это как фон для кнопки с AppCompat, и на ней изображена поднятая кнопка (со всеми рябинами), надеюсь, что это поможет.

MyRaisedButton.xml – внутри drawable папки:

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/yourColor"/> <corners android:radius="6dp"/> </shape> </item> <item android:drawable="?android:selectableItemBackground"/> </layer-list> 

Styles.xml :

 <resources> <style name="AppTheme" parent="AppTheme.Base"/> <style name="AppTheme.Base" parent="Theme.AppCompat"> </resources> 

Styles.xml (v21) :

 ... <style name="AppTheme" parent="AppTheme.Base"> 

Layout.xml :

 ... android:background="@drawable/myRaisedButton" 

Для описания того, как это сделать, используя appcompat libray, проверьте мой ответ на другой вопрос: https://stackoverflow.com/a/27696134/1932522

Это покажет, как использовать поднятые и плоские кнопки для Android 5.0 и более ранних версий (до уровня API 11)!

Вы попросили библиотеку элементов дизайна библиотекивы ее получилиhttps://github.com/navasmdc/MaterialDesignLibrary

Вам также может потребоваться добавить нижнюю границу к вашей кнопке, чтобы иметь возможность увидеть эффект теневой кнопки:

 <item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item> <item name="android:elevation">1dp</item>