When you build your app with a paging concept using Swipe, Tabris UI or any homebrew solution it’s sometimes required that you need to indicate the paging progress. This is often done using colored bullets. To support this Tabris comes with a component called
Creating a PagingIndicator
PagingIndicator is just a simple control. So, you create it as you create any other control. It also needs to be layouted within its container. One difference is that the
PagingIndicator does not need any style flags.
PagingIndicator indicator = new PagingIndicator( parent );
Controlling the PagingIndicator
To work properly the
PagingIndicator needs two information. These are how many bullets should be visible and which one is active. You can do this by calling the responsible set methods on the
PagingIndicator indicator = new PagingIndicator( parent ); indicator.setCount( 23 ); indicator.setActive( 1 );
This will show 23 bullets and make the bullet with the index 1 active.
PagingIndicator allows you to control the active and inactive colors of the bullets, the spacing between bullets and the size of the bullets. You can configure this with the responsible set methods:
PagingIndicator indicator = new PagingIndicator( parent ); indicator.setActiveColor( activeColor ); indicator.setInactiveColor( inactiveColor ); indicator.setSpacing( 23 ); // set the spacing to 23px between bullets indicator.setDiameter( 10 ); // set the diameter of a bullet to 10px
A simple demo on how to use the
PagingIndicator widget can be found on github.