Add an item at current progressBar position - Creating a custom progress bar

Question

I am trying to create a custom progress bar that looks like this:

I manage to create the layout, but I don't know how to put that circle at the current progressBar progress position. Does anybody know how to achieve this?

My xml layout looks like this:

<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#ffffff" />
        <corners android:radius="1dip" />
    </shape>
</item>

<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#42cbf4"
                android:width="40dp"/>
        </shape>
    </clip>
</item>

I also added a linearLayout for the transparent Background I tried putting another oval shape in the progress item, or create another shape for secondProgress, but nothing worked. Right now, it looks like this:

probably related https://stackoverflow.com/questions/60111092/native-progressbar-move-element-with-the-current-progress — AZ_, Feb 10 '20 at 10:35

score 2 · Answer 1 · answered Jun 09 '17 at 10:12

2

This type of ProgressBar is called "seek bar", and there are many implementations of it online. Maybe you could search for it on The Android Arsenal by typing "seek" in search. By the way, I've found a simple but pretty one on the site; you can find it here.

answered Jun 09 '17 at 10:12

Geryson

719
2
8
25

Thank you, this was what I was looking for. I managed to customize it, one more problem I encounter. I can't find the attribute for making the height of the bar bigger. I checked the documentation but couldn't find it. – Phantom Jun 09 '17 at 12:14
I can't find it, too... you have two ways to find solution: search for another library which supports this kind of customization **OR** put this library manually into the project - this way you will be able to modify the height of your bars in code. Of course, you will have to search for the proper place of the view's height to achieve this... – Geryson Jun 09 '17 at 12:38

score 0 · Accepted Answer · answered Jun 09 '17 at 14:51

I found what I was looking for. Instead of the ProgressBar I used the SeekBar, which implements that thumb I needed. For customization I used the same layout, and for the thumb I used this snippet:

thumb.xml:

<?xml version="1.0" encoding="UTF-8"?>

<gradient
    android:angle="270"
    android:endColor="#026b91"
    android:startColor="#026b91" />

<size
    android:height="30dp"
    android:width="30dp" />

custom_progress_bar.xml:

<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#ffffff" />
        <corners android:radius="1dip" />
    </shape>
</item>

<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#42cbf4"
                android:width="40dp"/>
        </shape>
    </clip>
</item>

For adding those customization to my progressBar, I used this code:

<SeekBar
   android:id="@+id/seekBar"
   android:thumb="@drawable/thumb"
   android:progressDrawable="@drawable/custom_progress_bar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

For more information, I used this thread Custom seekbar (thumb size, color and background)

Add an item at current progressBar position - Creating a custom progress bar

2 Answers2