🕊️ 🥧 🚙 Material Design Library Slider Component 🐠 👩🏼‍🚀 👩‍🔧

It began with a small detective story - looking at the Material Design website, I came across the Sliders page . The description said that this component is available for Android and even given a link to the github . This surprised me a little, since I had never heard of him. I follow the link - it says on the Github that the component is still in active development and some scant examples in Java are given. "In these your Internet" mentions of Slider did not find. There are no references to official library documentation either.

Fortunately, there are source codes .

Curiosity prevailed and I began to delve into it myself.

In appearance, Slider is similar to the standard Seekbar . But there are slight differences. To see them, I sketched a simple project. Add a couple of sliders to the screen, button and look at the component in action.

I used the latest version of the library.

implementation 'com.google.android.material:material:1.2.0-alpha06'

Markup:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="New value"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:value="8.09"
        android:valueFrom="0.0"
        android:valueTo="21.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:valueFrom="100.0"
        android:valueTo="100000.0"
        android:stepSize="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/slider" />

</androidx.constraintlayout.widget.ConstraintLayout>

Just in case, I’ll notice that when I manually registered the code, Android Studio refused to show the activity screen in the “Design” mode, I had to restart the studio. After that, everything returned to normal.

The code for the activity class.

//    ,    ,
//   ,   ,   .
// http://developer.alexanderklimov.ru/android/

package ru.alexanderklimov.as36

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            slider.value = 5.0F
        }

        slider.values = listOf(1F, 4F, 6F)

        slider.addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
            override fun onStartTrackingTouch(slider: Slider) {
                println("Start Tracking Touch")
            }

            override fun onStopTrackingTouch(slider: Slider) {
                println("Stop Tracking Touch")
            }
        })

    }
}

We start and look at the result.

The first thing that catches your eye is that we can set several sliders through slider.values . They behave independently and do not interfere with each other.

The second slider has a discrete mode set via the android: stepSize attribute . You may notice that in this mode small dots appeared on the track.

If you click on the slider, then a plate appears on top indicating the current value.

Clicking on the button programmatically sets the slider in the right place at the first slider. Note that in our case, the component will turn into a ~~pumpkin~~ slider with one slider, since we dropped the list of values, leaving only one.

The slider has several listeners. To demonstrate, I brought one of them - Slider.OnSliderTouchListener .

The text on the die can be changed. This is useful when large numbers are used. Then instead of numbers with a large number of zeros (millions, trillions, etc.), you can use abbreviated options. The LabelFormatter interface is responsible for this behavior . There is also a helper interface BasicLabelFormatter , which already contains useful abbreviations for large numbers such as 9.1K instead of 9100.

Let's mess around a bit and write a three-letter word.

slider2.setLabelFormatter {
    ""
}

The new element seemed interesting and quite suitable for use in the project.

Material Design Library Slider Component

More articles: