How to animate polyline on android?

Question

How to draw animated polyline on android google map? I had already implement trail library for animation. I want to create polyline as on Lyft on android.

This could help https://stackoverflow.com/questions/17425499/how-to-draw-interactive-polyline-on-route-google-maps-v2-android — Ismail, Jan 09 '20 at 04:44

score 2 · Accepted Answer · answered Jan 09 '20 at 05:08

Create two arraylist of latlng then create polyline by given method

private fun createPolyLine() {

        val lineOptions = PolylineOptions()
        lineOptions.width(6f)
        lineOptions.color(ContextCompat.getColor(act!!, R.color.colorPrimary))
        lineOptions.startCap(SquareCap())
        lineOptions.endCap(SquareCap())
        lineOptions.jointType(JointType.ROUND)
        blackPolyLine = googleMap!!.addPolyline(lineOptions)

        val greyOptions = PolylineOptions()
        greyOptions.width(6f)
        greyOptions.color(Color.GRAY)
        greyOptions.startCap(SquareCap())
        greyOptions.endCap(SquareCap())
        greyOptions.jointType(JointType.ROUND)
        greyPolyLine = googleMap!!.addPolyline(greyOptions)

        animatePolyLine()
    }

after that create animation of these polylines

private fun animatePolyLine() {
        val animator = ValueAnimator.ofInt(0, 100)
        animator.duration = 1500
        animator.interpolator = LinearInterpolator()
        animator.addUpdateListener { animator ->
            val latLngList =
                blackPolyLine!!.points
            val initialPointSize = latLngList.size
            val animatedValue = animator.animatedValue as Int
            val newPoints = animatedValue * decodedPath.size / 100
            if (initialPointSize < newPoints) {
                latLngList.addAll(decodedPath.subList(initialPointSize, newPoints))
                blackPolyLine!!.points = latLngList
            }
        }
        animator.addListener(polyLineAnimationListener)
        animator.start()
    }

private var polyLineAnimationListener: Animator.AnimatorListener =
        object : Animator.AnimatorListener {
            override fun onAnimationStart(animator: Animator) {}
            override fun onAnimationEnd(animator: Animator) {
                val blackLatLng: MutableList<LatLng> = blackPolyLine!!.points
                val greyLatLng: MutableList<LatLng> = greyPolyLine!!.points
                greyLatLng.clear()
                greyLatLng.addAll(blackLatLng)
                blackLatLng.clear()
                blackPolyLine!!.points = blackLatLng
                greyPolyLine!!.points = greyLatLng
                blackPolyLine!!.zIndex = 2f
                animator.start()
            }

            override fun onAnimationCancel(animator: Animator) {}
            override fun onAnimationRepeat(animator: Animator) {}
        }

its working but i want to remove previous path color when progress increase. is there any solution? — Sandip, Jan 09 '20 at 05:39
for removing red circle part you remove latlng from your list — Divyanshu, Jan 09 '20 at 06:16
@Sandip, to remove previous path in Java: if (animator != null) { animator.removeAllListeners(); animator.cancel(); } — Ashwin H, Jul 16 '22 at 04:15

score 0 · Answer 2 · answered Jan 22 '21 at 09:50

 private fun plotPolyline() {

    var polyline = "encoded_pyline"
 
    var list = PolyUtil.decode(polyline)
  

    val blackOptions = PolylineOptions()
    blackOptions.startCap(RoundCap())
    blackOptions.endCap(RoundCap())
    blackOptions.width(10.0f)
    blackOptions.color(Color.BLACK)
    blackOptions.zIndex(2.0f)

    var blackPolyline = googleMap.addPolyline(blackOptions)


    val greyOptions = PolylineOptions()
    greyOptions.startCap(RoundCap())
    greyOptions.endCap(RoundCap())
    greyOptions.width(8.0f)
    greyOptions.addAll(list)
    greyOptions.color(ContextCompat.getColor(this, R.color.gray_dark))
    var greyPolyline = googleMap.addPolyline(greyOptions)

    val valueAnimator = ValueAnimator.ofInt(0, 100)
    valueAnimator.duration = 1500
    valueAnimator.interpolator = LinearInterpolator()
    valueAnimator.addUpdateListener {
        val points: List<LatLng> = greyPolyline.getPoints()
        val percentValue = valueAnimator.animatedValue as Int
        val size = points.size
        val newPoints = (size * (percentValue / 100.0f)).toInt()
       
        val p = points.subList(0, newPoints)
        blackPolyline.points = p


    }

    valueAnimator.addListener(object: Animator.AnimatorListener{
        override fun onAnimationStart(animation: Animator?) {

        }

        override fun onAnimationEnd(animation: Animator?) {
            animation?.start()
        }

        override fun onAnimationCancel(animation: Animator?) {
        }

        override fun onAnimationRepeat(animation: Animator?) {
        }
    })

    googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(list.get(0), 15.0f))
    valueAnimator.start()
}

How to animate polyline on android?

2 Answers2