ScrollView : Change the edge effect color with Holo

Question

I am currently trying to change the color of the blue horizontal line that appears when you reach the top or bottom of a scrollview. I tried to dig within the Android res folder but could not find any obvious reference to it.

Any help would be much appreciated.

Thank you.

Update: After having tried to implement a class inheriting ScrollView and settings getSolidColor to an alternative value, it does not seem to work. The horizontal bar that appears when I reach the bottom or top of the scrollview is still in blue.

Update 2: Actually, I should not have mentioned the edge effect color, it was more specifically the overScroll effect, but I was not aware of that term.

You might find [this answer](http://stackoverflow.com/a/6623169/321697) useful. — Kevin Coppock, Jul 22 '12 at 19:27

score 8 · Accepted Answer · answered Jul 24 '12 at 14:55

8

I found a partial answer to my question, I was actually referring to the overscroll attribute of the ScrollView. It seems to be possible to disable it using the code below:

<ScrollView
...
android:overScrollMode="never"
... />

However, it is impossible to modify the color using the overScrollHeader and overScrollFooter attributes as their values are just ignored and the default blue one is shown instead.

answered Jul 24 '12 at 14:55

Moystard

1,827
2
17
18

figured anything out with this? – Geeks On Hugs Aug 31 '12 at 21:10
No, I have just disabled them. – Moystard Sep 03 '12 at 16:33
this is not answer actually. I would like to have the event itself but ui edge effect needs to be disabled ) – Cynichniy Bandera Jul 31 '13 at 09:33

score 5 · Answer 2 · answered Aug 24 '13 at 11:08

You can use the Edge Effect Override Library to dynamically override the color of the glowing edges on scroll views. It is pretty simple to use and can add a little uniqueness to your apps. Find it here: https://github.com/AndroidAlliance/EdgeEffectOverride

score 3 · Answer 3 · answered Jan 20 '15 at 21:03

You can change the EdgeEffect color of a ScrollView with some reflection:

public static void setEdgeGlowColor(final ScrollView scrollView, final int color) {
    try {
        final Class<?> clazz = ScrollView.class;
        final Field fEdgeGlowTop = clazz.getDeclaredField("mEdgeGlowTop");
        final Field fEdgeGlowBottom = clazz.getDeclaredField("mEdgeGlowBottom");
        fEdgeGlowTop.setAccessible(true);
        fEdgeGlowBottom.setAccessible(true);
        setEdgeEffectColor((EdgeEffect) fEdgeGlowTop.get(scrollView), color);
        setEdgeEffectColor((EdgeEffect) fEdgeGlowBottom.get(scrollView), color);
    } catch (final Exception ignored) {
    }
}

@SuppressLint("NewApi")
public static void setEdgeEffectColor(final EdgeEffect edgeEffect, final int color) {
    try {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            edgeEffect.setColor(color);
            return;
        }
        final Field edgeField = EdgeEffect.class.getDeclaredField("mEdge");
        final Field glowField = EdgeEffect.class.getDeclaredField("mGlow");
        edgeField.setAccessible(true);
        glowField.setAccessible(true);
        final Drawable mEdge = (Drawable) edgeField.get(edgeEffect);
        final Drawable mGlow = (Drawable) glowField.get(edgeEffect);
        mEdge.setColorFilter(color, PorterDuff.Mode.SRC_IN);
        mGlow.setColorFilter(color, PorterDuff.Mode.SRC_IN);
        mEdge.setCallback(null); // free up any references
        mGlow.setCallback(null); // free up any references
    } catch (final Exception ignored) {
    }
}

score 2 · Answer 4 · answered Dec 09 '13 at 19:09

I found a very simple (but hackish) way to accomplish this (changing the color of the glow):

int glowDrawableId = context.getResources().getIdentifier("overscroll_glow", "drawable", "android");
Drawable androidGlow = context.getResources().getDrawable(glowDrawableId);
androidGlow.setColorFilter(brandColor, PorterDuff.Mode.MULTIPLY);

I took advantage of the fact that the glow effect is actually a Drawable (and un-mutate at that), and applied a filter on it. More about it, here: http://evendanan.net/android/branding/2013/12/09/branding-edge-effect/

Great. But apart from the glow light there's a line which appears above(when sliding up) and below(when sliding down). Do you know how to change it's color too? — WWJD, Sep 12 '14 at 11:20

score 1 · Answer 5 · edited May 23 '17 at 12:24

1

There doesn't seem to be an easy way to do this using the api. You could however try extending ScrollView and overriding the getSolidColor() method, setting the background to a different color:

    new ScrollView(this) {
        @Override
        @ExportedProperty(category = "drawing")
        public int getSolidColor() {
            // Set a background color to a color you want for the edges.
        }
    };

edited May 23 '17 at 12:24

Community

1
1

answered Jul 22 '12 at 19:25

Jeshurun

22,940
6
79
92

I will try that and give you a feedback. Weird that you cannot easily do that, as this blue does not fit most application themes. – Moystard Jul 22 '12 at 19:34
Done, and it does not seem to work, the blue horizontal bar is still blue. – Moystard Jul 22 '12 at 20:45

score 1 · Answer 6 · answered Jul 22 '12 at 19:35

If you want the same color for the fading edge and for the ScrollView's background, you can just add :

<ScrollView
...
android:background="@color/yourColor"
... />

If you want the edge to be a different color then you have to extend ScrollView and override the getSolidColor() method.

score 0 · Answer 7 · answered Mar 25 '15 at 14:27

This is the way you change the overscroll edge line:

        final int edgeDrawableId = res.getIdentifier("overscroll_edge", "drawable", "android");
        final Drawable overscrollEdge = res.getDrawable(edgeDrawableId);
        overscrollEdge.setColorFilter(res.getColor(colorID), android.graphics.PorterDuff.Mode.SRC_ATOP);

ScrollView : Change the edge effect color with Holo

7 Answers7