Circular Music Progressbar – Library

Published by Kapil Mohan on

This Circular Progress bar is a designed and made for music players that need beautiful music progress bar. 

Github:- https://github.com/aliab/circular-music-progressbar

dependencies {
    implementation 'com.github.aliab:circular-music-progressbar:v1.3.0'
}

  <info.abdolahi.CircularMusicProgressBar
    	xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/album_art"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:src="@drawable/maron5"
        app:border_color="#00796B"
        app:border_width="2dp"
        app:centercircle_diammterer="1"
        app:progress_color="#80CBC4"
        app:progress_startAngle="40"
	app:draw_anticlockwise="false" 
	app:enable_touch="false"/>

XML attributes

Name Type Default Description
border_color Color Color.BLACK ProgressBar background color
border_width dimen 2 Thicknes of progress bar
centercircle_diammterer Float 0.805f Number between 0 and 1, that change diammeter of album art image
progress_color Color Color.BLUE ProgressBar active state color
progress_startAngle Float 0 Number between 0 and 360 that describe Start angle of progress bar active state
draw_anticlockwise Boolean false If set to true, progress will be Anti-Clockwise
enable_touch Boolean false If set to true, progress will track along the touch

XML- Element

 <info.abdolahi.CircularMusicProgressBar
        android:id="@+id/album_art"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:src="@drawable/maron5"
        app:border_color="#00796B"
        app:border_width="2dp"
        app:centercircle_diammterer=".97"
        app:draw_anticlockwise="false"
        app:progress_color="#80CBC4"
        app:enable_touch="true"
        app:progress_startAngle="-90" />

Java code – MainActivity

package info.abdolahi.circularmusicbarsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;

import java.util.Random;

import info.abdolahi.CircularMusicProgressBar;
import info.abdolahi.OnCircularSeekBarChangeListener;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    CircularMusicProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar = findViewById(R.id.album_art);

        // set progress to 40%
        progressBar.setValue(40);

        // get user update
        progressBar.setOnCircularBarChangeListener(new OnCircularSeekBarChangeListener() {
            @Override
            public void onProgressChanged(CircularMusicProgressBar circularBar, int progress, boolean fromUser) {
                Log.d(TAG, "onProgressChanged: progress: " + progress + " / from user? " + fromUser);
            }

            @Override
            public void onClick(CircularMusicProgressBar circularBar) {
                Log.d(TAG, "onClick");
                updateRandomly();
            }

            @Override
            public void onLongPress(CircularMusicProgressBar circularBar) {
                Log.d(TAG, "onLongPress");
            }

        });

        // get onClick data
        progressBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                updateRandomly();
            }
        });

    }

    private void updateRandomly() {
        Random random = new Random();
        final float percent = random.nextFloat() * 100;
        progressBar.setValue(percent);
    }
}

Library Details:-

Credits:

Contents from Official Github Repo.


Kapil Mohan

Like to add color to developers life and apps. Can create smile using Android, iOS, PHP, codeignitor, web technologies, etc... Feel free to contact me at [email protected] .