Стили кнопок дизайна материалов Android


308

Я запутался в стилях кнопок для дизайна материалов. Я хотел бы получить разноцветные рельефные кнопки, как в прикрепленной ссылке, например кнопки «принудительная остановка» и «удаление», показанные в разделе «Использование». Есть ли доступные стили или мне нужно их определить?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

Я не смог найти стили кнопок по умолчанию.

Пример:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

Если я пытаюсь изменить цвет фона кнопки, добавив

    android:background="@color/primary"

все стили исчезают, такие как сенсорная анимация, тень, закругленный угол и т. д.


В этом мне будет особенно полезна настраиваемая кнопка angrytools.com/android/button
Харак

Ответы:


750

Я добавлю свой ответ, так как я не использую другие предоставленные ответы.

В библиотеке поддержки версии 7 все стили уже определены и готовы к использованию, для стандартных кнопок доступны все эти стили:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button: введите описание изображения здесь

Widget.AppCompat.Button.Colored: введите описание изображения здесь

Widget.AppCompat.Button.Borderless введите описание изображения здесь

Widget.AppCompat.Button.Borderless.Colored: введите описание изображения здесь


Чтобы ответить на вопрос, стиль для использования, следовательно,

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

Как изменить цвет

Для всего приложения:

Цвет всех элементов управления пользовательского интерфейса (не только кнопок, но и кнопок с плавающим действием, флажков и т. Д.) Управляется атрибутом, colorAccentкак описано здесь . Вы можете изменить этот стиль и применить свой собственный цвет в определении вашей темы:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

Для конкретной кнопки:

Если вам нужно изменить стиль определенной кнопки, вы можете определить новый стиль, наследуя один из родительских стилей, описанных выше. В приведенном ниже примере я просто изменил цвет фона и шрифта:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

Тогда вам просто нужно применить этот новый стиль к кнопке с помощью:

android:theme="@style/AppTheme.Button"

Чтобы установить дизайн кнопки по умолчанию в макете, добавьте эту строку в тему styles.xml:

<item name="buttonStyle">@style/btn</item>

где @style/btnваша тема кнопки. Это устанавливает стиль кнопки для всех кнопок в макете с определенной темой


6
Я думаю, что это лучший способ сделать это на данный момент.
xsorifc28

5
Вы тестировали его на устройстве Kitkat?
Maohieng

14
colorButtonNormalattr не работает для меня на Android 4.1.2. Ни в коем случае не может установить цвет кнопки ( android:backgroundнарушает стиль материала кнопки).
Константин Конопко

2
@YoannHercouet на какой версии Android вы делали эти изображения? На моем Андро 4.1.2 и 4.4.2 кнопки со стилем = ".. AppCompat.Button" не поднимаются.
Grzegorz Dev

5
@konopko Если вы похожи на меня, вы использовали style=""вместо того, Android:theme=""чтобы перейти на последнюю, исправили эту проблему для меня
Джон Сноу

84

Самое простое решение


Шаг 1. Используйте последнюю версию библиотеки поддержки

compile 'com.android.support:appcompat-v7:25.2.0'

Шаг 2. Используйте AppCompatActivity в качестве родительского класса Activity.

public class MainActivity extends AppCompatActivity

Шаг 3. Использование пространства имен приложения в XML-файле макета

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Шаг 4: Используйте AppCompatButton вместо Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

введите описание изображения здесь


7
Вам не нужно указывать, android.support.v7.widget.AppCompatButtonпотому что инструмент сборки автоматически использует это, когда вы указываетеButton
Mark

2
включить / отключить автоматически работать? или нам нужно снова указать стили для него?
Sundeep1501

Это удаляет список состояний для pre-lollipop для меня, в результате чего кнопка без каких-либо эффектов щелчка
Флориан Вальтер

Кажется, работает на Android P, за исключением того, что textColorпереопределяет цвет текста для отключенного состояния.
l33t

@ Sundeep1501 По Widget.MaterialComponents.Button.OutlinedButtonкрайней мере, не изменился на серый .
Dr.jacky

66

Если я вас правильно понимаю, вы хотите сделать что-то вроде этого:
введите описание изображения здесь

В таком случае должно быть достаточно использовать:

<item name="android:colorButtonNormal">#2196f3</item>

Или для API менее 21:

<item name="colorButtonNormal">#2196f3</item>

В дополнение к использованию материала темы учебника .

Анимированный вариант здесь .


1
@androiddeveloper отправил сэмпл в GitHub, главное здесь - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky

Я думаю, что вы должны использовать библиотеку Compat для более старых версий.
Алексей Коровянский

2
Это не так, но вы можете установить его, если API 21 и выше. Я нашел способ, но я не знаю, как лучше это сделать.
Android-разработчик

4
я могу иметь несколько цветов с этим подходом? кажется, что позволяет только по одному за раз.
gerfmarquez

2
@gerfmarquez Вам нужно иметь разные стили для разных кнопок
KISHORE_ZE

39

Вот как я получил то, что хотел.

