Android Carousel View

Using View Slider Activity and View Slider Fragment

Integrating carousel view in your apps is easy. You can use either ViewSliderActivity or ViewSliderFragment. Both of them are built with great virtualization support, enabling you to feed a large number of items into it. The following example shows the usage of ViewSliderActivity.

In addition, if you want to implement a more advanced layout with fragments, you can take advantage of the ViewSliderFragment that allows you to embed carousel within a Fragment layout. To take advantage of the ViewSliderFragment, simply change the ViewSliderActivity definition to ViewSliderFragment. Of course, this is not all. You will have to host the Fragment inside a FragmentActivity. Check out the following code.

Binding Data to Carousel View

Carousel View is designed to be a multi-purpose slidable container, so it can actually display just anything you desire, in addition to images. Featuring built-in data binding support, you can easily bind a datasource to the view in the same way you bind data to other data controls such as ListView.

Binding a collection of images to the carousel view is simple and straightforward. Consider that you have a simple model with the following definition:

You can easily represent a list of EventImage in a ViewModel by simply utilizing the provided ListViewModelBase<T> class. For more information about built-in ViewModel available in Crosslight, see Selecting a ViewModel Base Class to Get Started.

An example of the ListViewModelBase implementation can be seen below.

For the sake of simplicity, the above example shows how easy it is to define a collection of images and use it as the items source. If you prefer to load the datasource from a web service, you simply need to change the implementation to get the source from the repository. For more information about data access in Crosslight, see Working with Data.

Once you have the ViewModel ready, all you need to do is creating a binding provider that contains the binding information between the ViewModel and the View. See the example below.

The above code is pretty self explanatory. It binds the Items property of the ViewModel to a view named CarouselView. In addition, the item binding description specifies the properties that will be bound to each image in the carousel view. With such minimal definition, you will now see the images show up in the carousel view similar to the illustration below.

For more information about data binding in Crosslight, see Understanding Binding Providers.

Capturing Selection

In addition to data presentation, Carousel View also includes support for selection behavior which allows you to capture the current selection as well as programmatically selecting an item through data binding. The control supports the following bindable properties:

• SelectedIndexProperty
• SelectedItemProperty

Both properties can be bound two-way, so the selection changes at the view level can be easily intercepted in the ViewModel.

The ability to set the selection programmatically is important in certain scenarios where you need to control the active selection from the ViewModel. One of the most common scenarios is to set the initial selection for the carousel view, where the current index is set to the item of which user tapped from the list.

The following code illustrates how to set an initial selection to the control in ViewModel.

For more information about data binding concept in Crosslight, see Understanding Data Binding and MVVM Design Pattern.

Enabling Slide Show

You can easily enable slide show on the carousel view by simply setting the AutoSlide property to true. In addition, you can also configure several settings related to the slide show feature such as:

• AutoSlideInterval – the slide show interval in milliseconds.
• AutoSlideDirection – the slide direction, left or right.
• IsCircular – specifies whether slider should be used in circular way.

Customizing Item Layout

By default, a built-in item layout has been provided which comprises of an image filling the view, and two labels at the bottom of the view. The layout is typically ideal in common scenarios, such as presenting a list of images with a title and a sub title. However, in advanced scenarios, you might want to customize the item layout entirely such as providing new controls which is not available in the default layout, or changing the appearance and layout properties completely.

Similar to ListView, you only need to create you own item layout and then override the ViewSliderItemLayoutId property of ViewSliderActivity or ViewSliderFragment. The following code shows how to customize the item layout of ViewSliderFragment.

At runtime, the item layout will be displayed and bound to the control automatically, such as shown in the following illustration.

Customizing Page Indicator

You can easily customize the page indicator through the IndicatorMode property of ViewSliderActivity or ViewSliderFragment. There are some page indicators which can be used, such as bullet and strip indicator. See the following example.

The following illustration shows a carousel with strip indicator.

Samples

You can quickly get started with the Carousel by downloading the samples from Intersoft Git server here. Prior to running the samples, make sure to set the Android project as the startup project.

Related Topics

• Page:
  Android Auto Complete Text View
• Page:
  Android Message Input View
• Page:
  Android Drawer Navigation
• Page:
  Android Advanced Master Detail
• Page:
  Android Pull to Refresh