CODEWITHSUNDEEP
androidprogress-barcustomization
Phantom
Phantom

Reputation: 1028

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

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

enter image description here

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:

enter image description here

Upvotes: 3

Views: 1283

Answers (2)

Phantom
Phantom

Reputation: 1028

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)

Upvotes: 0

Geryson
Geryson

Reputation: 719

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.

Upvotes: 2

Related Questions