Usage

Default 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.

<ch.halcyon.squareprogressbar.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" >
</ch.halcyon.squareprogressbar.SquareProgressBar>

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

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);

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

Change color

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);

Width

If you want to change the width of the progressbar then use the following method:

squareProgressBar.setWidth(20);

Opacity

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.

Image appears

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

Image fades

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

Show Progress

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));

PercentStyle

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

Replace '%'

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);

Text color

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);

Grayscale

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

squareProgressBar.setImageGrayscale(true);

Outline

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

squareProgressBar.drawOutline(true);

Startline

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

squareProgressBar.drawStartline(true);

ScaleType

If you work with big pictures it can happen that the progressbar isn't fitting the image anymore. In this case, try to play around with the image scaletype:

squareProgressBar.setImageScaleType(ScaleType.MATRIX);

Clear at 100%

There is a possibility to let the progressbar (not the image) disappear when the progress hits 100%. Just use the following method:

squareProgressBar.setClearOnHundred(true);

Set a drawable

You can set a drawable as the image too:

squareProgressBar.setImageDrawable(drawable);

Set a bitmap

You can set an in-code generated bitmap as the image too:

squareProgressBar.setImageBitmap(bmp);

Center line

There is a way to display a nice line in the center of the path that the progress has to go around the image. Just use the following method:

squareProgressBar.drawCenterline(true);

Indeterminate

If you want to display an indeterminate style of the progressbar then us the following method. This is useful when you don't know how long something takes to load.

squareProgressBar.setIndeterminate(true);