fading edges working only on top and left

Question

I made a custom ImageView that supports basic scrolling through calls to View.scrollBy() in a GestureDetector. I wanted to add some feedback on the reaching of scrolling bounds so I enabled fading with:

setVerticalFadingEdgeEnabled(true);
setHorizontalFadingEdgeEnabled(true);

but the fading works as I expected only on top and left edges, while bottom and right ones don't fade. I'm sure those edges aren't off screen because the view is set to fill_parent in height and width. So what's wrong?

---

EDIT: enabling only vertical/horizontal fading edges confirms that only top/left edges get drawn. Now I'm trying to read View.java (6870 an on)...

Answer 1

It seems that the problem is in getBottomFadingEdgeStrength() and getRightFadingEdgeStrength(), or better, in the fact that I didn't override them to work with my custom view.

These protected methods tell view's draw() when to draw the fadings (and how strongly -- see what a ScrollView does when you get close to the scrolling limit).

For top and left edges it's easy because the limit is 0 in both cases and the default implementation works (in its on/off manner), but for the other two I need to override the methods to take into account my own scrolling bounds (in my case, the drawable dimensions).

Answer 2

A know this is old but a quick work around compared to overriding methods is to use gradients and relative layout in your xml. Below please find an abstracted version, you can't copy and paste it but it should relay the message. Sorry I typed it all out by hand.

<!-- object with fading edges in layout -->
<RelativeLayout>
    <ImageView>
    <LinearLayout background="gradient_left" layout_alignParentStart="true">
    <LinearLayout background="gradient_right" layout_alignParentEnd="true">
</RelativeLayout>


<!-- gradient left xml in drawable-->
<shape>
    <gradient startColor="#000" endColor:"@android:color/transparent" angle="0"
</shape>


<!-- gradient right xml in drawable -->
<shape>
   <gradient startColor="#000" endColor:"@android:color/transparent" angle="180"
</shape>