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.

Yuriy Skul
2 min readAug 18, 2020
Custom glowing edge effect

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:

Solution source code.

--

--