Как создать эффект ряби в простом макете

112

Как я могу получить эффект пульсации в простом линейном / относительном макете при касании макета?

Я пробовал установить фон макета примерно так:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:drawable="@android:color/white"/>

</ripple>

Однако при прикосновении к макету я вижу только простой белый фон и не вижу эффекта ряби. Что я делаю не так?

Редактировать:

Для справки вот мой XML-файл макета:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>
Zach
источник
2
Представление, на котором размещается рябь, должно быть активным и интерактивным или настраиваемым.
alanv
Спасибо, Alanv, мой ответ см. Ниже. В основном я отмечаю свой макет, в котором я хочу, чтобы эффект пульсации был активным, но он все еще не работает.
Zach
Кроме того, это нормально работает, если я удалю <item android:drawable="@android:color/white"/>раздел. Поэтому я не уверен, как это должно работать, если мне нужен цвет фона на макете. Поместить это поверх другого макета с цветом фона также не получится!
Zach
4
Какого цвета отображается рябь в вашем представлении, например, в какой цвет разрешается colorControlHighlight?
alanv

Ответы:

261

Установите эти свойства в макете (если в макете используется белый / светлый фон по умолчанию):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

В этом случае вам не нужен настраиваемый чертеж.

Однако, если ваш макет имеет черный / темный фон, вам придется создать свою собственную рябь, которую можно рисовать, например:

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

А затем установите эту рябь как свойство android: background .

Вы можете увидеть множество примеров такого рода ряби в AOSP: здесь

IgorGanapolsky
источник
11
что, если мне нужно указать другой цвет в качестве фона? Тогда какой подход должен быть лучшим?
Анудж Шарма 08
1
@AnujSharma Вы пробовали предоставить цветовой ресурс для background?
Игорь Ганапольский 08
1
@ralphspoon См. stackoverflow.com/questions/26604134/…
Игорь Ганапольский
31
Если вам нужен другой цвет фона, вы можете установить этот цвет в качестве фона и вместо этого поставить «? Attr / selectableItemBackground» как android: foreground
Лукас Аррефельт,
2
Вот Это Да! это круто. Это должно быть отмечено как ответ +1
Зия Ур Рахман
59

Я добавляю это в дополнение к ответу Игоря Ганапольского на случай, если кто-то хочет иметь макет с другим цветом, а также иметь эффект ряби. Вы просто создаете эффект ряби в чертежах вроде этого:

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

затем укажите его в качестве фона вашего макета или любой кнопки, о которой Игорь Ганапольский упомянул в своем ответе.

android:clickable="true"
android:background="@drawable/ripple"
Эрфан ГЛМПР
источник
37

Вы должны изменить следующий фрагмент кода в любом виджете ( TextView/ Button), и вы можете реализовать эффект пульсации :

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

И тебе хорошо идти.

Панкадж Лилан
источник
хм передний план? это круто!
Бадр
Это полезно, если у вас уже есть набор android: background = "@ color / colorAccent"
aero
@aero Это полезно, даже если вы не устанавливаете фон.
Панкадж Лилан
1
это работает с макетами и пользовательскими представлениями в дополнение к виджетам.
anoo_radha 03
1
@MichaelKern Да, вы правы, также это основано на требованиях каждого в их коде.
Панкадж Лилан
20

Оказывается, это работает как задумано. Стандартное значение colorControlHighlight темы Материалов - #40ffffff. Так что на белом фоне это не будет отображаться. Можно изменить цвет выделения на другой и / или изменить цвет фона объекта.

Спасибо всем (особенно Аланву за то, что указал мне в правильном направлении).

Zach
источник
если я использую android: background = "? attr / selectableItemBackground" в моем представлении, как я могу изменить фон объекта?
codekraps
1
Nevermind, я обнаружил, что состояние по умолчанию selectableItemBackground прозрачно. Итак, я установил под ним вид нужного цвета.
codekraps
1
быстрое примечание: вы можете изменить colorControlHighlightсвой styles.xml. Например, добавьте его в свою собственную тему.
Nuhman
9

Установите android:clickable="true"на свой макет.

JeromePApp
источник
5

Это пример нажатия на образец макета с эффектом пульсации:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">
Джавид Саттар
источник
Это просто потрясающе, насколько это просто, и тот простой факт, что это просто Just Works ™.
Мачадо
4
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Используйте этот ripple.xml в папке Drawable , затем назначьте его как View's

android: background = "@ drawable / ripple"

android: clickable = "true"

Абхишек Сенгупта
источник
2

Просто добавьте эффект пульсации по умолчанию с помощью android:background="?selectableItemBackground"

Подобно:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>
ятин деокар
источник
0

Поместите это в свой макет:

android:clickable="true"
android:background="?attr/selectableItemBackground"

Примечание. В документации по API есть ошибка. Работает только на API> = 23

Для всех уровней API используйте это Решение

Андрей Ситар
источник
2
Ваша ссылка перенаправляет эту же страницу
TSR
Имейте в виду, что у вас также есть возможность использовать android: background = "? Attr / selectableItemBackgroundBorderless" Без границ. Эффект пульсации распространяется на родительский вид. Во многих случаях это может выглядеть лучше.
Майкл Керн
0

Я пробовал все эти ответы, и у меня ничего не получалось, поэтому я решил создать следующий стиль:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

Затем я применил свой линейный макет:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Анджело Полотто
источник