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

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


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

raised buttons


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

flat buttons

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

Ответ 1

Для этого требуется 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"
/>

Ответ 2

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

Пример:

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

Здесь ссылка для атрибута.

Ответ 3

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

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

Ответ 4

Я использую это как фон для кнопки с 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"

Ответ 5

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

Ответ 6

Для описания того, как это сделать, используя appcompat libray, проверьте мой ответ на другой вопрос: fooobar.com/questions/35150/...

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

Ответ 8

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

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