RonyBrosh/TutorialProgressBar

Custom animated progress bar for wizards and tutorials

Tutorial Progress Bar

Customizable animated progress bar view for use with app's wizards and tutorials

TutorialProgressBar class and the sample App is compatible with Android 4.0 (API level 14) and above.

Screenshot taken from KIDOZ app

###Features

Classic

Diffrent steps length

Customize front and background step colors

Customize progress mask

Sample Application

The sample application (the source is in the repository) has been published onto Google Play for easy access:

###Implementation

1. Add the file TutorialProgressBar.java to your project
   (A good practice will be adding this file under custom_views package)

2. Open the file TutorialProgressBar.java and at the top of the file change the package name to a valid package name according to your project package hierarchy

3. Add the TutorialProgressBar to your xml layout
   (You can choose your TutorialProgressBar width and height or you can wrap_content if you're using a bitmap mask)

<your.own.package_name.custom_views.TutorialProgressBar
	android:id="@+id/TutorialProgressBar"
	android:layout_width="100dp"
	android:layout_height="10dp">
    	
</your.own.package_name.custom_views.TutorialProgressBar>

###Customization Create a TutorialProgressBar reference to controll it's behavior.
Please make sure to set an equal size of parameters, for example if you set the number of steps to be 5 you should also set 5 fill colors if you choose to customize the fill colors as well.

TutorialProgressBar tutorialProgressBar = (TutorialProgressBar) findViewById(R.id.TutorialProgressBar);

/** 
* To use circled sides use the default mask
**/
tutorialProgressBar.useDefaultMask(true);

/** 
* Set number of steps
**/
tutorialProgressBar.setStepsNumber(5);

/** 
* Set steps size percentage of a 100% sum
**/
tutorialProgressBar.setStepsFillPercentage(new int[]{10, 30, 5, 20, 35});

/** 
* Set empty and fill colors
**/
tutorialProgressBar.setEmptyStepColors(new int[]{Color.parseColor("#1f2a55"), Color.parseColor("#451f55")});
tutorialProgressBar.setFillStepColors(new int[]{Color.parseColor("#2541b0"), Color.parseColor("#761f9a")});

/** 
* Set custom mask
* The final view size will be based on the given mask bitmap size. 
**/
tutorialProgressBar.setMask(BitmapFactory.decodeResource(getResources(), R.drawable.custom_mask));