Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Croller in Android

Croller is a custom Android widget for a circular roller. It offers more customization and is a better alternative to the traditional Android SeekBar. With Croller, you can customize things like the color, number of indicators, and more.

Here's a guide to integrating and using Croller in your Android project:

1. Add Dependency:

First, add the Croller dependency in your build.gradle (Module: app):

dependencies {
    implementation 'com.sdsmdg.harjot:croller:1.0.5'
}

Make sure you check for the latest version.

2. Add Croller to Your Layout:

In your XML layout file, you can add the Croller like:

<com.sdsmdg.harjot.crollerTest.Croller
    android:id="@+id/croller"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    app:back_circle_color="#E0E0E0"
    app:main_circle_color="#FFFFFF"
    app:indicator_color="#FF5722"
    app:main_circle_radius="120"
    app:number_of_stages="5"
    app:progress_primary_color="#0B3D91"
    app:progress_secondary_color="#81B9BF"
    app:is_continuous="false"/>

This creates a Croller with specific customization, such as color, number of indicators (stages), and more.

3. Use Croller in Your Activity/Fragment:

In your Activity or Fragment, you can retrieve and use the Croller like:

val croller = findViewById<Croller>(R.id.croller)
croller.setOnProgressChangedListener(object : Croller.onProgressChangedListener {
    override fun onProgressChanged(progress: Int) {
        // Use the progress value as required
        Log.d("CROLLER", "Progress: $progress")
    }
})

With this, whenever the user moves the Croller, you'll get the updated progress in the provided callback, which you can then use as needed.

Note:

The features mentioned above are just a subset of what Croller offers. The widget provides a lot of customization options that allow you to tweak its appearance and behavior to match your application's theme and requirements. Always refer to the official documentation or repository for additional details and updates.

  1. Using Circular Slider (Croller) in Android Kotlin:

    • Description: Circular Slider, also known as Croller, is a UI component that allows users to select a value by rotating a circular slider. It is commonly used for settings where a continuous range of values needs to be chosen.
    • Code (Kotlin):
      // Example of using Circular Slider (Croller) in Android
      val croller: Croller = findViewById(R.id.circularSlider)
      croller.setOnCrollerChangeListener { croller ->
          // Handle the value change event
          val selectedValue = croller.progress
          // Perform actions based on the selected value
      }
      
  2. Croller library for Android example:

    • Description: The Croller library simplifies the implementation of circular sliders in Android. You can include the library in your project and use its customizable components to create circular sliders easily.
    • Code (Kotlin):
      // Example of using Croller library in Android
      implementation 'com.github.captain-miao:Croller:1.0.8'
      
  3. Customizing Croller appearance in Android:

    • Description: Customizing the appearance of the Croller involves adjusting properties such as color, size, and style to match the design of your app. You can customize the track, handle, and other visual elements.
    • Code (Kotlin):
      // Example of customizing Croller appearance
      val croller: Croller = findViewById(R.id.circularSlider)
      croller.mainCircleColor = Color.BLUE
      croller.indicatorColor = Color.RED
      // Set other customization properties as needed
      
  4. Handling events with Croller in Android:

    • Description: Handling events with Croller allows you to respond to changes in the selected value. You can implement listeners to perform actions whenever the user interacts with the circular slider.
    • Code (Kotlin):
      // Example of handling events with Croller
      val croller: Croller = findViewById(R.id.circularSlider)
      croller.setOnCrollerChangeListener { croller ->
          // Handle the value change event
          val selectedValue = croller.progress
          // Perform actions based on the selected value
      }
      
  5. Adding labels to Croller in Android:

    • Description: Adding labels to Croller involves displaying text at specific points around the circular slider. This can be useful for indicating important values or providing context to users.
    • Code (Kotlin):
      // Example of adding labels to Croller
      val croller: Croller = findViewById(R.id.circularSlider)
      croller.label = "Volume"
      // Set other label-related properties as needed
      
  6. Setting minimum and maximum values in Croller:

    • Description: Setting minimum and maximum values in Croller defines the range of values that users can select. This ensures that the selected value falls within the specified range.
    • Code (Kotlin):
      // Example of setting minimum and maximum values in Croller
      val croller: Croller = findViewById(R.id.circularSlider)
      croller.min = 0
      croller.max = 100
      // Set other properties related to the range
      
  7. Integrating Croller into Android layout:

    • Description: Integrating Croller into an Android layout involves adding the Croller view to your XML layout file and configuring its attributes. This allows you to visually position and customize the circular slider.
    • Code (XML):
      <!-- Example of integrating Croller into Android layout -->
      <com.sdsmdg.harjot.crollerTest.Croller
          android:id="@+id/circularSlider"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:is_continuous="true"
          app:start_offset="45"
          app:max="100"
          app:label="Progress"
          app:label_size="12sp"
          app:indicator_width="10dp"
          app:back_circle_radius="80dp"
          app:main_circle_radius="100dp"
          app:progress_primary_color="#FF5722"
          app:progress_secondary_color="#757575"
          app:progress_max_color="#FF9800"
          app:progress_min_color="#4CAF50"/>