Android Crumbling Image SlideView

Hey TMH geekers, One of the privileges Android provides is the possibility to create customizations on various components of the mobile application. One of them is known as Screen Slide the transition between UI screens.

Here comes a new Android library for those who are tired of old boring image sliding in mobile apps. Bitutorial is a simple way to add a unique Android crumbling image SlideView transition between slides. Whether your application supports a sliding tutorial or image change feature, you certainly want to create a memorable experience.

You can also see : Tinder like SwipeView in Android

Demo : Android Crumbling Image SlideView

Implement the Android Crumbling Image SlideView library

The implementation of our Bitutorial open-source library doesn’t require any special skills and knowledge. The first thing you have to do is to add dependency in build.gradle file.

dependencies {
        compile 'com.cleveroad:splittransformation:0.9.0'
    }

Then you have to wrap your pager adapter with TransformationAdapterWrapper:

TransformationAdapterWrapper wrapper = TransformationAdapterWrapper
        .wrap(getContext(), adapter)
        // rows x column = total number of pieces. Larger number of pieces impacts on performance.
        .rows(...)
        .columns(...)
        // Maximum size of spacing between pieces.
        .piecesSpacing(...)
        // Translation for splited pieces.
        .translationX(...)
        .translationY(...)
        // Add top margin for view. Preffer this method instead of setting margin to your view
        // because transformer will split empty space into pieces too.
        .marginTop(...)
        // scale factor for generated bitmaps. Use this if you are facing any OOM issues.
        .bitmapScale(...)
        // If you're using complex views with dynamicaly changed content (like edit texts, lists, etc)
        // you should provide your own complex view detector that will return true for such complex views.
        // Every time user swipes pager, transformer will regenerate and split bitmap for view (at the start of swipe gesture)
        // so make sure detector returns true only if view is a complex one.
        .complexViewDetector(...)
        // You can set your own factory that produces bitmap transformers. Default implementation: splitting view into pieces
        .bitmapTransformerFactory(...)
        .build();

The methods listed above are customizable to create the view you like. By changing proper parameters you will get a unique component in your application. However, there a few things you should pay attention to.

Break a leg with this : FabulousFilter – Animate Filter with Floating Action Button

First of all, complex views with dynamically changed content, such as texts edit or lists, requires.complexViewDetector method to return true just for these complex views. Each time the user swipes page transformer generates the split bitmap for the view at the start of the swipe gesture.

It a better idea to use .marginTop method than setting margin to your view using standard method .setMargins. This is because the transformer will split this empty space in the pieces, too.

Important for Android developer : Shortcut key every developer should know

Download Library

Customize Android Crumbling Image SlideView

When implementing the Crumbling tutorial library, you may use the default parameters or you can customize the view as you wish. The default implementation is splitting the view into pieces.

What exactly can you customize?

1. In case you want to stick to the default transition view as much as possible, you can still control the number of pieces in the crumbling view. But you should note that the larger number of pieces can affect the performance. You can also adjust the maximum size of spacing between pieces. Just set the properties to these methods:

.rows(…)

.columns(…)

.piecesSpacing(…)

2. To adjust custom translation of the split pieces, you may also set properties to

.translationX(…)

.translationY(…)

Our library also allows you to set your own factory that produces bitmap transformers with the use of .bitmapTransformerFactory method.

See some more interesting : Top 10 Android Libraries

As a result…

After implementing Bitutorial library as a result you’ll receive a good-looking and distinct transition view in your Android app, which you can design any way you like.

The Bittutorial component is friendly to any kind of apps and you are free to use it howsoever. But we can pitch you some ideas of use cases.

Sliding to tutorials or slideshows
Simple pagination inside your app for all the screens or some of them
Scrolling through the images (in-app gallery for ecommerce applications or albums for social ones)
Profile cards in social network apps