Custom Glowing EdgeEffect in Android RecyclerView
Using standard EdgeEffect.java gives us only possibility to control Paint
’s color. We can’t change edges geometry or paint’s parameters or animation parameters.
Part 1: custom overscroll and overfling behavior.
Part 2: current article.
Part 3: custom Distort EdgeEffect in Android ScrollView.
Start.
So there are two ways to solve this problem:
- or modify scrolling view(NestedScrollView
, RecyclerView
or ScrollView
) which uses standard EdgeEffect.java
for overscrolling to make it use custom one;
- or extend EdgeEffect.java
, but unfortunately it is still needed to duplicate whole parent class logic because standard EdgeEffect
class has lots of private fields and constants we have to be able to use in overridden onDraw()
method.
Let’s do the second way. Only RecyclerView
has implementation to set up custom glowing edge class with the help of factory in contrast to ScrollView
and NestedScrollView
without modifying scrolling view.
So the starter code is just a regular RecyclerView
with only one child item — regular TextView
with multiline text.
Step 1.
Create new class extending from EdgeEffect.java
and copy-paste parent’s logic into it.
Step 2.
Create a factory class extending form RecyclerView.EdgeEffectFactory.
and set it to the recyclerView:
recyclerView.setEdgeEffectFactory(new GlowingEdgeEffectFactory());
Step 3.
Now we can do anything we want with our custom EdgeEffect
class.
Let’s add some glowing effect.
Update private static final double ANGLE
to be Math.PI / 8
instead of Math.PI / 6
to reduce glowing scaling little bit (but it is not necessary)
Add default glowing color constant:private static final int DEFAULT_COLOR = 0xCB00FF00;
And let blur radius to be the half of edge drawing rectangle height so add:
private static final float BlUR_RADIUS_FACTOR = 0.5f;
Next update mPaint
with blur mask filter from setSize()
method:
And modify onDraw()
:
- exclude updating alpha at all (optional);
- fix clipping because glowing adds additional height to the clipping rectangle: