Case Study: Crumbling Tutorial For Android

Updated 15 Sep 2022

4 Min

5161 Views

Since the introduction of multitouch technology, nothing revolutionary new has been invented in the way how users interact with the apps. It's quite a challenging task to create something new in mobile user experience, isn't it? You must admit that users got used to that few common gestures: tapping, swiping and zooming. So why not to jazz up these usual interactions?

Recently we had an idea to put typical UI flow aside and create our own Android component called Bitutorial Crumbling view tutorial for Android Apps. We decided to create a ViewPager transition animation that can serve various purposes in a mobile application. Creating a sliding tutorial, paging, or images swiping every view inside your app can get animated.

You can see our Bitutorial project on Dribbble and GitHub and meanwhile check out this sample animation. Your Android app may have such kind of split transformation during transitions.

How we developed Bitutorial component

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.

Crumbling tutorial for Android Apps is based on a standard Android ViewPager component. Using ViewPager, we could animate the screen slides that response user's swipe gestures.

The design of the Crumbling view tutorial was created by our talented UI designer Veronika Lykova, whose imagination and love for unusual transitions gave a birth to the split view animation we have. We decided not to bound you with any specific colors and created the plain colored sample animation so that you could adapt it to your brand design.

How to implement the Bitutorial 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(...)
        .columns(...)
        .piecesSpacing(...)
        .translationX(...)
        .translationY(...)
        .marginTop(...)
        .bitmapScale(...)
        .complexViewDetector(...)
        .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.

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.

Any out of memory issues can be overcome using .bitmapScale - a scale factor for the generated bitmaps.

How you can customize Bitutorial

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?

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(...)

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.

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

Sliding to tutorials or slideshows

We can go ahead suggesting you ideas, but certainly by now you have your own. And we are ready to help you implement them even with a simple advice. So if you have any questions, please contact us and let's create something great making this world brighter!

Check out the project on:

GitHub
Dribbble