500px-guideview Documentation

Custom transition animations are implemented by providing a ViewPager.PageTransformer via setPageTransformer().

Inside transformPage(View view, float position), the position parameter indicates the relative offset of the page:

• position = 0: The page is currently centered.
• position = 1: The page is one full screen to the right.
• position = -1: The page is one full screen to the left.

To create complex, multi-stage animations (e.g., A $\to$ B, B $\to$ C), you must track a reference position (like the position of the first fragment) to determine which specific transition is currently occurring. You can then use the absolute value of the position (p = Math.abs(position)) and its inverse (f = 1 - p) to interpolate properties like alpha, scaleX, scaleY, and translationY.

viewpager.setPageTransformer(false, new HKTransformer());

class HKTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        // position: 0 is centered, -1 is left, 1 is right
        // Use position to calculate interpolation values
        float p = Math.abs(position);
        float f = (1 - p);
        
        // Example: Fade out based on position
        view.setAlpha(f);
    }
}

To achieve a blurring effect similar to 500px, use the BlurringView component.

1. Enable RenderScript: In your build.gradle, add:

   renderscriptTargetApi 18
   renderscriptSupportModeEnabled true

2. XML Configuration: Add the BlurringView to your layout. It requires a blurRadius, downsampleFactor, and an overlayColor.

   <hanks.com.guideview.BlurringView
       android:id="@+id/blurringView"
       android:layout_width="match_parent"
       android:layout_height="150dp"
       app:blurRadius="11"
       app:downsampleFactor="6"
       app:overlayColor="#99FFFFFF" />

3. Initialization: In your Activity, link the BlurringView to the view that should be blurred using setBlurredView(View) and call invalidate() to refresh the effect.

BlurringView blurringView = findViewById(R.id.blurringView);
View blurredView = findViewById(R.id.blurredView);

// Link the view to be blurred
burringView.setBlurredView(blurredView);

// Refresh the blur
burringView.invalidate();