Влияние материала на кнопку с цветом фона
Я использую библиотеку поддержки Android v21.
Я создал кнопку с пользовательским цветом фона. Эффекты дизайна материала, такие как рябь, раскрытие, исчезли (за исключением повышения при нажатии), когда я использую фоновый цвет.
<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"
/>
17 ответов
Когда вы используете 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 с желаемым фоном, установленным там
- установить 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 устройствах, сохраняя обычные кнопки до 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"/>
Ответ @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>
Я столкнулся с этой проблемой сегодня, фактически играя с библиотекой 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.
Я использовал 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"/>
Я пришел к этому сообщению в поисках способа иметь цвет фона моего 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"
/>
v22.1 из appcompat-v7 представил некоторые новые возможности. Теперь можно назначить конкретную тему только одному представлению.
Устаревшее использование app: тема для оформления панели инструментов. Теперь вы можете использовать android:theme для панелей инструментов на всех устройствах уровня API 7 и выше, а также android:theme theme для всех виджетов на устройствах уровня 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"/>
Если вы в порядке с использованием сторонней библиотеки, проверьте https://github.com/traex/RippleEffect. Это позволяет вам добавить эффект Ripple к ЛЮБОМ представлению с помощью всего лишь нескольких строк кода. Вам просто нужно обернуть в свой файл макета XML элемент, который вы хотите иметь эффект ряби с com.andexert.library.RippleView контейнер.
В качестве дополнительного бонуса требуется Min SDK 9, так что вы можете иметь согласованность дизайна для всех версий ОС.
Вот пример, взятый из репозитория GitHub библиотек:
<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"
и цвет примет на 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
Программно:
myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));
Например:
MaterialButton myMaterialButton = new MaterialButton(this);
myMaterialButton.setLayoutParams(myButtonParams);
myMaterialButton.setBackgroundColor(Color.GRAY);
myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));
Я попробовал это:
android:backgroundTint:"@color/mycolor"
вместо изменения свойства фона. Это не устраняет материальный эффект.