androiddrawableandroid-drawableandroid-progressbarxml-drawable

How to make round corners for a ring shape in Android drawable


I have a custom progress bar that looks like this:

enter image description here

Here's the .xml code I've used to create it:

background_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="@dimen/progress_bar_radial_inner_radius"
    android:thickness="@dimen/progress_bar_radial_thickness"
    android:shape="ring"
    android:useLevel="false" >
    <solid android:color="@color/main_color_alpha"/>
</shape>

progress_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadius="@dimen/progress_bar_radial_inner_radius"
        android:thickness="@dimen/progress_bar_radial_thickness"
        android:shape="ring" >
        <solid android:color="@color/main_color"/>
    </shape>
</rotate>

What I want to get is a round corners for the ring that I use to show progress. Something that would look like this:

enter image description here

Does someone has any idea on how this can be achieved?


Solution

  • Ok, the easiest way I've found to do what I want is to draw progress arc on canvas instead of using progress_drawable.xml. Here's my code in case someone has similar issue.

    class RadialProgressBar : ProgressBar {
    
        private val thickness = 28f
        private val halfThickness = thickness / 2
        private val startAngle = 270f
        private var boundsF: RectF? = null
        private lateinit var paint: Paint
    
        constructor(context: Context?) : super(context) {
            init()
        }
    
        constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
            init()
        }
    
        constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
            init()
        }
    
        private fun init() {
            paint = Paint()
            paint.isAntiAlias = true
            paint.style = Paint.Style.STROKE
            paint.strokeWidth = thickness
            paint.strokeCap = Paint.Cap.ROUND
            paint.color = ContextCompat.getColor(context, R.color.main_color)
    
            progressDrawable = null
        }
    
        override fun draw(canvas: Canvas?) {
            super.draw(canvas)
    
            if (boundsF == null) {
                boundsF = RectF(background.bounds)
                boundsF?.inset(halfThickness, halfThickness)
            }
    
            canvas?.drawArc(boundsF, startAngle, progress * 3.60f, false, paint)
        }
    }