Кнопка Android Ripple на Lollipop и подсветка на предварительно леденец

Привет, поэтому я немного смущен и задаюсь вопросом, может ли кто-нибудь указать мне в правильном направлении.

Зайдите и используйте Google Play Store на Lollipop и pre-lollipop

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

На pre-lollipo вы получаете этот эффект выделения.

Как это делается?

На данный момент в моем приложении у меня есть каталог drawable-v21, который содержит этот селектор

В основном это волна на моем фоне

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:id="@android:id/mask" android:drawable="@android:color/white"/> <item android:drawable="@color/colorAccentWith92PercentOpacity"/> </ripple> 

Тем не менее, другие ответы говорят об использовании

андроид: «атр / selectableItemBackground» фон =

Чтобы получить эффект подсветки на pre-lollipop, но это переопределяет мой фон. Как я могу установить это поверх моего текущего фона?

Также мне нужно создать рисоваемость (в drawble-v21) для каждого типа кнопки в моем приложении? Как мне сделать это для элементов просмотра ресайклеров?

Что делает этот вопрос уникальным

Я не хочу пульсации для pre-lollipop. Я спрашиваю, как разработчики эффективно заставляют свою кнопку пульсировать на леденец и сильный световой эффект на pre

Опция 1

Определите colorControlHighlight в своей теме, и пока вы используете кнопки appcompat-v7 по умолчанию, цвет подсветки должен работать как готовый.

Вариант 2

Это пример того, как я поддерживал стиль кнопки «Материал» с немного кроссфейдной анимацией и тенями без использования внешних библиотек. Пусть это поможет вам на вашем пути.

Если кнопка будет белым текстом на темном фоне ( @color/control_normal ) с подсветкой:

Значения / themes.xml

Здесь я переопределю стиль кнопки по умолчанию для всей темы:

 <style name="AppTheme" parent="Base.AppTheme"> <item name="buttonStyle">@style/Widget.AppTheme.Button</item> </style> 

Значения / integers.xml

 <!-- Some numbers pulled from material design. --> <integer name="button_pressed_animation_duration">100</integer> <integer name="button_pressed_animation_delay">100</integer> 

Значения-V21 / styles.xml

Стиль кнопки для Lollipop, который понимает наложения тем и использует пульсацию по умолчанию. Давайте просто покрасим пульсацию соответствующей краской:

 <style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button"> <!-- On Lollipop you can define theme via style. --> <item name="android:theme">@style/ThemeOverlay.AppTheme.Button</item> </style> <style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark"> <!-- The magic is done here. --> <item name="colorButtonNormal">@color/control_normal</item> </style> 

Значения / styles.xml

Перед Lollipop это сложно.

 <style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button"> <item name="android:background">@drawable/button_normal_background</item> </style> 

рисуем / button_normal_background.xml

Thi – это составная часть всей кнопки.

 <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="@dimen/abc_button_inset_horizontal_material" android:insetTop="@dimen/abc_button_inset_vertical_material" android:insetRight="@dimen/abc_button_inset_horizontal_material" android:insetBottom="@dimen/abc_button_inset_vertical_material"> <layer-list> <!-- Shadow. --> <item android:drawable="@drawable/button_shadow" android:top="-0dp" android:bottom="-1dp" android:left="-0dp" android:right="-0dp"/> <item android:drawable="@drawable/button_shadow_pressable" android:top="-0dp" android:bottom="-3dp" android:left="-1dp" android:right="-1dp"/> <!-- Background. --> <item android:drawable="@drawable/button_shape_normal"/> <!-- Highlight. --> <item> <selector android:enterFadeDuration="@integer/button_pressed_animation_duration" android:exitFadeDuration="@integer/button_pressed_animation_duration"> <item android:drawable="@drawable/button_shape_highlight" android:state_focused="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_pressed="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_selected="true" android:state_enabled="true"/> <item android:drawable="@android:color/transparent"/> </selector> </item> <!-- Inner padding. --> <item android:drawable="@drawable/button_padding"/> </layer-list> </inset> 1 <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="@dimen/abc_button_inset_horizontal_material" android:insetTop="@dimen/abc_button_inset_vertical_material" android:insetRight="@dimen/abc_button_inset_horizontal_material" android:insetBottom="@dimen/abc_button_inset_vertical_material"> <layer-list> <!-- Shadow. --> <item android:drawable="@drawable/button_shadow" android:top="-0dp" android:bottom="-1dp" android:left="-0dp" android:right="-0dp"/> <item android:drawable="@drawable/button_shadow_pressable" android:top="-0dp" android:bottom="-3dp" android:left="-1dp" android:right="-1dp"/> <!-- Background. --> <item android:drawable="@drawable/button_shape_normal"/> <!-- Highlight. --> <item> <selector android:enterFadeDuration="@integer/button_pressed_animation_duration" android:exitFadeDuration="@integer/button_pressed_animation_duration"> <item android:drawable="@drawable/button_shape_highlight" android:state_focused="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_pressed="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_selected="true" android:state_enabled="true"/> <item android:drawable="@android:color/transparent"/> </selector> </item> <!-- Inner padding. --> <item android:drawable="@drawable/button_padding"/> </layer-list> </inset> 1 <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="@dimen/abc_button_inset_horizontal_material" android:insetTop="@dimen/abc_button_inset_vertical_material" android:insetRight="@dimen/abc_button_inset_horizontal_material" android:insetBottom="@dimen/abc_button_inset_vertical_material"> <layer-list> <!-- Shadow. --> <item android:drawable="@drawable/button_shadow" android:top="-0dp" android:bottom="-1dp" android:left="-0dp" android:right="-0dp"/> <item android:drawable="@drawable/button_shadow_pressable" android:top="-0dp" android:bottom="-3dp" android:left="-1dp" android:right="-1dp"/> <!-- Background. --> <item android:drawable="@drawable/button_shape_normal"/> <!-- Highlight. --> <item> <selector android:enterFadeDuration="@integer/button_pressed_animation_duration" android:exitFadeDuration="@integer/button_pressed_animation_duration"> <item android:drawable="@drawable/button_shape_highlight" android:state_focused="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_pressed="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_selected="true" android:state_enabled="true"/> <item android:drawable="@android:color/transparent"/> </selector> </item> <!-- Inner padding. --> <item android:drawable="@drawable/button_padding"/> </layer-list> </inset> 1 <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetLeft="@dimen/abc_button_inset_horizontal_material" android:insetTop="@dimen/abc_button_inset_vertical_material" android:insetRight="@dimen/abc_button_inset_horizontal_material" android:insetBottom="@dimen/abc_button_inset_vertical_material"> <layer-list> <!-- Shadow. --> <item android:drawable="@drawable/button_shadow" android:top="-0dp" android:bottom="-1dp" android:left="-0dp" android:right="-0dp"/> <item android:drawable="@drawable/button_shadow_pressable" android:top="-0dp" android:bottom="-3dp" android:left="-1dp" android:right="-1dp"/> <!-- Background. --> <item android:drawable="@drawable/button_shape_normal"/> <!-- Highlight. --> <item> <selector android:enterFadeDuration="@integer/button_pressed_animation_duration" android:exitFadeDuration="@integer/button_pressed_animation_duration"> <item android:drawable="@drawable/button_shape_highlight" android:state_focused="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_pressed="true" android:state_enabled="true"/> <item android:drawable="@drawable/button_shape_highlight" android:state_selected="true" android:state_enabled="true"/> <item android:drawable="@android:color/transparent"/> </selector> </item> <!-- Inner padding. --> <item android:drawable="@drawable/button_padding"/> </layer-list> </inset> 

