Jetpack Compose: How to use Slider

Introduction

Jetpack Compose is Google's modern toolkit for building native UI in Android applications using Kotlin. It simplifies UI development by allowing developers to write less code while achieving more with its declarative approach. One of the essential interactive components in many user interfaces is the slider, which enables users to select a value from a given range. Understanding how to integrate sliders into a Jetpack Compose application can improve user experience by offering seamless control over values like volume, brightness, or any other adjustable parameter.

In this example, we will explore how to implement a basic slider using Jetpack Compose. The slider will allow users to adjust a value between 0 and 100, and the current value will be displayed dynamically as a bolded number at the top of the screen. This approach showcases the ease of binding UI components to state changes using Jetpack Compose.

Code Breakdown

The MainActivity class serves as the entry point of the application, inheriting from AppCompatActivity. In the onCreate method, instead of using traditional XML layouts, the setContent function is used to define the UI. This function invokes the MainContent composable function, which houses the layout and the slider's behavior. The use of Jetpack Compose's declarative UI pattern here eliminates the need for XML, making the UI development more fluid and intuitive.

In the MainContent composable function, a slider is implemented by first defining a state variable using the remember and mutableStateOf functions. The sliderPosition variable stores the current position of the slider, and its value is updated whenever the slider is moved. This value is represented as a float, and to make it more user-friendly, it is scaled to a range of 0 to 100 using a simple multiplication and rounding operation. The resulting integer value (intPosition) is then displayed on the screen in a bolded, larger font.

The UI layout is constructed using Jetpack Compose's Column component, which arranges the children vertically. The Modifier class is used extensively to define layout properties such as padding, background color, and alignment. The text displaying the slider's value is styled using Text, where attributes like font size and weight are specified. This showcases the flexibility of Jetpack Compose in styling UI elements directly within the Kotlin code.

Next, the slider itself is added using the Slider composable. The value attribute is bound to sliderPosition.value, ensuring that the slider reflects the current position. The onValueChange callback is used to update the sliderPosition state whenever the user interacts with the slider, creating a seamless two-way binding between the UI and the underlying state.

Preview Functionality

A key feature of Jetpack Compose is its ability to preview UI components without having to run the entire app on a physical device or emulator. The @Preview annotation is used in the ComposablePreview function, which would allow the developer to see a preview of the MainContent UI directly in Android Studio. Though this particular preview function is commented out, it demonstrates how Jetpack Compose supports rapid UI prototyping and iteration.

Summary

This simple implementation of a slider using Jetpack Compose highlights the power of declarative UI programming in Android. By leveraging state management tools like remember and mutableStateOf, developers can easily bind UI elements to state changes, leading to more responsive and interactive applications. The ability to style and layout components directly in Kotlin, coupled with real-time preview capabilities, makes Jetpack Compose a game-changer for Android development.

With Jetpack Compose, tasks like implementing a slider become more intuitive, reducing the need for verbose XML and enabling developers to focus more on the functionality and user experience of their applications. This approach can be extended to more complex UIs and interactions, making Compose a flexible and efficient toolkit for modern Android development.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.math.roundToInt

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val sliderPosition = remember { mutableStateOf(0f)}
        val intPosition = (sliderPosition.value * 100).roundToInt()

        Column(
            Modifier
                .background(Color(0xF5F5F5))
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                "$intPosition",
                fontWeight = FontWeight.Bold,
                fontSize = 25.sp
            )
            
            Slider(
                value = sliderPosition.value,
                onValueChange = { sliderPosition.value = it }
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}