draw circle on preview view is not accurate when dimension ratio is given

Question

I'm trying to draw a circle on previewView by setOnTouchListener as below

        val shape = GradientDrawable()
            shape.shape = GradientDrawable.OVAL
            shape.setColor(Color.TRANSPARENT)
            shape.setStroke(5, Color.WHITE)

        var circleSize = 200

        var img: ImageView = ImageView(this)
            img.background = shape
            val params = FrameLayout.LayoutParams(circleSize, circleSize)
            params.leftMargin = (event.x - (circleSize / 2)).toInt()
            params.topMargin = (event.y - (circleSize / 2)).toInt()
            idFocusIndicator.removeAllViews()
            idFocusIndicator.addView(img, params)

This was my PreviewView

<androidx.camera.view.PreviewView
        android:id="@+id/viewFinder"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"

    --->app:layout_constraintDimensionRatio="" // 3:4, 9:16, 1:1 etc

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/idFocusIndicator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toTopOf="@+id/viewFinder"
        app:layout_constraintEnd_toEndOf="@+id/viewFinder"
        app:layout_constraintStart_toStartOf="@+id/viewFinder"
        app:layout_constraintTop_toTopOf="@+id/viewFinder" />

When I tap on view when constraintDimensionRatio is blank i.e "". Wherever I tap on view a round circle will appear exactly at that point as a center.

But when constraintDimensionRatio is given values like "3:4","1:1" etc. Circle was getting drawn little far from where I tapped the view. And it's distance from the actual position is different for different dimension ratio.

Look where I tapped and where the circle get drawn when ratio is "3:4" which don't give problem when ratio is ""

How to solve this issue ?

Edit :

I found that because FrameLayout is hard coded with match_parent constraint values It is behaving like that. SO, If I create a FrameLayout and add ImageView to it and then adding FrameLayout as child to parent layout will solve the issue. But I'm not getting how to do it ! Any Help ?

Answer 1

No one answered my question So, I'm only answering

I solved it by just changing the constraint exactly matching PreviewView. But, it took almost a day to figure this out. It might help someone who does same mistake.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/idFocusIndicator"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="3:4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />