Как восстановить эффект Ripple на градиентном фоне

Question

Я делаю приложение для заметок. Я начал с дизайна, поэтому у меня пока нет кода. Я сделал кнопку с изображением «+» и градиентным фоном, но в итоге потерял эффект ряби. Я видел некоторых с похожими проблемами, но я ничего не понимал. Как восстановить эффект ряби? В настоящее время он работает только с изображением, но я хочу, чтобы он работал на всей кнопке, включая фон.

add_button_design. xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools">

  <item>
    <shape>
      <gradient android:startColor="#706fd3" android:endColor="#34ace0" android:angle="45"/>
      <corners android:radius="50dp"/>
      <stroke android:width="1px" android:color="#227093"/>
    </shape>
  </item>

  <item>
    <bitmap android:src="@drawable/add_button_image"/>
  </item>

  <item>
    <ripple android:color="?android:attr/colorControlHighlight">
      <item android:drawable="@drawable/add_button_image"/>
    </ripple>
  </item>
</layer-list>

activity_main. xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:background="@color/colorPrimaryDark">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <Button
                android:layout_width="75dp"
                android:layout_height="75dp"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_margin="20dp"
                android:background="@drawable/add_button_design"/>
        </RelativeLayout>


    </FrameLayout>
</RelativeLayout>

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

Answer 1

Пожалуйста, добавьте selector в свой тег ripple. Здесь работает GIF.

Вот код.

   <layer-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools">

  <item>
    <shape>
      <gradient android:startColor="#706fd3" android:endColor="#34ace0" android:angle="45"/>
      <corners android:radius="50dp"/>
      <stroke android:width="1px" android:color="#227093"/>
    </shape>
  </item>

  <item>
    <bitmap android:src="@drawable/add_button_image"/>
  </item>

  <item>
    <ripple android:color="?android:attr/colorControlHighlight">
      <!--<item android:drawable="@drawable/add_button_image"/>-->

     <selector>
       <!-- unclick the background-->
        <item
            android:drawable="@drawable/add_button_image"
            android:state_pressed="false" />
     <!-- click the background-->
        <item
            android:drawable="@drawable/add_button_image"
            android:state_pressed="true" />
      </selector>
    </ripple>
  </item>
</layer-list>

Answer 2

используя базу @Leon, мне удалось это исправить. Просто поместите все в тег Ripple

<?xml version="1.0" encoding="utf-8"?>
<layer-list
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools">

  <item>
    <ripple android:color="?android:attr/colorControlHighlight">
      <item>
        <shape>
          <gradient android:startColor="#706fd3" android:endColor="#34ace0" android:angle="45"/>
          <corners android:radius="50dp"/>
          <stroke android:width="1px" android:color="#227093"/>
        </shape>
      </item>

      <item>
        <bitmap android:src="@drawable/add_button_image"/>
      </item>
    </ripple>
  </item>
</layer-list>