рисуем / button_shadow.xml

Это тень, когда не нажата.

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="2dp" android:topRightRadius="2dp"/> <solid android:color="#2000"/> </shape> 

рисуем / button_shadow_pressable.xml

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

 <selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:ignore="UnusedAttribute" android:enterFadeDuration="@integer/button_pressed_animation_duration" android:exitFadeDuration="@integer/button_pressed_animation_duration"> <item android:state_pressed="true" android:state_enabled="true"> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="3dp" android:topRightRadius="3dp"/> <solid android:color="#20000000"/> </shape> </item> <item android:drawable="@android:color/transparent"/> </selector> 

рисуем / button_shape_normal.xml

Это основная форма кнопки.

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="@dimen/abc_control_corner_material"/> <solid android:color="@color/control_normal"/> </shape> 

рисуем / button_padding.xml

Просто дополнительное дополнение должно быть абсолютно согласуется с кнопкой «Материал».

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@android:color/transparent"/> <padding android:left="@dimen/abc_button_padding_horizontal_material" android:top="@dimen/abc_button_padding_vertical_material" android:right="@dimen/abc_button_padding_horizontal_material" android:bottom="@dimen/abc_button_padding_vertical_material"/> </shape> 

рисуем / button_shape_highlight.xml

Это форма кнопки подсветки, нарисованная над обычной формой кнопки.

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="@dimen/abc_control_corner_material"/> <solid android:color="@color/control_highlight"/> </shape> 

@color/control_highlight может указывать на

  • @color/ripple_material_dark – полупрозрачный белый, использование на темном фоне
  • @color/ripple_material_light – полупрозрачный черный, использование на светлом фоне
  • Любой другой цвет, который вы определяете.

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

 android:background="@drawable/touch_selector" 

Создайте версию без пульсаций для pre lollipop: drawable / touch_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- State when a row is being pressed, but hasn't yet been activated (finger down) --> <item android:state_pressed="true" android:drawable="@color/grey" /> <!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row --> <item android:state_activated="true" android:drawable="@color/light_green" /> <!-- Default, "just hangin' out" state. --> <item android:drawable="@android:color/transparent" /> </selector> 

Теперь сделайте то же самое для леденца и выше, но с эффектом пульсации:
Crete drawable-v21 / touch_selector.xml

Это будет выглядеть так:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- State when a row is being pressed, but hasn't yet been activated (finger down) --> <item android:state_pressed="true"> <ripple android:color="@color/grey" /> </item> <!-- For ListView, when the view is "activated". In SINGLE_CHOICE_MODE, it flags the active row --> <item android:state_activated="true" android:drawable="@color/light_green" /> <!-- Default, "just hangin' out" state. --> <item android:drawable="@android:color/transparent" /> </selector> 

Вот и все.
Теперь у вас эффект пульсации на леденец и выше устройства и выделить на до леденцов.

Редактировать:
В случае использования в ListView – использование, созданное выше, в качестве фона элемента ListView