Convert Figma logo to code with AI

ToxicBakery logoViewPagerTransforms

Library containing common animations needed for transforming ViewPager scrolling for Android v13+.

2,567
487
2,567
8

Top Related Projects

A curated list of awesome Android UI/UX libraries

Cute view animation collection.

A fluent Android animation library

Android Transition animations explanation with examples.

An amazing and convenient Android image slider.

Infinite cycle ViewPager with two-way orientation and interactive effect.

Quick Overview

ViewPagerTransforms is an Android library that provides a collection of custom page transformers for ViewPager and ViewPager2. It allows developers to easily add animated transitions between pages in their Android applications, enhancing the user experience with smooth and visually appealing effects.

Pros

  • Easy to implement and integrate into existing Android projects
  • Offers a wide variety of pre-built page transformers
  • Compatible with both ViewPager and ViewPager2
  • Customizable and extendable for creating custom transformations

Cons

  • Limited documentation and examples
  • Some transformations may not work well with complex page layouts
  • Performance impact on older devices with resource-intensive transformations
  • Not actively maintained (last update was in 2021)

Code Examples

  1. Setting up a basic ViewPager2 with a transformer:
val viewPager: ViewPager2 = findViewById(R.id.viewPager)
viewPager.adapter = MyPagerAdapter()
viewPager.setPageTransformer(CubeOutTransformer())
  1. Creating a custom transformer by extending BaseTransformer:
class MyCustomTransformer : BaseTransformer() {
    override fun onTransform(page: View, position: Float) {
        page.alpha = 1 - abs(position)
        page.scaleX = 0.85f + (1 - abs(position)) * 0.15f
        page.scaleY = 0.85f + (1 - abs(position)) * 0.15f
    }
}
  1. Combining multiple transformers:
val combinedTransformer = CompositePageTransformer().apply {
    addTransformer(RotateUpTransformer())
    addTransformer(FadeOutTransformer())
}
viewPager.setPageTransformer(combinedTransformer)

Getting Started

To use ViewPagerTransforms in your Android project:

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.ToxicBakery:ViewPagerTransforms:2.0.24'
}
  1. In your layout XML, add a ViewPager2:
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  1. In your Activity or Fragment, set up the ViewPager2 with a transformer:
val viewPager: ViewPager2 = findViewById(R.id.viewPager)
viewPager.adapter = MyPagerAdapter()
viewPager.setPageTransformer(CubeOutTransformer())

Competitor Comparisons

A curated list of awesome Android UI/UX libraries

Pros of awesome-android-ui

  • Comprehensive collection of UI libraries and components
  • Regularly updated with new and trending UI elements
  • Covers a wide range of UI categories (animations, layouts, effects, etc.)

Cons of awesome-android-ui

  • Not a standalone library, requires integration of multiple dependencies
  • May lead to increased app size due to multiple libraries
  • Potential compatibility issues between different UI components

Code Comparison

ViewPagerTransforms focuses on ViewPager animations:

viewPager.setPageTransformer(true, new RotateUpTransformer());

awesome-android-ui doesn't provide direct code, but integrates various libraries:

implementation 'com.github.traex.rippleeffect:library:1.3'
implementation 'com.github.ozodrukh:CircularReveal:2.1.0'

Summary

ViewPagerTransforms is a specialized library for ViewPager animations, while awesome-android-ui is a curated list of various UI libraries. ViewPagerTransforms offers a focused solution for ViewPager transitions, whereas awesome-android-ui provides a broader range of UI options but requires more integration effort. The choice between them depends on whether you need a specific ViewPager animation solution or a comprehensive collection of UI resources for your Android project.

Cute view animation collection.

Pros of AndroidViewAnimations

  • Offers a wider variety of animations, including attention, bounce, fade, flip, rotate, slide, and zoom effects
  • Provides an easy-to-use API for chaining multiple animations together
  • Supports custom ease functions for more control over animation timing

Cons of AndroidViewAnimations

  • Focuses on general view animations rather than specifically targeting ViewPager transitions
  • May require more setup and configuration for use with ViewPager compared to ViewPagerTransforms

Code Comparison

AndroidViewAnimations:

YoYo.with(Techniques.FadeIn)
    .duration(1000)
    .repeat(2)
    .playOn(findViewById(R.id.animation_target));

ViewPagerTransforms:

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotateUpTransformer());

AndroidViewAnimations provides a more flexible API for creating and chaining animations, while ViewPagerTransforms offers a simpler implementation specifically for ViewPager transitions. The choice between the two depends on the specific requirements of your project and whether you need general view animations or focused ViewPager transformations.

A fluent Android animation library

Pros of ViewAnimator

  • More versatile, allowing animations on any View, not just ViewPager
  • Supports chaining multiple animations together
  • Provides a wider range of animation options beyond just page transitions

Cons of ViewAnimator

  • May require more setup and configuration for simple use cases
  • Less specialized for ViewPager-specific animations
  • Potentially higher learning curve for developers new to custom animations

Code Comparison

ViewPagerTransforms:

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotateUpTransformer());

ViewAnimator:

ViewAnimator
    .animate(targetView)
    .scale(0, 1)
    .duration(1000)
    .start();

ViewPagerTransforms focuses on providing pre-built page transformations for ViewPager, making it easy to implement common transitions with minimal code. It's ideal for projects that primarily need ViewPager animations.

