CODEWITHSUNDEEP
androidandroid-viewpager
f4t-t0ny
f4t-t0ny

Reputation: 123

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 overscroll_edge and the corresponding overscroll_glow. Then I put them both into the /res/drawable directory of my app. Additionally i copied the EdgeEffect Source File to the /src/android/widget/ directory of my app. The only change i made in EdgeEffect was to import com.my.application.R instead of com.android.internal.R.

But Android just won't use my custom android.widget.EdgeEffect instead of the one in Android System, so the Viewpager EdgeEffect stays constantly blue. Am I missing something?

Upvotes: 3

Views: 2383

Answers (3)

Jared Rummler
Jared Rummler

Reputation: 38121

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

public static void setEdgeGlowColor(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) {
    }
}

public static void setEdgeEffectColor(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) {
    }
}

Upvotes: 8

Menny
Menny

Reputation: 473

I can suggest a very simple way, but hackish:

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 shared Drawable and applied a filter on it: http://evendanan.net/android/branding/2013/12/09/branding-edge-effect/

Upvotes: 1

f4t-t0ny
f4t-t0ny

Reputation: 123

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.

Upvotes: 2

Related Questions