Как создать волновой эффект в простом макете

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

Я попытался установить фон макета что-то вроде:

<?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>
Источник

11 ответов

Решение

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

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

Источник

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

          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 вы можете увидеть много примеров таких типов ряби: http://androidxref.com/8.0.0_r4/search?q=ripple&defs=&refs=&path=&hist=&project=art&project=bionic&project=bootable&project=build&project=cts&project=projectvik = разработчики и проект = разработка и проект = устройство и проект = Docs & проект = внешняя и проект = рамка и проект = аппаратная и проект = ядро и проект = libcore & проект = libnativehelper & проект = пакеты и проект = PDK и проект = platform_testing & проект = prebuilts и проект = SDK и проект = система и проект = тест & проект = Набор инструментов и проект = инструменты

Источник

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

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>

затем укажите его в качестве фона макета или любой кнопки, о которой говорил Igor Ganapolsky в своем ответе.

android:clickable="true"
android:background="@drawable/ripple"
Источник

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

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

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

Источник

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

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">
Источник

Задавать android:clickable="true" на вашем макете.

Источник 
<?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

Android: фон ="@ вытяжка / пульсации"

андроид: кликабельны = "истина"

Источник

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

Подобно:

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

           ...

</LinearLayout>
Источник

Чтобы создать эффект круга, используйте следующий код:

      android:clickable="true"
android:background="?attr/selectableItemBackgroundBorderless"
Источник

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

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

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

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

Источник

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

<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>
Источник
Другие вопросы по тегам