How to overlap an image on textview programmatically in constraintlayout?

Question

Im making a mental math app(this is my first app) and if user inputs correct number, i want it programmatically add a red circle on TextView in ScrollView like the image below. How can i acheive this in constraintralout? I searched for similar questions but nothing solved mine. Thanks in advance.

Answer 1

It is quiet simple.

First Make an item with the any layout as follows:

(I have used Constraint layout, you can use relative or any thing)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/number_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="56"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/red_circle_image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="@+id/number_text_view"
        app:layout_constraintEnd_toEndOf="@+id/number_text_view"
        app:layout_constraintStart_toStartOf="@+id/number_text_view"
        app:layout_constraintTop_toTopOf="@+id/number_text_view"
        app:srcCompat="@drawable/circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

XML Code For Red Circle: @drawable/circle

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="4dp" android:color="@android:color/holo_red_dark"/>
</shape>

The above code will create a view like the below image:

Now Reference the Textview and ImageView using Java or Kotlin:

Java:

TextView numberTV = findViewByID(R.id.number_text_view);
ImageView circleImgV = findViewByID(R.id.red_circle_image_view); 

Kotlin:

val numberTV = findViewByID(R.id.number_text_view)
val circleImgV = findViewByID(R.id.red_circle_image_view)

You will need a on click listener where you will be toggling the visibility of the circleImgV

View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(v.getId() == R.id.number_text_view){
                if (circleImgV.getVisibility() == View.VISIBLE){
                    circleImgV.setVisibility(View.GONE);
                }else {
                    circleImgV.setVisibility(View.VISIBLE);
                }
            }
        }
    };

Now Set The on click listener to numberTV:

numberTV.setOnClickListener(onClickListener);

Changing the inside numbers have to be done via code in java or kotlin

Now Keep Reusing the above code for generating Complex views as follows or do it via code or use it recycler view (I am only showing an option) :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <include
        android:id="@+id/include3"
        layout="@layout/stackoverflow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        app:layout_constraintBottom_toTopOf="@+id/include4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include" />

    <include
        android:id="@+id/include"
        layout="@layout/stackoverflow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        app:layout_constraintBottom_toTopOf="@+id/include3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include2" />

    <include
        android:id="@+id/include4"
        layout="@layout/stackoverflow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include3" />

    <include
        android:id="@+id/include2"
        layout="@layout/stackoverflow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        app:layout_constraintBottom_toTopOf="@+id/include"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />
</androidx.constraintlayout.widget.ConstraintLayout>

My Layout name is stackoverflow.xml