Croller in Android

In this article, we will learn about how to add Croller in android. Croller is used to implement circular Seekbar in android. Seekbar is a type of progress bar. We can drag the seekbar from left to right and vice versa and hence changes the current progress. This is how a Croller look like.

Table of Attributes

XML Attribute	Java set method	Functionality
anticlockwise	setAntiClockwise(boolean anticlockwise)	Set the direction of rotation
progress	setProgress(int progress)	Set the current progress of the seekbar
label	setLabel(String str)	Set the label
label_size	setLabelSize(int size)	Set the label size
label_color	setLabelColor(int color)	Set the label color
is_continuous	setIsContinuous(boolean bool)	Set whether seekbar is conitnuous or discrete
max	setMax(int max)	Set the maximum value of the seekbar
min	setMin(int min)	Set the minimum value of the seekbar (Default is 1)
start_offset	setStartOffset(int offset)	Set the seekbar start offset angle from bottom horizontal center
sweep_angle	setSweepAngle(int angle)	Set the total angle covered by the seekbar
progress_primary_stroke_width	setProgressPrimaryStrokeWidth(float width)	Set the primary progress thickness for continuous type
progress_secondary_stroke_width	setProgressSecondaryStrokeWidth(float width)	Set the secondary progress thickness for continuous type
progress_primary_circle_size	setProgressPrimaryCircleSize(float size)	Set the primary progress circle size for discrete type
progress_secondary_circle_size	setProgressSecondaryCircleSize(float size)	Set the secondary progress circle size for discrete type
indicator_width	setIndicatorWidth(float width)	Set the progress indicator width
indicator_color	setIndicatorColor(int color)	Set the progress indicator color
progress_primary_color	setProgressPrimaryColor(int color)	Set the progress primary(active) color
progress_secondary_color	setProgressSecondaryColor(int color)	Set the progress secondary(inactive) color
progress_radius	setProgressRadius(float radius)	Set the radius of the progress arc
main_circle_radius	setMainCircleRadius(float radius)	Set the main(front) circle radius
back_circle_radius	setBackCircleRadius(float radius)	Set the back circle radius
main_circle_color	setMainCircleColor(int color)	Set the main(front) circle color
back_circle_color	setBackCircleColor(int color)	Set the back circle color

Getting Started

Step 1: Add the support Library in build.gradle file and add dependency in the dependencies section.

implementation ‘com.sdsmdg.harjot:croller:1.0.7’

Step 2: Add the following code in activity_main.xml file. In this file we add our Croller to the layout.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

    <com.sdsmdg.harjot.crollerTest.Croller
        android:id="@+id/croller"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        app:back_circle_color="#EDEDED"
        app:indicator_color="#0B3C49"
        app:indicator_width="10"
        app:is_continuous="false"
        app:label="Set Difficulty Level"
        app:label_color="#000000"
        app:main_circle_color="#FFFFFF"
        app:max="50"
        app:progress_primary_color="#0B3C49"
        app:progress_secondary_color="#EDEDED"
        app:start_offset="45">

</RelativeLayout>

Step 3: Add the following code in MainActivity.java file. In this we add setOnCrollerChangeListener() to our croller so whenever there is a change in progress setOnCrollerChangeListener() get invoked automatically.

MainActivity.xml

package org.geeksforgeeks.croller

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;
import com.sdsmdg.harjot.crollerTest.Croller;
import com.sdsmdg.harjot.crollerTest.OnCrollerChangeListener;

public class MainActivity extends AppCompatActivity {

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

        Croller croller = findViewById(R.id.croller);

        // when there is a change in the progress of croller
        // this function get invoked automatically
        croller.setOnCrollerChangeListener(
            new OnCrollerChangeListener() {
            @Override
            public void onProgressChanged(Croller croller,
                        int progress) {

            }

            // when the user is starting to change the progress
            // this function gets invoked automatically.
            @Override
            public void onStartTrackingTouch(Croller croller) {
                Toast.makeText(MainActivity.this,
                      "Start", Toast.LENGTH_SHORT).show();
            }

            // when the user stops to change the progress
            // this function gets invoked automatically.
            @Override
            public void onStopTrackingTouch(Croller croller) {
                Toast.makeText(MainActivity.this,
                      "Stop", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Run as Emulator