Установите эффект пульсации на изображении

Получен следующий вид изображения:

<ImageView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    android:clickable="true"
    android:focusable="true"
    android:background="?android:attr/selectableItemBackground"/>

Ripple отлично работает, если я не настроил растровое изображение на изображение. Но как только я установил такой растровый рисунок, эффект пульсации исчезнет:

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

Это мой ripple.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

Я предполагаю, что растровое изображение скрывает эффект пульсации, как я могу сделать его видимым? Уже пробовал:

  • Изменение андроида: фон для android: передний план, который не работает.
  • Настройка другого прозрачного ImageView поверх этого, но поскольку это была прозрачная пульсация, не было показано.

Любые идеи? Я видел, что Lollipop Contacts тоже сделали это.

Ответы

Ответ 1

У меня есть галерея изображений (построена с RecyclerView и a GridLayoutManager). Изображение устанавливается с помощью Picasso. Чтобы добавить рябь к изображению , я обернул ImageView с помощью FrameLayout. Макет элемента:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:foreground="@drawable/ripple"
    android:clickable="true"
    android:focusable="true"
    >
    <ImageView
        android:id="@+id/grid_item_imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        />
</FrameLayout>

Обратите внимание на android:foreground. Это не то же самое, что android:background. Я пробовал без android:clickable="true" и android:focusable="true", и он также работает, но это не повредит.

Затем добавьте ripple.xml в res/drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

Обратите внимание, что при выборе элемента отображается полупрозрачный цвет поверх изображения (для устройств с версией старше Android 5.0). Вы можете удалить его, если вы этого не хотите.

Затем добавьте ripple.xml с возможностью пульсации в res/drawable-v21:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/coral">
</ripple>

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

android:foreground="?android:attr/selectableItemBackground"

Ответ 2

Вы можете добиться этого, обернув извлечение в RippleDrawable.

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;

Ответ 3

Для ленивых людей, таких как я:

android:foreground="?android:attr/selectableItemBackground"

И настройте цвет пульсации в вашем стиле.

в значениях /styles.xml

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

Затем в вашем фрагменте перед инфляцией в onCreateView():

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}

Ответ 4

С помощью кругового эффекта попробуйте следующее:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorTema3"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent" />