Thumb is on top of the seekbar

Question

I am trying to design a seekbar with a thumb that contains the progress. Below is the image how it is expected to be:

Below is my xml for the seekbar:

<androidx.appcompat.widget.AppCompatSeekBar
                    android:id="@+id/seekbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/dp_50"
                    android:max="9"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toBottomOf="parent"
                    android:progress="1"
                    android:splitTrack="false"
                    android:thumbOffset="@dimen/dp_50"
                    android:thumb="@drawable/ic_tooltip2"
                    />

But my thumb is coming on top of the seekbar instead of coming above it. This is my current result :

How can I get the expected result and how to place the text on the thumb image.