Usage

Let's say, you have a normal layout and you want to display the square-progressbar right away. You can use the following code to add it to your layout.

<net.yscs.android.square_progressbar.SquareProgressBar
    android:id="@+id/sprogressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:paddingTop="20dp" >
</net.yscs.android.square_progressbar.SquareProgressBar>

After this is done, you then need to set some settings to the object. So first cast it from your view:

SquareProgressBar squareProgressBar = (SquareProgressBar) rootView.findViewById(R.id.sprogressbar);

Then copy an image around which you want to display the progressbar into your drawable folder. Keep in mind that it shouldn't be too big.

squareProgressBar.setImage(R.drawable.example);
squareProgressBar.setProgress(50.0);
squareProgressBar.setWidth(10); 

When you launch your app now, then it should look similar to this:

If you don't like the default color of the square-progressbar, then there are different ways of setting a new one.

1. An android holo color : squareProgressBar.setHoloColor(color.holo_blue_bright); (Where color, references to android.R.color)
2. A Hex-Color : squareProgressBar.setColor("#C9C9C9");
3. A RGB-Color : squareProgressBar.setColorRGB(154, 11, 41);

With the version 1.4.0 there are now two different ways on how the opacity can work.

1. The image appears more and more when the progress gets higher.
2. The image fades out when the progress gets higher.

There are two ways to set this : squareProgressBar.setOpacity(true, false); or squareProgressBar.setOpacity(true);

If you want that the image fades more and more, then use squareProgressBar.setOpacity(true, true);

There are a lot of different possibilities to display the current progress as a text in the image. You need two lines of code for the basic settings:

squareProgressBar.showProgress(true);
squareProgressBar.setPercentStyle(new PercentStyle(Align.CENTER, 190, true));

You can set some more settings on this object then displayed in the constructor.

You can set an own alternative text that gets displayed instead of the default %.

squareProgressBar.showProgress(true);
PercentStyle percentStyle = new PercentStyle(Align.CENTER, 150, true);
percentStyle.setCustomText(".-");
squareProgressBar.setPercentStyle(percentStyle);

You can set a different color to the progress text too:

squareProgressBar.showProgress(true);
PercentStyle percentStyle = new PercentStyle(Align.CENTER, 150,	true);
percentStyle.setTextColor(Color.parseColor("#C9C9C9"));
squareProgressBar.setPercentStyle(percentStyle);

You can change the style of the image to grayscale too, just call the following method:

squareProgressBar.setImageGrayscale(true);

There is a way to display a nice outline that gives the whole element a frame. Just use the following method:

squareProgressBar.drawOutline(true);

Maybe you want to display the startline (where the element starts painting the progress) as well:

squareProgressBar.drawStartline(true);