Материальный эффект на кнопке с цветом фона
Я использую библиотеку поддержки Android v21.
Я создал кнопку с пользовательским цветом фона. Эффекты дизайна материала, такие как ripple, reveal, исчезли (за исключением высоты при щелчке), когда я использую задний основной цвет.
<Button
style="?android:attr/buttonStyleSmall"
android:background="?attr/colorPrimary"
android:textColor="@color/white"
android:textAllCaps="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button1"
/>

Ниже приведена обычная кнопка, и эффекты работают просто отлично.
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:text="Button1"
/>

16 ответов:
при использовании
android:background, вы заменяете большую часть стиля и внешнего вида кнопки с пустым цветом.обновление: на версии 23.0.0 на AppCompat, есть новый
Widget.AppCompat.Button.Coloredстиль, который использует вашу темуcolorButtonNormalдля гостей с ограниченными физическими цвета иcolorAccentцвета "включено".это позволяет применить его к кнопке напрямую через
<Button ... style="@style/Widget.AppCompat.Button.Colored" />если вы нужен заказ
colorButtonNormalилиcolorAccent, вы можете использоватьThemeOverlayкак поясняется в это pro-tip иandroid:themeна кнопку.Предыдущий Ответ
вы можете использовать drawable в вашем каталоге v21 для вашего фона, например:
<?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>это обеспечит ваш цвет фона
?attr/colorPrimaryи имеет анимацию пульсаций по умолчанию, используя значение по умолчанию?attr/colorControlHighlight(который вы также можете установить в своей теме, если бы вы любить.)Примечание: вам придется создать пользовательский селектор для менее чем v21:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/primaryPressed" android:state_pressed="true"/> <item android:drawable="@color/primaryFocused" android:state_focused="true"/> <item android:drawable="@color/primary"/> </selector>предполагая, что у вас есть некоторые цвета, которые вы хотели бы для состояния по умолчанию, нажатой и сфокусированной. Лично я сделал снимок экрана пульсации на полпути к выбору и вытащил из него основное/сфокусированное состояние.
существует еще одно простое решение для обеспечения пользовательского фона для" плоских "кнопок, сохраняя при этом их" материальные " эффекты.
- поместите кнопку в ViewGroup с нужным фоном, установленным там
- set selectableItemBackground из текущей темы в качестве фона для вашей кнопки (API >=11)
т. е. :
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/blue"> <Button style="?android:attr/buttonStyleSmall" android:background="?android:attr/selectableItemBackground" android:textColor="@android:color/white" android:textAllCaps="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button1" /> </FrameLayout>может использоваться для квартира кнопки, он работает на API >=11, и вы получите пульсацию эффект на > =21 устройств, сохраняя регулярные кнопки на pre-21 до AppCompat обновляется для поддержки пульсации там, а также.
вы также можете использовать selectableItemBackgroundBorderless для > =только 21 кнопки.
вот простой и обратно совместимый способ доставить эффект пульсации к поднятым кнопкам с пользовательским фоном.
ваш макет должен выглядеть так
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/my_custom_background" android:foreground="?android:attr/selectableItemBackground"/>
я столкнулся с этой проблемой сегодня, фактически играя с библиотекой v22.
предполагая, что вы используете стили, вы можете установить
colorButtonNormalсвойство и кнопки будут использовать этот цвет по умолчанию.<style name="AppTheme" parent="BaseTheme"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/primaryColor</item> <item name="colorPrimaryDark">@color/primaryColorDark</item> <item name="colorAccent">@color/accentColor</item> <item name="colorButtonNormal">@color/primaryColor</item> </style>за пределами этого вы все еще можете сделать стиль для кнопки, а затем использовать его на кнопку, если вам нужен ассортимент цветов (не проверял, просто размышлял).
не забудьте добавить
android:перед именами элементов в вашем v21 стиль.
С помощью AppCompat (22.1.1+) вы можете добавить такой стиль:
<style name="MyGreenButton"> <item name="colorButtonNormal">#009900</item> </style>и использовать его, просто применив стиль:
<android.support.v7.widget.AppCompatButton style="@style/MyGreenButton" android:layout_width="match_width" android:layout_height="wrap_content" android:text="A Green Button" />программно изменяя цвет, я обнаружил, что единственным способом обновить цвет (на API 15 или 16) было использовать вместо этого "список оттенков фона". И это не удаляет хорошую радиальную анимацию на устройствах API 21:
ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB button.setSupportBackgroundTintList(colorStateList);, потому что
button.setBackground(...)иbutton.getBackground().mutate().setColorFilter(...)не меняйте цвет кнопки на API 15 и 16, как они это делают API 21.
ответ @ianhanniballake абсолютно правильный и простой. Но мне потребовалось несколько дней, чтобы понять. Для тех, кто не понимает его ответ, вот более подробная реализация
<Button android:id="@+id/btn" style="@style/MaterialButton" ... /> <style name="MaterialButton" parent="Widget.AppCompat.Button.Colored"> <item name="android:theme">@style/Theme.MaterialButton</item> ... </style> <style name="Theme.MaterialButton" parent="YourTheme"> <item name="colorAccent">@color/yourAccentColor</item> <item name="colorButtonNormal">@color/yourButtonNormalColor</item> </style>===или===
<Button android:id="@+id/btn" style="@style/Widget.AppCompat.Button.Colored" android:theme="@style/Theme.MaterialButton" /> <style name="Theme.MaterialButton" parent="YourTheme"> <item name="colorAccent">@color/yourAccentColor</item> <item name="colorButtonNormal">@color/yourButtonNormalColor</item> </style>
я использовал backgroundTint и передний план:
<Button android:layout_width="match_parent" android:layout_height="40dp" android:backgroundTint="@color/colorAccent" android:foreground="?android:attr/selectableItemBackground" android:textColor="@android:color/white" android:textSize="10sp"/>
v22.1наappcompat-v7ввел некоторые новые возможности. Теперь можно назначить определенную тему только для одного представления.устаревшее использование приложения: тема для панели инструментов стиля. Теперь вы можете использовать android: тема для панелей инструментов на всех устройствах уровня API 7 и выше и android: поддержка темы для всех виджетов на уровне API 11 и выше устройства.
поэтому вместо установки нужного цвета в глобальной теме, мы создаем новый и назначаем его только для элемент
Buttonпример:
<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorButtonNormal">@color/myColor</item> </style>и использовать этот стиль в качестве темы вашего
Button<Button style="?android:attr/buttonStyleSmall" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button1" android:theme="@style/MyColorButton"/>
Я пришел к этому сообщению, ища способ иметь цвет фона моего
ListViewпункт, но сохранить пульсацию.Я просто добавил свой цвет в качестве фона и selectableItemBackground в качестве переднего плана:
<style name="my_list_item"> <item name="android:background">@color/white</item> <item name="android:foreground">?attr/selectableItemBackground</item> <item name="android:layout_height">@dimen/my_list_item_height</item> </style>и это работает как шарм. Я думаю, что тот же метод может быть использован и для кнопок. Удачи :)
Если вы заинтересованы в ImageButton вы можете попробовать эту простую вещь:
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_button" android:background="?attr/selectableItemBackgroundBorderless" />
Если вы не против использовать стороннюю библиотеку, проверьте traex/RippleEffect. Это позволяет добавить эффект пульсации в любой вид с помощью всего нескольких строк кода. Вам просто нужно обернуть в свой XML-файл макета элемент, который вы хотите иметь эффект пульсации с
com.andexert.library.RippleViewконтейнер.в качестве дополнительного бонуса требуется Min SDK 9, чтобы вы могли иметь согласованность дизайна в разных версиях ОС.
вот пример, взятый из библиотеки GitHub repo:
<com.andexert.library.RippleView android:layout_width="wrap_content" android:layout_height="wrap_content" app:rv_centered="true"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@android:drawable/ic_menu_edit" android:background="@android:color/holo_blue_dark"/> </com.andexert.library.RippleView>вы можете изменить цвет пульсации, добавив этот атрибут элемент RippleView:
app:rv_color="@color/my_fancy_ripple_color
<android.support.v7.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:backgroundTint="#fff" android:textColor="#000" android:text="test"/>использовать
xmlns:app="http://schemas.android.com/apk/res-auto"и цвет будет acept на pre-lolipop
есть два подхода, объясненные в большом учебнике быть Алекс Локвуд: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html:
подход #1: Изменение цвета фона кнопки с ThemeOverlay
<!-- res/values/themes.xml --> <style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light"> <item name="colorAccent">@color/googred500</item> </style>
<Button style="@style/Widget.AppCompat.Button.Colored" android:layout_width="wrap_content" android:layout_height="wrap_content" android:theme="@style/RedButtonLightTheme"/>подход #2: Установка фонового оттенка AppCompatButton
<!-- res/color/btn_colored_background_tint.xml --> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Disabled state. --> <item android:state_enabled="false" android:color="?attr/colorButtonNormal" android:alpha="?android:attr/disabledAlpha"/> <!-- Enabled state. --> <item android:color="?attr/colorAccent"/> </selector>
<android.support.v7.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:backgroundTint="@color/btn_colored_background_tint"/>
программно применяя цвет:
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { ColorStateList colorStateListRipple = new ColorStateList( new int[][] {{0}}, new int[] {Color.WHITE} // ripple color ); RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground(); rippleDrawable.setColor(colorStateListRipple); myButton.setBackground(rippleDrawable); // applying the ripple color } ColorStateList colorStateList = new ColorStateList( new int[][]{ new int[]{android.R.attr.state_pressed}, // when pressed new int[]{android.R.attr.state_enabled}, // normal state color new int[]{} // normal state color }, new int[]{ Color.CYAN, // when pressed Color.RED, // normal state color Color.RED // normal state color } ); ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors
Я попытался это:
android:backgroundTint:"@color/mycolor"вместо изменения свойства фона. Это не устраняет материальный эффект.
Comments