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