How to set gradient in stroke android drawable


I am trying to create a circle drawable with a dash. I am able to achieve circle with dash but am not able to apply gradient color. Is there any way to do it? thanks in advance.

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=""
        android:height="@dimen/size60" />


        android:dashGap="1dp" />


View achieved:

enter image description here

View Required:

enter image description here


There is not a way to create a gradient ring using just XML AFAIK. You’ll have better luck using a custom drawable. The following combine a sweep gradient shader with a Paint object to create a ring that has a gradient from start to end.

class DashedRingDrawable : Drawable() {

    private val mPaint = Paint().apply {
        style = Paint.Style.STROKE
        strokeWidth = STROKE_WIDTH

    private val mColorArray = intArrayOf(Color.WHITE, Color.BLACK)

    private var mRingOuterDiameter = 0f
    private var mRingOuterRadius = 0f
    private var mRingInnerRadius = 0f

    override fun onBoundsChange(bounds: Rect) {
        check(bounds.width() == bounds.height()) {
            "Width must be equal to height. (It's a circle.)"
        mRingOuterDiameter = bounds.width().toFloat()
        mRingOuterRadius = mRingOuterDiameter / 2
        mRingInnerRadius = (mRingOuterDiameter - STROKE_WIDTH) / 2
        val dashLength = getNewDashLength()
        mPaint.pathEffect = DashPathEffect(floatArrayOf(dashLength, GAP_LENGTH), 0f)
        mPaint.shader = SweepGradient(mRingOuterRadius, mRingOuterRadius, mColorArray, null)

    override fun draw(canvas: Canvas) {
        // The following statement is here to show the boundaries and can be removed/commented out.
        canvas.drawCircle(mRingOuterRadius, mRingOuterRadius, mRingInnerRadius, mPaint)

    override fun setAlpha(alpha: Int) {

    override fun setColorFilter(colorFilter: ColorFilter?) {

    override fun getOpacity(): Int {
        return PixelFormat.OPAQUE

    // Adjust the dash length so that we end on a gap and not in the middle of a dash.
    private fun getNewDashLength(): Float {
        val circumference = Math.PI.toFloat() * mRingInnerRadius * 2
        val dashCount = (circumference / (DASH_LENGTH + GAP_LENGTH)).toInt()
        val newDashLength = (circumference - dashCount * GAP_LENGTH) / dashCount
        return newDashLength

    companion object {
        const val STROKE_WIDTH = 15f
        const val DASH_LENGTH = 50f
        const val GAP_LENGTH = 15f

enter image description here

For API 24 and higher, you can place this drawable into an XML file and use it like any other XML drawable.

<drawable xmlns:android=""

For APIs before API 24, you will need to work with this custom drawable programmatically.

Answered By – Cheticamp

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published