Android Viewpager Edgeeffect Custom Color

I am trying to customize the EdgeEffect in the Viewpager of my App. The aim was to replace the blue ics Overscroll EdgeEffect i.e. with a custom red one. So at first i edited overs

Solution 1:

You can set the EdgeEffect color of the ViewPager with some reflection:

publicstaticvoidsetEdgeGlowColor(ViewPager viewPager, int color) {
    try {
        Class<?> clazz = ViewPager.class;
        for (String name : new String[] {
                "mLeftEdge", "mRightEdge"
        }) {
            Field field = clazz.getDeclaredField(name);
            field.setAccessible(true);
            Object edge = field.get(viewPager); // android.support.v4.widget.EdgeEffectCompat
            Field fEdgeEffect = edge.getClass().getDeclaredField("mEdgeEffect");
            fEdgeEffect.setAccessible(true);
            setEdgeEffectColor((EdgeEffect) fEdgeEffect.get(edge), color);
        }
    } catch (Exception ignored) {
    }
}

publicstaticvoidsetEdgeEffectColor(EdgeEffect edgeEffect, int color) {
    try {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            edgeEffect.setColor(color);
            return;
        }
        Field edgeField = EdgeEffect.class.getDeclaredField("mEdge");
        Field glowField = EdgeEffect.class.getDeclaredField("mGlow");
        edgeField.setAccessible(true);
        glowField.setAccessible(true);
        Drawable mEdge = (Drawable) edgeField.get(edgeEffect);
        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 (Exception ignored) {
    }
}

Solution 2:

You have to implement ViewPager, PagerAdapter, FragmentstatePagerAdapter, EdgeEffectCompat, EdgeEffectCompatIcs and EdgeEffect in a package of your own app (for example com.yourapp.viewpager). Only changes made was adjusting the imports and packages names. Copy and edit resources files to res/drawable of your app and et voila, it work's.

Solution 3:

I can suggest a very simple way, but hackish:

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

I took advantage of the fact that the glow effect is actually a shared Drawable and applied a filter on it: http://evendanan.net/android/branding/2013/12/09/branding-edge-effect/