ViewAnimator offers a more flexible approach, allowing developers to create custom animations for any View. It provides a fluent API for chaining multiple animations, giving more control over the animation process. This makes it suitable for a wider range of animation needs beyond just ViewPager transitions.

While ViewPagerTransforms is more straightforward for ViewPager-specific animations, ViewAnimator requires a bit more setup but offers greater versatility across different View types and animation scenarios.

Android Transition animations explanation with examples.

Pros of Material-Animations

  • Focuses on Material Design animations and transitions
  • Provides comprehensive examples of various animation types
  • Includes detailed explanations and documentation for each animation

Cons of Material-Animations

  • Limited to Material Design-specific animations
  • May require more setup and configuration for implementation
  • Less suitable for simple ViewPager transformations

Code Comparison

Material-Animations:

ActivityOptionsCompat options = ActivityOptionsCompat.
    makeSceneTransitionAnimation(this, fab, fab.getTransitionName());
startActivity(intent, options.toBundle());

ViewPagerTransforms:

ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotateUpTransformer());

Material-Animations provides more complex animation setup, while ViewPagerTransforms offers simpler implementation for ViewPager transitions.

Material-Animations is better suited for developers looking to implement Material Design animations across their app, while ViewPagerTransforms is ideal for those specifically seeking ViewPager transition effects.

ViewPagerTransforms offers a wider variety of pre-built ViewPager animations, making it more convenient for quick implementation of page transitions. However, Material-Animations provides a broader range of animation types beyond just ViewPager effects, making it more versatile for overall app animation needs.

An amazing and convenient Android image slider.

Pros of AndroidImageSlider

  • Offers a complete image slider solution with built-in indicators and descriptions
  • Includes various animation effects for transitions between images
  • Supports loading images from URLs using popular image loading libraries

Cons of AndroidImageSlider

  • Less customizable compared to ViewPagerTransforms
  • Limited to image sliding functionality, while ViewPagerTransforms can be applied to any ViewPager content
  • Has not been updated recently, potentially lacking support for newer Android versions

Code Comparison

AndroidImageSlider:

SliderLayout sliderLayout = findViewById(R.id.slider);
TextSliderView textSliderView = new TextSliderView(this);
textSliderView
    .description("Game of Thrones")
    .image("https://example.com/image.jpg");
sliderLayout.addSlider(textSliderView);

ViewPagerTransforms:

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new ZoomOutSlideTransformer());

ViewPagerTransforms focuses on providing various page transformation animations for ViewPagers, while AndroidImageSlider offers a more comprehensive image slider solution with additional features. ViewPagerTransforms is more flexible and can be applied to any ViewPager content, whereas AndroidImageSlider is specifically designed for image sliding. The code comparison shows that AndroidImageSlider requires more setup but provides a ready-to-use image slider, while ViewPagerTransforms is simpler to implement but requires additional work to create a full image slider solution.

Infinite cycle ViewPager with two-way orientation and interactive effect.

Pros of InfiniteCycleViewPager

  • Supports infinite cycling of pages, allowing users to continuously swipe through content
  • Offers customizable page scaling and transformation effects
  • Provides built-in support for both horizontal and vertical orientations

Cons of InfiniteCycleViewPager

  • Less actively maintained, with the last update being several years ago
  • More complex implementation compared to ViewPagerTransforms
  • Limited documentation and examples available

Code Comparison

ViewPagerTransforms:

ViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setPageTransformer(true, new RotateUpTransformer());

InfiniteCycleViewPager:

InfiniteCycleViewPager viewPager = findViewById(R.id.view_pager);
viewPager.setAdapter(new MyPagerAdapter());
viewPager.setScrollDuration(500);
viewPager.setMediumScaled(true);
viewPager.setMaxPageScale(0.8f);

ViewPagerTransforms focuses on providing various page transformation effects, while InfiniteCycleViewPager offers more advanced features like infinite cycling and customizable scaling. ViewPagerTransforms is simpler to implement and more actively maintained, making it a better choice for basic transformation needs. InfiniteCycleViewPager is more suitable for complex, cyclic page layouts but requires more setup and has less recent updates.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

CircleCI License Maven Central

ViewPagerTransforms

Library containing common animations needed for transforming ViewPager scrolling on Android v13+. This library is a rewrite of the JazzyViewPager library and owes credit of the animation concepts directly to its source. The purpose of this rewrite is to provide an easier to use and extend implementation of ViewPager animations.

Demo

Getting Started (Gradle / Android Studio)

Add gradle dependency to your application.

implementation 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:2.0.24'

After configuration, instantiate the transformer animation you wish to use and set it as the page transformer.

// Reference (or instantiate) a ViewPager instance and apply a transformer
pager = (ViewPager) findViewById(R.id.container);
pager.setAdapter(mAdapter);
pager.setPageTransformer(true, new RotateUpTransformer());

Creating Custom Transforms

All ViewPagerTransform implementations extend ABaseTransformer providing useful hooks improving readability of animations and basic functionality important when switching between animations. ABaseTransformer provides three lifecycle hooks and two flags for default handling of hiding offscreen fragments and mimicking the default paging functionality of the ViewPager.

Building

This project is built with Gradle using the Gradle Wrapper script.

./gradlew build

Creating Local Versions

You can modify this project and create local packages with via the maven publish plugin used in the build scripts.

./gradlew publishToMavenLocal