Android Circular Determinate Progressbar

Android Circular Determinate ProgressBar

First add a progress_circle.xml to your res/drawable directory like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:drawable="@drawable/progress_circular_background"/>
<item>
    <shape
        android:innerRadiusRatio="3.4"
        android:shape="ring"
        android:thicknessRatio="6.0" >
        <gradient
            android:endColor="#ffffffff"
            android:startColor="#ffffff"
            android:type="sweep"
            android:useLevel="true" />
    </shape>
</item>
<item>
    <rotate
        android:drawable="@drawable/progress_particle"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</item>

</layer-list>

I Googled image searched both "progress_particle.png" and "progress_circular_background.png" (with quotes) since the android default drawables for those were missing. You'll probably want to customize those but they'll do to get you started.

Then in your xml layout:

<ProgressBar
    android:id="@+id/timer_progress"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:indeterminate="false"
    android:max="60"
    android:progressDrawable="@drawable/progress_circle" />

My max is 60, since I'm using it for a seconds timer, but you might have something different.

The trick is that you need to use style="?android:attr/progressBarStyleHorizontal" even though it's a circular progress.

How to have a ProgressBar circular and in determinate mode?

Unfortunately, this is not possible with stock Android ProgressBar. Look for external libraries like:

http://github.com/dinuscxj/CircleProgressBar

How to set the secondary color of determinate circular progress bar

You can create custom progressbar style.

custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
              android:innerRadiusRatio="2.8"
              android:shape="ring"
              android:useLevel="false"
              android:type="sweep"
              android:thicknessRatio="18.0">
              <solid android:color="@color/red"/>
         </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate
              android:pivotX="50%"
              android:pivotY="50%"
              android:fromDegrees="-90"
              android:toDegrees="-90">
              <shape
                  android:innerRadiusRatio="2.8"
                  android:shape="ring"
                  android:angle="0"
                  android:type="sweep"
                  android:thicknessRatio="18.0">
                  <solid android:color="@color/blue"/>

            </shape>
        </rotate>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                  <corners android:radius="5dip" />
                  <solid android:color="@color/secondaryColor"/>
            </shape>
        </clip>
    </item>

</layer-list>

and in xml:

 <ProgressBar
      android:layout_centerInParent="true"
      android:id="@+id/winRateProgressBar"
      android:layout_width="48dp"
      android:layout_height="48dp"
      style="?android:attr/progressBarStyleHorizontal"
      android:indeterminate="false"
      android:max="100"
      android:progress="20"
      android:progressDrawable="@drawable/custom_progress"/>

How do I use Android ProgressBar in determinate mode?

use the style ?android:attr/progressBarStyleHorizontal

for example:

  <ProgressBar android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"

and this is an example with MediaPlayer:

package com.playerpgbar;

import android.app.Activity;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class Player extends Activity implements Runnable, OnClickListener {

    private TextView status;
    private ProgressBar progressBar;
    private Button startMedia;
    private Button stop;
    private MediaPlayer mp;      

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        status = (TextView) findViewById(R.id.status);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        startMedia = (Button) findViewById(R.id.startMedia);
        stop = (Button) findViewById(R.id.stop);

        startMedia.setOnClickListener(this);
        stop.setOnClickListener(this);                
    }        

    @Override
    public void onClick(View v) {
        if (v.equals(startMedia)) {
            if (mp != null && mp.isPlaying()) return;
            mp = MediaPlayer.create(Player.this, R.raw.exodus_piranha);
            mp.start();               
            status.setText(R.string.PlayingMedia);         
            progressBar.setVisibility(ProgressBar.VISIBLE);
            progressBar.setProgress(0);
            progressBar.setMax(mp.getDuration());
            new Thread(this).start();
        }

        if (v.equals(stop) && mp!=null) {
            mp.stop();
            mp = null;            
            status.setText(R.string.Stopped);
            progressBar.setVisibility(ProgressBar.GONE);
        }
    }

    @Override
    public void run() {
        int currentPosition= 0;
        int total = mp.getDuration();
        while (mp!=null && currentPosition<total) {
            try {
                Thread.sleep(1000);
                currentPosition= mp.getCurrentPosition();
            } catch (InterruptedException e) {
                return;
            } catch (Exception e) {
                return;
            }            
            progressBar.setProgress(CurrentPosition);
        }
    }
}

---

Related Topics