Create a Needle GaugeView from iOS (Swift) to Android(Kotlin) – Ios swift

To achieve the above Needle GaugeView with a similar behaviour in android you will need a custom ViewGroup to be able to add subviews for the background image and the needle like the RelativeLayout or the FrameLayout as you suggested on your question. Based on your swift code i have implemented a similar GaugeView in kotlin which extends from a RelativeLayout.

1.First create your custom GaugeView which extends from a RelativeLayout like below:

class GaugeView : RelativeLayout {

    private lateinit var mainBg: ImageView
    private lateinit var needle: RelativeLayout
    private lateinit var polygon: ImageView
    private lateinit var labelsLL: LinearLayout
    private lateinit var valueLabel: TextView
    private lateinit var statusLabel: TextView

    var outerBezelColor: Int = Color.GRAY
    var innerBezelColor: Int = Color.WHITE
    var insideColor: Int = Color.WHITE
    var needleColor: Int = Color.TRANSPARENT
    var valueColor: Int = Color.DKGRAY
    var statusColor: Int = Color.DKGRAY

    var outerBezelWidth = 2f
    var innerBezelWidth = 5f
    var segmentWidth = 0f
    var needleWidth = 23f
    var segmentColors = intArrayOf(Color.GRAY)

    var totalAngle = 270f
    var rotationAngle = -135f

    var path: Path = Path()
    var paint: Paint = Paint()
    var radiusPathRectF = RectF()
    var w = 0
    var h = 0

