How to write TextView over ImageView at a specific position in android?

Question

I am trying to combine TextView and ImageView and want to put TextViews in the center of both circles in the image, but somehow I could not find a solution that would work on different devices. This is the image I'm trying to use:

This is what I have tried so far. I put both the images and the text view in a framelayout, and then tried to adjust the textview using linearlayouts and layout layouts. `

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="80">

    <ImageView
        android:id="@+id/home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/circle_pic"
        android:adjustViewBounds="true" />

    <LinearLayout
        android:id="@+id/home_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="60"
            android:gravity="center">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="85"
                android:orientation="vertical"
                android:gravity="center">

                <TextView
                    android:id="@+id/tv1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:textColor="@color/white"
                    android:text="@string/text1"/>

                <TextView
                    android:id="@+id/tv2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="50sp"
                    android:textColor="@color/white"
                    android:text="@string/text2"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="15">

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_below="@id/text3"
            android:orientation="horizontal"
            android:layout_weight="40"
            android:gravity="center_horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="40">

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="60"
                android:orientation="vertical"
                android:gravity="center">

                <TextView
                    android:id="@+id/tv3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:text="@string/tv3"
                    android:textColor="@color/white"/>

                <TextView
                    android:id="@+id/tv4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="50sp"
                    android:text="000"
                    android:textColor="@color/white"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</FrameLayout>`

Answer 1

You can use RelativeLayout to achieve this as

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="<your_drawable>"/>
    <TextView 
          android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/imageView"
        android:layout_alignRight="@id/imageView"
        android:layout_alignTop="@id/imageView"
        android:layout_alignBottom="@id/imageView"
        android:gravity="center"/>
</RelativeLayout>