Стилі кнопок дизайну матеріалів для 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"

всі стилі відходять, як-от сенсорна анімація, тінь, закруглений кут тощо.


Я це WII бути найбільш корисним в настроюється кнопка angrytools.com/android/button
Кхарак

Відповіді:


750

Я додам свою відповідь, оскільки не використовую жодної з інших наданих відповідей.

З бібліотекою підтримки v7 всі стилі фактично вже визначені та готові до використання, для стандартних кнопок доступні всі ці стилі:

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 ви робили ці зображення? На моїх кнопках Andro 4.1.2 і 4.4.2 стилі = ".. AppCompat.Button" не піднімаються.
Гжегож Дев

5
@konopko Якщо ти схожий на мене, ти style=""замість того, Android:theme=""щоб переходити на останнє, вирішив цю проблему для мене
Джон Сноу

84

Найпростіше рішення


Крок 1. Використовуйте останню бібліотеку підтримки

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

Крок 2: Використовуйте AppCompatActivity як свій батьківський клас діяльності

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 замість кнопки

<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
Марк

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

Це видаляє список станів для попередньої льодяниці для мене, в результаті чого з'являється кнопка без жодних ефектів натискання
Флоріан Уолтер

Здається, працює на 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 і вище. Я знайшов спосіб, але не знаю, який найкращий спосіб зробити це.
андроїд розробник

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

2
@gerfmarquez U need tk мають різні стилі для різних кнопок
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 Material Components в листопаді 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'.

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

Бібліотека підтримки OLD:

З новою бібліотекою підтримки 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 не здається складати
IgorGanapolsky

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 / dravable-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
Назад сумісний?
Скайнет

Вибачте, я запізнююсь з відповіддю, проте це не є сумісним назад, оскільки теми були представлені досить пізно.
samkya

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

Я спробував багато відповідей і сторонніх лайків, але жодна не тримала кордону і не впливала на попередню льодяник, маючи ефект пульсації на льодяник без недоліку. Ось моє остаточне рішення, що поєднує в собі кілька відповідей (межа / підняті не добре відображаються на gif-файлах через глибину відтінків сірого):

Льодяник

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

Попередній льодяник

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

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>

dravable-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>

dravable / 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>

Діяльність onCreate

    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, який можна малювати, як фон кнопки.

<?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.