    constructor(context: Context?) : super(context) {
        setup()
    }

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        setup()
    }

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        setup()
    }

    private fun setup() {

        //create the needle RelativeLayout ViewGroup
        needle = RelativeLayout(context)
        needle.setBackgroundColor(needleColor)

        //create the mainBg ImageView
        mainBg = ImageView(context)
        mainBg.setImageResource(R.drawable.credit_score_meter)
        mainBg.setAdjustViewBounds(true)
        mainBg.setScaleType(ImageView.ScaleType.CENTER_INSIDE)

        //create the polygon ImageView
        polygon = ImageView(context)
        polygon.setImageResource(R.drawable.ic_needle)
        polygon.setAdjustViewBounds(true)
        polygon.setScaleType(ImageView.ScaleType.CENTER_INSIDE)

        //add the mainBg and needle as subviews and polygon as a subview of needle
        addView(mainBg)
        addView(needle)
        needle.addView(polygon)

        //create a Vertical LinearLayout ViewGroup to add the valueLabel and statusLabel as subviews
        labelsLL = LinearLayout(context)
        labelsLL.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)
        labelsLL.orientation = LinearLayout.VERTICAL
        addView(labelsLL)

        //create the valueLabel TextView and add it as a subview of labelsLL
        valueLabel = TextView(context)
        valueLabel.text = "0"
        valueLabel.setTextColor(valueColor)
        valueLabel.gravity = Gravity.CENTER
        valueLabel.setTypeface(valueLabel.typeface, Typeface.BOLD)
        valueLabel.setTextSize(TypedValue.COMPLEX_UNIT_SP, 25f)
        labelsLL.addView(valueLabel)

        //create the statusLabel TextView and add it as a subview of labelsLL
        statusLabel = TextView(context)
        statusLabel.text = "VERY GOOD"
        statusLabel.setTextColor(statusColor)
        statusLabel.gravity = Gravity.CENTER
        statusLabel.setTypeface(statusLabel.typeface, Typeface.NORMAL)
        statusLabel.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14f)
        labelsLL.addView(statusLabel)

        //initialize a path, a paint and a RectF which are needed during the drawing phase
        path = Path()
        paint = Paint()
        radiusPathRectF = RectF()

        //center the mainBg ImageView
        val mainBgParams = mainBg.layoutParams as LayoutParams
        mainBgParams.addRule(CENTER_IN_PARENT, TRUE)
        mainBg.layoutParams = mainBgParams

        //center the needle RelativeLayout
        val needleParams = needle.layoutParams as LayoutParams
        needleParams.addRule(CENTER_IN_PARENT, TRUE)
        needle.layoutParams = needleParams

        //center the labels LinearLayout
        val labelsLLParams = labelsLL.layoutParams as LayoutParams
        labelsLLParams.addRule(CENTER_IN_PARENT, TRUE)
        labelsLL.layoutParams = labelsLLParams

        //set valueLabel margins
        val valueParams = valueLabel.layoutParams as LinearLayout.LayoutParams
        valueParams.setMargins(0, 0, 0, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f, context.resources.displayMetrics).toInt())
        valueLabel.layoutParams = valueParams

        //set statusLabel margins
        val statusParams = statusLabel.layoutParams as LinearLayout.LayoutParams
        statusParams.setMargins(0, 0, 0, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f, context.resources.displayMetrics).toInt())
        statusLabel.layoutParams = statusParams

        //set WillNotDraw to false to allow onDraw(Canvas canvas) to be called (This is needed when you have ViewGroups as subviews)
        setWillNotDraw(false)

        //set the value initially to 0
        setValue(0)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        super.onLayout(changed, l, t, r, b)
        val w = r - l
        val h = b - t

        //set the mainBg ImageView width and height
        val mainBgParams = mainBg.layoutParams as LayoutParams
        mainBgParams.width = (w / 1.2).toInt()
        mainBgParams.height = (w / 1.2).toInt()
        mainBg.layoutParams = mainBgParams

        //set the needle width
        val needleW = mainBgParams.height / 11

        //set the needle RelativeLayout width and height
        val needleParams = needle.layoutParams as LayoutParams
        needleParams.width = needleW
        needleParams.height = 2 * mainBgParams.height / 3
        needle.layoutParams = needleParams

        //set the polygon ImageView width and height to the same width of needle. Also add some top margin eg: 2 dps.
        val polygonParams = polygon.layoutParams as LayoutParams
        polygonParams.width = needleW
        polygonParams.height = needleW
        polygonParams.setMargins(0, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, context.resources.displayMetrics).toInt(), 0, 0)
        polygon.layoutParams = polygonParams
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        this.w = w
        this.h = h
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        // 1: Save the current drawing configuration
        canvas.save()

        // 2: Move to the center of our drawing rectangle and rotate so that we're pointing at the start of the first segment
        canvas.translate(w.toFloat() / 2, h.toFloat() / 2)
        canvas.rotate((rotationAngle - Math.PI / 2).toFloat())

        // 3: Set up the user's line width
        paint.setStrokeWidth(segmentWidth)

        // 4: Calculate the size of each segment in the total gauge in degrees
        val segmentAngle = totalAngle / segmentColors.size.toFloat()

        // 5: Calculate how wide the segment arcs should be
        val segmentRadius = (w - segmentWidth) / 2 - outerBezelWidth - innerBezelWidth

        // 6: Draw each segment
        for (index in segmentColors.indices) {
            val segment = segmentColors[index]

            // figure out where the segment starts in our arc in degrees
            val start = index.toFloat() * segmentAngle

            //activate its color
            paint.setColor(segment)

            // add a path for the segment
            radiusPathRectF.left = -segmentRadius/2
            radiusPathRectF.top = -segmentRadius/2
            radiusPathRectF.right = segmentRadius/2
            radiusPathRectF.bottom = segmentRadius/2
            path.addArc(radiusPathRectF, -90F, start + segmentAngle)

            // and stroke it using the activated color
            paint.setStyle(Paint.Style.STROKE)
            canvas.drawPath(path, paint)
        }

        // 7: Reset the graphics state
        canvas.restore()
    }

    /**
     * Call this helper method to set a new value
     * @param value must be a number between 0-100
     */
    fun setValue(value: Int) {

        // update the value label to show the exact number
        valueLabel.text = value.toString()

        // update the status label based on the value eg: VERY GOOD or GOOD
        statusLabel.text = if (value > 50) "VERY GOOD" else "GOOD"

        // figure out where the needle is, between 0 and 1 (This will set the min value to 0 and max value to 100)
        // in case you want to have a range between 0-1000 divide below with 1000
        val needlePosition = value.toFloat() / 100

        // create a lerp from the start angle (rotationAngle) through to the end angle (rotationAngle + totalAngle)
        val lerpFrom = rotationAngle
        val lerpTo = rotationAngle + totalAngle

        // lerp from the start to the end position, based on the needle's position
        val needleRotation = lerpFrom + (lerpTo - lerpFrom) * needlePosition

        //in android rotation is in degrees instead of radians
        needle.rotation = needleRotation
    }
}

where R.drawable.credit_score_meter is your main background Image:

and the R.drawable.ic_needle is the needle vector icon:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="23dp"
    android:height="23dp"
    android:viewportWidth="23"
    android:viewportHeight="23">
  <path
      android:pathData="M11.8054,0.8052L22.8054,22.8052C22.8054,22.8052 16.0848,21.4364 11.7257,21.4441C7.4285,21.4517 0.8054,22.8052 0.8054,22.8052L11.8054,0.8052Z"
      android:fillColor="#2BE252"/>
</vector>

