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 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.neveropen.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(); } }); }} |
