Added optional background with adjustable color and thickness

[mrmaffen]

I think displaying a background on (especially determinate) progress views is quite a common thing. So I've gone ahead and added the option to draw such a background circle. Color and thickness are adjustable as well.

[rahatarmanahmed]

Appreciate the effort, but I'd like to keep CPV as close to the Material progress bar as possible. Keeping things simple makes this easier to maintain, too.

I don't think it's too difficult to add a background in an Android layout anyway using ShapeDrawables. Letting users create their own backgrounds gives them the flexibility of the Android layout system and doesn't constrain them to the options we support.

If you did want to have a library that has both a CPV and a background, you can do just that. Simply write a custom view that depends on CPV and draws a ShapeDrawable behind a CPV, and publish that to maven.

[mrmaffen]

Appreciate the effort, but I'd like to keep CPV as close to the Material progress bar as possible. Keeping things simple makes this easier to maintain, too.

The material circular ProgressBar doesn't allow a determinate mode. That's the big difference between your project and the official ProgressBar and the reason why this project should support displaying a background. The official horizontal determinate ProgressBar does also support this.

I don't think it's too difficult to add a background in an Android layout anyway using ShapeDrawables. Letting users create their own backgrounds gives them the flexibility of the Android layout system and doesn't constrain them to the options we support.

If you did want to have a library that has both a CPV and a background, you can do just that. Simply write a custom view that depends on CPV and draws a ShapeDrawable behind a CPV, and publish that to maven.

That's what I tried first: Simply drawing a ShapeDrawable behind CPV, but I've ran into issues with some margins not being quite the same. With exactly the same size of both the ShapeDrawable and CPV there was still 1px difference between the two. Not sure why that happened, but at that moment I figured that it'd be easier to simply draw the background within CircularProgressView and it works flawlessly.

[rahatarmanahmed]

The material circular ProgressBar doesn't allow a determinate mode. That's the big difference between your project and the official ProgressBar and the reason why this project should support displaying a background. The official horizontal determinate ProgressBar does also support this.

That's true, but the material design guidelines do have a reference animation for determinate progress bars that I based it on.

That's what I tried first: Simply drawing a ShapeDrawable behind CPV, but I've ran into issues with some margins not being quite the same. With exactly the same size of both the ShapeDrawable and CPV there was still 1px difference between the two. Not sure why that happened, but at that moment I figured that it'd be easier to simply draw the background within CircularProgressView and it works flawlessly.

Hmm, this could possibly be an error in calculating the margins in CPV. I'll look into it and see if I can't figure it out myself.

[rahatarmanahmed]

@mrmaffen So here's how I got it to work:

Add a drawable to res/drawable/cpvbg.xml like this. Set color to whatever, and set width to the same thickness as your CPV.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <stroke android:width="4dp" android:color="#BBBBBB"/>
</shape>

Then in your layout, you can stack them like this. Again, make sure thickness matches. Another thing is to give the ImageView a padding equal to 1/2 * cpv_thickness. I'm not sure exactly why they don't line up but i assume it's because CPV probably handles padding slightly different than normal views?

    <FrameLayout
        android:layout_width="40dp"
        android:layout_height="40dp">

        <ImageView
            android:src="@drawable/cpvbg"
            android:padding="2dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.github.rahatarmanahmed.cpv.CircularProgressView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/progress_view"
            android:padding="0dp"
            app:cpv_indeterminate="true"
            app:cpv_thickness="4dp" />

    </FrameLayout>

Now if you did really contrasting colors, the antialiasing might leak thru from the edges like so:

I dunno what to do about that, but I don't think that's going to be a huge issue for anyone.

[mrmaffen]

Another thing is to give the ImageView a padding equal to 1/2 * cpv_thickness. I'm not sure exactly why they don't line up but i assume it's because CPV probably handles padding slightly different than normal views?

I think that was the solution I was looking for in the first place. Thanks! But I think I'll just stick with using my fork and drawing the background directly in onDraw. No reason to change a running system, right? :)