How To Change The Color Of Overscroll Edge And Overscroll Glow

How to Change color of over-scroll edge and over-scroll glow or how to change the white color (default color) of android release 5.0 lollipop?

Solution 1:

The overscroll glow color inherits the primary color value set by android:colorPrimary in your entire app. But If you need to specify different value simply use android:colorEdgeEffect (only available for API 21 and above).

<stylename="MyAppTheme"parent="..."><itemname="android:colorEdgeEffect">@color/my_color</item></style>

Solution 2:

On LOLLIPOP the edge glow inherits from colorPrimary. After the view is created the edge glow color can only be changed through reflection. This can be useful when you load colors dynamically using Palette.

EDIT: TL;DR: Download the whole class from here: https://github.com/consp1racy/android-commons/blob/71b5c65689786b1d52d701d81d8c7445495807c3/commons/src/main/java/net/xpece/android/widget/XpEdgeEffect.java

PROGUARD SETUP: If you're going to use this on widgets from support library you need to keep the field names. Quickest way to do it is the following (although still wasteful):

-keepclassmembers classandroid.support.v4.widget.EdgeEffectCompat {
    <fields>;    
}

Create a utility class with the following code:

privatestaticfinal Class<?> CLASS_SCROLL_VIEW = ScrollView.class;
privatestaticfinal Field SCROLL_VIEW_FIELD_EDGE_GLOW_TOP;
privatestaticfinal Field SCROLL_VIEW_FIELD_EDGE_GLOW_BOTTOM;

privatestaticfinal Class<?> CLASS_LIST_VIEW = AbsListView.class;
privatestaticfinal Field LIST_VIEW_FIELD_EDGE_GLOW_TOP;
privatestaticfinal Field LIST_VIEW_FIELD_EDGE_GLOW_BOTTOM;

static {
  FieldedgeGlowTop=null, edgeGlowBottom = null;

  for (Field f : CLASS_SCROLL_VIEW.getDeclaredFields()) {
    switch (f.getName()) {
      case"mEdgeGlowTop":
        f.setAccessible(true);
        edgeGlowTop = f;
        break;
      case"mEdgeGlowBottom":
        f.setAccessible(true);
        edgeGlowBottom = f;
        break;
    }
  }

  SCROLL_VIEW_FIELD_EDGE_GLOW_TOP = edgeGlowTop;
  SCROLL_VIEW_FIELD_EDGE_GLOW_BOTTOM = edgeGlowBottom;

  for (Field f : CLASS_LIST_VIEW.getDeclaredFields()) {
    switch (f.getName()) {
      case"mEdgeGlowTop":
        f.setAccessible(true);
        edgeGlowTop = f;
        break;
      case"mEdgeGlowBottom":
        f.setAccessible(true);
        edgeGlowBottom = f;
        break;
    }
  }

  LIST_VIEW_FIELD_EDGE_GLOW_TOP = edgeGlowTop;
  LIST_VIEW_FIELD_EDGE_GLOW_BOTTOM = edgeGlowBottom;
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)publicstaticvoidsetEdgeGlowColor(AbsListView listView, int color) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    try {
      EdgeEffect ee;
      ee = (EdgeEffect) LIST_VIEW_FIELD_EDGE_GLOW_TOP.get(listView);
      ee.setColor(color);
      ee = (EdgeEffect) LIST_VIEW_FIELD_EDGE_GLOW_BOTTOM.get(listView);
      ee.setColor(color);
    } catch (Exception ex) {
      ex.printStackTrace();
    }
  }
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)publicstaticvoidsetEdgeGlowColor(ScrollView scrollView, int color) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    try {
      EdgeEffect ee;
      ee = (EdgeEffect) SCROLL_VIEW_FIELD_EDGE_GLOW_TOP.get(scrollView);
      ee.setColor(color);
      ee = (EdgeEffect) SCROLL_VIEW_FIELD_EDGE_GLOW_BOTTOM.get(scrollView);
      ee.setColor(color);
    } catch (Exception ex) {
      ex.printStackTrace();
    }
  }
}

Solution 3:

If you're using the latest RecyclerView implementation it is pretty straightforward to change the overflow colour programmatically. Use the following code (Kotlin implementation):

recyclerView.edgeEffectFactory = object : RecyclerView.EdgeEffectFactory() {
    overridefuncreateEdgeEffect(view: RecyclerView, direction: Int): EdgeEffect {
        return EdgeEffect(view.context).apply { setColor(color) }
    }
}

Note that this works only for API level 21 (Lollipop) and above. If you know the value at compile time, use the colorEdgeEffect as pointed out by Ahmed.

Solution 4:

In pre-lollipop the glow effect is actually a Drawable embedded in the OS's resources, you can apply a ColorFilter on that:

publicstaticvoidchangeOverScrollGlowColor(Resources res, int colorID ) {
    try {
        finalintglowDrawableId= res.getIdentifier("overscroll_glow", "drawable", "android");
        finalDrawableoverscrollGlow= res.getDrawable(glowDrawableId);
        overscrollGlow.setColorFilter(res.getColor(colorID), android.graphics.PorterDuff.Mode.SRC_ATOP);

        finalintedgeDrawableId= res.getIdentifier("overscroll_edge", "drawable", "android");
        finalDrawableoverscrollEdge= res.getDrawable(edgeDrawableId);
        overscrollEdge.setColorFilter(res.getColor(colorID), android.graphics.PorterDuff.Mode.SRC_ATOP);
    } catch (Exception ignored) {
    }
}

Calling it once in onCreate is enough.

changeOverScrollGlowColor(getResources(), R.color.colorPrimary);