Я запутался в стилях кнопок для Material Design. Я хотел бы получить разноцветные рельефные кнопки, как в прикрепленной ссылке. как кнопки "принудительной остановки" и "удаления", которые можно увидеть в разделе использования. Существуют ли доступные стили или мне нужно определить их?
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"
все стили исчезают, например, анимация прикосновения, тень, закругленный угол и т.д.
Я добавлю мой ответ, так как я Дон'т использовать любые другие ответы.
С библиотекой поддержки В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"
Виджетов.Совместимости приложений.Кнопка`:
Виджетов.Совместимости приложений.Кнопки.Цвета:
Виджетов.Совместимости приложений.Кнопки.Без границ`
Виджетов.Совместимости приложений.Кнопки.Без границ.Цвета:
Чтобы ответить на вопрос, поэтому стиль использовать
<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>
где `@стиль/БТН-это ваши темы. Это задает стиль кнопки для всех кнопок в макете с определенной темой
compile 'com.android.support:appcompat-v7:25.2.0'
public class MainActivity extends AppCompatActivity
<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">
<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"/>
Если я правильно вас понял, вы хотите сделать что-то вроде этого:
В таком случае этого должно быть достаточно для использования:
<item name="android:colorButtonNormal">#2196f3</item>
Или для API меньше 21:
<item name="colorButtonNormal">#2196f3</item>
В дополнение к Учебнику по использованию темы Material.
Анимированный вариант находится [здесь][3].
Вот как я получил то, что хотел.
Сначала я сделал кнопку (в 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>
Это добавило эффект пульсации, который я искал.
С стабильный выпуск материальных компонентов Android В ноября 2018, Гугл перевел материалы из пространства имен
для Андроид.поддержка.дизайн
вком.Гугл.андроид.материал
. Материал компонента библиотека является заменой для проектирования библиотека поддержки Андроида.
Добавить зависимость в сборке.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 варианта.
Что-то вроде:
<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">@color/button_selector</item>
//..
</style>
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 требует 'сом.Гугл.андроид.материал:материал: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" />
По умолчанию этот класс будет использовать цветовой акцент вашего теме кнопки заполнено цвет фона и белый для кнопок цвет текста.
Можно настроить кнопки с этими атрибутами:
приложение:rippleColor`: цвет используется для кнопки волновой эффект
приложение:backgroundTint`: применять оттенок на фоне кнопки. Если вы хотите изменить цвет фона кнопки, использовать этот атрибут вместо фона.
приложение:strokeColor: в цвет, который будет использоваться для кнопки инсульта
приложение:strokeWidth`: ширину использовать для нажатия кнопки
приложение:структура cornerradius`: используется для определения радиуса используется для углов кнопки
Вот образец, который поможет в нанесением стиль кнопки последовательно через ваше приложение.
Вот пример темы я использовал с конкретными стилями..
<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>
Это, как я определил форму кнопку & эффекты внутри РЭС/папки холст-в21...
<?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 фирмы углы, чтобы держать его в соответствии с материалом темы.
Рядом с андроида.поддержка.дизайн.кнопки.MaterialButton` (который отметил Габриэле Мариотти),
Появилась другая кнопка
виджет ком.Гугл.андроид.материал.кнопки.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"
Заполняется, повышенный кнопка
(по умолчанию):
style="@style/Widget.MaterialComponents.Button"
Заполняется, unelevated кнопка
:
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this
Читать: https://material.io/develop/android/components/material-button/
класс комфорта для создания новой кнопки материал.
этот класс предоставляет обновленный материал стили для кнопки в конструктор. Виджет будет отображать правильный материал по умолчанию стили без использования флага стиль.
Я пробовал много ответов & сторонние библиотеки, но никто не держал границу и подняли воздействие на предварительно леденец, а оказывает волновой эффект на Lollipop без недостаток. Вот мое окончательное решение, объединяющее несколько ответов (границы/поднял не вынесено из-за картинки в оттенки серого глубина цвета) :
Леденец
Предварительно леденец
сборки.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>
drawable-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>
drawable/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;
}
});
<?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>
Я'вэ просто создан для Андроид библиотеки, что позволяет легко изменять цвет кнопки и пульсация цвета
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"/>
Вы Don'т нужно создать стиль для каждой кнопки вы хотите, остроумие другой цвет, что позволяет настроить цвета случайным образом
Вы можете придать вид авиации, добавив к нему ось z и добавив к нему тень по умолчанию. Эта возможность была предоставлена в предварительном просмотре L и будет доступна после его выхода. На данный момент вы можете просто добавить изображение с таким видом для фона кнопки