Is there any way to customize a progressbar like this (start with a circle and then a rectangle body)

Question

I am working on an android app, which needs to show a custom progress bar like the image below. To customize a progress bar need to use android:progressDrawable, so maybe need a drawable(self-defined shape). However, I don't know if is it possible using shape to do it?

click progress-bar image, then you can see the image. Is there any tutorial about writing custom progressBar view? — Alan Lin, May 14 '19 at 02:42
I don't know, see https://stackoverflow.com/questions/19357211/android-best-way-to-create-a-custom-shaped-progressbar, https://proandroiddev.com/how-to-draw-a-custom-view-9da8016fe94, http://tech.taskrabbit.com/blog/2014/11/07/android-custom-progress-view/, https://stackoverflow.com/questions/42646574/progress-bar-with-rounded-corners/, https://stackoverflow.com/questions/16893209/how-to-customize-a-progress-bar-in-android. Also you can try to overlap transparent image mask over a purple rectangle. Probably you can see `RatingBar` code. — CoolMind, May 14 '19 at 10:08

score 0 · Answer 1 · answered May 13 '19 at 04:12

I think you better use seekbar. in seekbar widget you can change android:progressDrawable that means the rectangle area and also change android:thumb that means circle shape. But remeber you must implement custom seekbar that disabled user interaction.

score 0 · Answer 2 · answered May 24 '19 at 05:35

I solved this problem by using FrameLayout to overlay a progress bar and a circle imageView. It works perfectly.

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

           <ProgressBar
               android:id="@+id/tagGoal_title_progressbar"
               android:layout_width="match_parent"
               android:layout_height="10dp"
               android:layout_gravity="center_horizontal|center_vertical"
               style="?android:attr/progressBarStyleHorizontal"
               android:progressDrawable="@drawable/progressbar_color"
               android:progress="25"/>
           <ImageView
               android:id="@+id/tagGoal_circle_progressbar"
               android:layout_gravity="center_vertical"
               android:layout_width="20dp"
               android:layout_height="20dp"
               android:background="@drawable/bg_progress_circle"/>
</FrameLayout>

Is there any way to customize a progressbar like this (start with a circle and then a rectangle body)

2 Answers2