Сначала сделал кнопку (в styles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

Волнистость и фон для кнопки, как для рисования primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Это добавило волновой эффект, который я искал.


3
Угловой радиус должен быть 2dp, чтобы соответствовать базовым активам. Кроме того, translationZ не следует устанавливать в XML, и нет необходимости переопределять высоту по умолчанию, minWidth, minHeight или margin.
alanv

Поле по умолчанию становится равным 0 при применении пользовательского стиля, по какой-то причине свойства не наследуются.
xsorifc28

3
Ах, я не заметил, что вам не хватает родительского стиля. Вы должны добавить parent = "Widget.Material.Button" или просто полностью пропустить создание собственного стиля и просто установить фон для самой кнопки.
alanv

Ой! Я не знал, что существует, не сталкивался с этим ни в одной документации. Я попробую это.
xsorifc28

Хотя я не уверен, как мне это сделать без собственного стиля. Не могли бы вы показать мне пример?
xsorifc28

33

Благодаря стабильному выпуску компонентов материалов Android в ноябре 2018 года Google переместил компоненты материалов из пространства имен android.support.designв com.google.android.material.
Библиотека компонентов материалов является заменой библиотеки поддержки дизайна Android.

Добавьте зависимость к вашему build.gradle:

dependencies { implementation com.google.android.material:material:1.0.0 }

Затем добавьте MaterialButtonсвой макет:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Вы можете проверить полную документацию здесь и API здесь .

Для изменения цвета фона у вас есть 2 варианта.

  1. Используя backgroundTintатрибут.

Что-то вроде:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Это будет лучший вариант на мой взгляд. Если вы хотите переопределить некоторые атрибуты темы из стиля по умолчанию, тогда вы можете использовать новый materialThemeOverlayатрибут.

Что-то вроде:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

Вариант № 2 требует 'com.google.android.material:material:1.1.0'.

введите описание изображения здесьвведите описание изображения здесь

Старая поддержка библиотеки:

С новой библиотекой поддержки 28.0.0 библиотека проектирования теперь содержит MaterialButton.

Вы можете добавить эту кнопку в наш файл макета с помощью:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

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

Вы можете настроить кнопку с этими атрибутами:

  • app:rippleColor: Цвет, который будет использоваться для эффекта ряби кнопок
  • app:backgroundTint: Используется для нанесения оттенка на фон кнопки. Если вы хотите изменить цвет фона кнопки, используйте этот атрибут вместо фона.

  • app:strokeColor: Цвет, который будет использоваться для нажатия кнопки

  • app:strokeWidth: Ширина, которая будет использоваться для нажатия кнопки
  • app:cornerRadius: Используется для определения радиуса, используемого для углов кнопки

android.support.design.button.MaterialButton , похоже, не компилируется
Игорь Ганапольский

3
@IgorGanapolsky Вы правы. Только что обновил ответ стабильной версией.
Габриэле Мариотти

20

Вот пример, который поможет последовательно применять стиль кнопок в вашем приложении.

Вот пример темы, которую я использовал с конкретными стилями ..

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

Вот как я определил форму кнопки и эффекты внутри папки res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Углы 2dp должны соответствовать теме материала.


6
Обратная совместимость?
Скайнет

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

18

Рядом android.support.design.button.MaterialButtonкотором упоминает Габриэле Мариотти ),

Существует также другой Buttonвиджет с именем, com.google.android.material.button.MaterialButtonкоторый имеет разные стили и простирается от AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Заполнено, повышено Button(по умолчанию) :введите описание изображения здесь

style="@style/Widget.MaterialComponents.Button"

Заполнено, без поднятияButton :введите описание изображения здесь

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

ТекстButton : введите описание изображения здесь

style="@style/Widget.MaterialComponents.Button.TextButton"

ЗначокButton : введите описание изображения здесь

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Текст Buttonс иконкой :введите описание изображения здесь


Читайте: https://material.io/develop/android/components/material-button/

Удобный класс для создания новой кнопки Материал.

Этот класс предоставляет обновленные стили материалов для кнопки в конструкторе. Виджет будет отображать правильные стили материала по умолчанию без использования флага стиля.


1
Вы знаете, как вы можете изменить его цвет?
Даниэль Гомес Рико

1
app:backgroundTintи app:backgroundTintModeиз документации .
ท ઽ ૯ ท

как они назначают неактивное состояние цвета
Зайд Мирза

6

Я пробовал много ответов и сторонних библиотек, но ни один из них не удерживал границы и не повышал эффект перед леденцом на палочке, в то время как имел эффект пульсации на леденце без недостатка. Вот мое окончательное решение, объединяющее несколько ответов (границы / рельефные изображения плохо отображаются на изображениях из-за глубины цвета в оттенках серого):

леденец

введите описание изображения здесь

Pre-леденец

введите описание изображения здесь

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

вытяжка-V21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

рисуем / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

Деятельность по созданию

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

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

4

1) Вы можете создать кнопку с закругленными углами, определив XML-объект для рисования, и вы можете увеличить или уменьшить радиус, чтобы увеличить или уменьшить округлость угла кнопки. Установите этот XML Drawable в качестве фона кнопки.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

закругленная угловая кнопка

2) Чтобы изменить анимацию перехода теней и теней по умолчанию между состояниями кнопок, необходимо определить селектор и применить его к кнопке с помощью свойства android: stateListAnimator. Для полной ссылки настройки кнопки: http://www.zoftino.com/android-button


1

Я только что создал библиотеку Android, которая позволяет легко изменять цвет кнопки и цвет пульсации

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

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


1
Библиотека выдает ошибку: rippleColor has already been definedнекоторые пользователи уже упоминали об этом в «выпусках»
SagiLow

0

Вы можете добавить авиацию к виду, добавив к нему ось z, и можете иметь тень по умолчанию. эта функция была предоставлена ​​в L-превью и будет доступна после ее выпуска. На данный момент вы можете просто добавить изображение, которое дает этот вид для фона кнопки


Понимаю. Я должен сделать это вручную тогда. Как бы я добавил эффект радиального касания? Просто эффект перехода для кнопки?
xsorifc28

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.