2.Define the custom GaugeView in your xml layout like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.my.packagename.GaugeView
        android:id="@+id/gaugeView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

3.And finally use the above GaugeView to programmatically set the new value like below:

val gaugeView = findViewById<GaugeView>(R.id.gaugeView)
gaugeView.setValue(75) //values range 0-100 

From the above code the main difference with the swift version is the rotation where in android uses degrees instead of radians used in iOS.
Note also that the above example has a number of range between 0 to 100. In case you want a range from 0 to 1000 you can change this line val needlePosition = value.toFloat() / 100 and divide with 1000. Of course you can modify further the code based on your needs. This is a sample version for your starting point. Hope it helps.

Result:

Animated needle

To animate the needle to a specific degree value you can simply use the build in needle.animate().rotationBy(angle) like this:

needle.animate()
    .rotationBy(rotationAngle)
    .setDuration(500)
    .setInterpolator(LinearInterpolator())
    .start()

If the rotationAngle is a positive value it goes clockwise and if is a negative value it goes anticlockwise.
I have implemented an example with the above animation where you can play with and modify it further to suit your case. Just replace the fun setValue(value: Int) with the new one like below:

private var prevValue = -1;
/**
 * Call this helper method to set a new value
 * @param value must be a number between 0-100
 */
fun setValue(value: Int) {

    if(prevValue == value)
        return

    // update the value label to show the exact number
    valueLabel.text = value.toString()

    // update the status label based on the value eg: VERY GOOD or GOOD
    statusLabel.text = if (value > 50) "VERY GOOD" else "GOOD"

    // figure out where the needle is, between 0 and 1 (This will set the min value to 0 and max value to 100)
    // in case you want to have a range between 0-1000 divide below with 1000
    val needlePosition = value.toFloat() / 100

    // create a lerp from the start angle (rotationAngle) through to the end angle (rotationAngle + totalAngle)
    val lerpFrom = rotationAngle
    val lerpTo = rotationAngle + totalAngle

    // lerp from the start to the end position, based on the needle's position
    val needleRotation = lerpFrom + (lerpTo - lerpFrom) * needlePosition

    //calculate the rotationBy angle (rotation delta angle)
    var rot = 0f
    val diff = Math.abs(Math.abs(needle.rotation) - Math.abs(needleRotation))
    if(needle.rotation == 0f && needleRotation == rotationAngle)
    {
        rot = rotationAngle
    }
    else if(needle.rotation == rotationAngle && needleRotation == 135f){
        rot = 135f*2;
    }
    else if(needleRotation < 0)
    {
        if(needleRotation < needle.rotation){
            if(needle.rotation > 0) {
                if (needle.rotation == 135f){
                    rot = -(135f*2 - diff)
                }
                else if(needleRotation == rotationAngle){
                    rot = -(135f + Math.abs(needle.rotation))
                }
                else {
                   rot = -(Math.abs(needle.rotation) + Math.abs(needleRotation))
                }
            }
            else {
                rot = -diff
            }
        }
        else if(needleRotation > needle.rotation){
            rot = +diff
        }
        else{
            rot = rotationAngle
        }
    }
    else if(needleRotation > 0)
    {
        if(needleRotation < needle.rotation){
            rot = -diff
        }
        else if(needleRotation > needle.rotation){
            if(needle.rotation < 0) {
                if (needle.rotation == rotationAngle){
                    rot = 135f + Math.abs(needleRotation)
                }
                else{
                    rot = Math.abs(needle.rotation) + Math.abs(needleRotation)
                }
            }
            else {
                rot = +diff
            }
        }
        else{
            rot = rotationAngle
        }
    }
    else if (needleRotation == 0f)
    {
        if(needle.rotation == 135f)
            rot = -diff
        else
            rot = +diff
    }

    //and animate the needle using the rotationBy()
    needle.animate()
        .rotationBy(rot) //if this value is negative it goes anticlockwise and if its positive is goes clockwise
        .setDuration(500)
        .setInterpolator(LinearInterpolator())
        .start()

    prevValue = value
}

And you can test it like the below sample:

var i = 1
object : CountDownTimer(202000, 2000) {
    override fun onTick(millisUntilFinished: Long) {
        changeValue(i++)
    }
    override fun onFinish() {}
}.start()

where fun changeValue(number: Int) is the below helper:

fun changeValue(number: Int){
    gaugeView.setValue(0)
    Thread(Runnable {
        Handler(Looper.getMainLooper()).postDelayed(Runnable {
            gaugeView.setValue(number)
        }, 1000)
    }).start()
}

Animated Result: