Carousel

Carousel

Carousel is a motion helper object to easily build carousels views.

Concept

Create a motion layout with 3 states (make sure to give them Ids)

• previous
• start
• next

In the layout, have a collection of views to represent your carousel items.

If the start state corresponds to that base layout, the previous state should be done in such a way that the carousel items will be shifted by one -- meaning that if we have 3 views A, B, C in the start state, in the previous state B should be put where A was, C where B was, and A can be pushed away. In the next state, we do the opposite, with A being set where B was, B being set where C was, and C being pushed aside.

Once this basic motion scene is created, we only need to add a Carousel helper to the layout and references those views (in the same order we implemented our previous/next animation).

The Carousel helper also need a couple of attributes to be set up:

• app:carousel_firstView : the view that will represent the first element of the carousel, in our example, B
• app:carousel_previousState : the constraintset id of the previous state
• app:carousel_nextState : the constraintset id of the next state
• app:carousel_backwardTransition : the transition id applied between start -> previous
• app:carousel_forwardTransition : the transition id applied between start -> next

Finally, we also need to set up a Carousel adapter in code:

    carousel.setAdapter(new Carousel.Adapter() {
        @Override
        public int count() {
            // need to return the number of items we have in the carousel
        }

        @Override
        public void populate(View view, int index) {
            // need to implement this to populate the view at the given index
        }

        @Override
        public void onNewItem(int index) {
             // called when an item is set
        }
    });