Efecto de ondulación en la parte superior de la imagen – Android

Me gustó la respuesta del desarrollador android, así que decidí investigar cómo hacer el paso 2 de su solución en código.

Usted necesita conseguir este pedazo de código de Jake Wharton aquí: https://gist.github.com/JakeWharton/0a251d67649305d84e8a

 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.widget.ImageView; public class ForegroundImageView extends ImageView { private Drawable foreground; public ForegroundImageView(Context context) { this(context, null); } public ForegroundImageView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ForegroundImageView); Drawable foreground = a.getDrawable(R.styleable.ForegroundImageView_android_foreground); if (foreground != null) { setForeground(foreground); } a.recycle(); } /** * Supply a drawable resource that is to be rendered on top of all of the child * views in the frame layout. * * @param drawableResId The drawable resource to be drawn on top of the children. */ public void setForegroundResource(int drawableResId) { setForeground(getContext().getResources().getDrawable(drawableResId)); } /** * Supply a Drawable that is to be rendered on top of all of the child * views in the frame layout. * * @param drawable The Drawable to be drawn on top of the children. */ public void setForeground(Drawable drawable) { if (foreground == drawable) { return; } if (foreground != null) { foreground.setCallback(null); unscheduleDrawable(foreground); } foreground = drawable; if (drawable != null) { drawable.setCallback(this); if (drawable.isStateful()) { drawable.setState(getDrawableState()); } } requestLayout(); invalidate(); } @Override protected boolean verifyDrawable(Drawable who) { return super.verifyDrawable(who) || who == foreground; } @Override public void jumpDrawablesToCurrentState() { super.jumpDrawablesToCurrentState(); if (foreground != null) foreground.jumpToCurrentState(); } @Override protected void drawableStateChanged() { super.drawableStateChanged(); if (foreground != null && foreground.isStateful()) { foreground.setState(getDrawableState()); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if (foreground != null) { foreground.setBounds(0, 0, getMeasuredWidth(), getMeasuredHeight()); invalidate(); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (foreground != null) { foreground.setBounds(0, 0, w, h); invalidate(); } } @Override public void draw(Canvas canvas) { super.draw(canvas); if (foreground != null) { foreground.draw(canvas); } } } 

Este es el attrs.xml:

 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ForegroundImageView"> <attr name="android:foreground"/> </declare-styleable> </resources> 

Ahora, cree su ForegroundImageView como en su layout.xml:

 <com.example.ripples.ForegroundImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="centerCrop" android:foreground="?android:selectableItemBackground" android:src="@drawable/apples" android:id="@+id/image" /> 

La imagen se ondula ahora.

En lugar de intentar agregar la ondulación a cada vista individual del adaptador, sólo puede agregarla al nivel GridView de la siguiente manera:

 <GridView android:id="@+id/gridview" ... android:drawSelectorOnTop="true" android:listSelector="@drawable/your_ripple_drawable"/> 

Tal vez pruebe una de estas soluciones (tiene el consejo de aquí ):

1. Envuelva el RippleDrawable en un RippleDrawable ² antes de configurarlo en el ImageView :

    Drawable image = … RippleDrawable rippledImage = new RippleDrawable( ColorStateList.valueOf(rippleColor), image, null); imageView.setImageDrawable(rippledImage); 

2. Amplíe ImageView y añada un atributo de primer plano (como FrameLayout has³). Vea este ejemplo³ de + Chris Banes de agregarlo a LinearLayout . Si lo hace, asegúrese de pasar a través de las coordenadas táctiles para que la ondulación empiece desde el punto correcto:

    @Override public void drawableHotspotChanged(float x, float y) { super.drawableHotspotChanged(x, y); if (foreground != null) { foreground.setHotspot(x, y); } } 

Tengo una galería de imágenes (construido con un RecyclerView y un GridLayoutManager ). La imagen se ajusta con Picasso. Para agregar un ripple a la imagen he envuelto el ImageView con un FrameLayout . El diseño del elemento es:

 <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> 

Tenga en cuenta el android:foreground . No es lo mismo que android:background . He intentado sin android:clickable="true" y android:focusable="true" y también funciona , pero no duele.

A continuación, agregue un ripple.xml en 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> 

Tenga en cuenta que esto muestra un color semi-transparente en la parte superior de la imagen cuando se selecciona el elemento (para dispositivos <5.0). Puede quitarlo si no lo desea.

A continuación, agregue el ripple.xml con ripple en res/drawable-v21 :

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

Puede utilizar el efecto de rizado predeterminado en lugar del ripple.xml personalizado, pero es realmente difícil verlo encima de una imagen porque es gris:

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