How to create progress bar as border of imageview

Question

I need to make progress bar as border of imageview. Here is my xml:

<RelativeLayout 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:id="@+id/loading_status"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center_horizontal">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginStart="13dp"
        android:src="@drawable/circle" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/image"
        android:layout_alignParentTop="true"
        android:layout_marginStart="116dp"
        android:layout_marginTop="41dp"
        android:background="@drawable/circle_shape"
        android:indeterminate="false"
        android:max="100"
        android:progress="65"
        android:progressDrawable="@drawable/circular_progress_bar" />
</RelativeLayout>

here is a circle_shpae.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="1dp"
    android:innerRadius="32dp"
    android:useLevel="false">
    <solid android:color="#f20837" />
</shape>

and circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadius="32dp"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true">

        <gradient
            android:angle="0"
            android:endColor="#EFCD93"
            android:startColor="#EFCD93"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

If I set android:layout_width="wrap_content"and android:layout_height="wrap_content" for progressBar, it is how in a picture. If I set for example android:layout_width="90dp"and android:layout_height="90dp" for progressBar I can see progressBar but at the top of the layout.

I didn't see progressBar. I can't understand what is the trouble.

Answer 1

Sorry that I can't solve your problem directly, but using this library might help you.

I once used it to solve a simular problem.

implementation 'me.tankery.lib:circularSeekBar:1.3.0'

You can use it like this to overlap the circular seekbar by the round image's border.

         <FrameLayout

                android:layout_width="200dp"
                android:layout_height="200dp">

            <ImageView
                android:id="@+id/imageViewMainRound"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:src="@drawable/bg_cool_10" />

            <me.tankery.lib.circularseekbar.CircularSeekBar
                android:id="@+id/seek_bar"
                android:layout_width="match_"
                android:layout_height="200dp"
                android:layout_gravity="center"
                app:cs_circle_color="#00000000"
                app:cs_circle_progress_color="#00000000"
                app:cs_circle_stroke_width="30dp"
                app:cs_circle_style="round"
                app:cs_disable_pointer="false"
                app:cs_max="9"
                app:cs_start_angle="126"
                app:cs_end_angle="54"
                app:cs_negative_enabled="false"
                app:cs_pointer_angle="0"
                app:cs_pointer_color="#FFFFFF"
                app:cs_pointer_stroke_width="30dp" />
     </FrameLayout>