Кнопки дизайну матеріалів для Android - Попередньо льодяник

Як застосувати "підняту кнопку" та "плоску кнопку", як описано в інструкціях щодо дизайну матеріалів Google?

Підняті кнопки додають розмір переважно плоским макетам. Вони підкреслюють функції на зайнятих або широких приміщеннях.

Використовуйте плоскі кнопки для панелей інструментів та діалогових вікон, щоб уникнути надмірного шарування.

Джерело: http://www.google.com/design/spec/components/buttons.html

Для цього потрібен 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, перевірте мою відповідь на інше запитання: 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>