How to add a textview overlay on an imageview which has hieght of wrap_content

Question

Hello i have an issue where i have aded the textview as an overlay on an image view which has a hieght of wrap_content and width of match_parent (i dont want to change hight or width of the image view at any cost) the problem is the text is not showing up

the scaleType i have included to the imageView is fitCenter (From Glide)

here is my code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="11dp"
        android:layout_marginEnd="5dp"
        app:cardElevation="1dp"
        app:cardMaxElevation="4dp"
        app:shapeAppearanceOverlay="@style/RoundedCorner">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/rankedNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_marginStart="20dp"
                android:layout_marginTop="20dp"
                android:background="@drawable/circular_background_text"
                android:text="@string/_1"
                android:textAlignment="center"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:textStyle="italic" />

            <com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:contentDescription="@string/todo" />
        </RelativeLayout>
    </com.google.android.material.card.MaterialCardView>
</RelativeLayout>

Answer 1

Try this, inside your CardView:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:contentDescription="@string/todo" />

        <TextView
            android:id="@+id/rankedNumber"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/circular_background_text"
            android:text="@string/_1"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="40sp"
            android:textStyle="italic" />
</FrameLayout>