How do i show number picker with Jetpack compose
Published October 20, 2021 In this Jetpack compose tutorial we will cover how to display number picker component in Jetpack compose. Number Picker is a component which will give option to choose a number from given range. To Display number picker we will use Compose Number Picker library, which provides a simple to use, lightweight number picker component for Jetpack Compose. It has support for horizontal and vertical orientation.
Let's get started
Step 1: Create Android application in Android studio
Step 2: Follow step for setup Jetpack Compose with Android Studio
Step 3: Add required dependencies in build.gradle file.
implementation 'com.chillibits:composenumberpicker:1.1.0'
|
Step 4:
Add Horizontal Number picker
HorizontalNumberPicker(
min = 10,
max = 100,
default = 50,
onValueChange = { value ->
Toast.makeText(context, value.toString(), Toast.LENGTH_SHORT).show()
}
)
|
Here
min: is the Minimum range of the Number
max : is the Maximum value of number
onValueChange :Which is used to handle the number change listener to choose the selected value
Similarly we can show vertical number picker by below component
VerticalNumberPicker(
min = 20,
max=30,
default = 20,
onValueChange = { value ->
Toast.makeText(context, value.toString(), Toast.LENGTH_SHORT).show()
}
)
|
Step 5: Run application
Create Custom Number Picker using Picker Button in Jetpack Compose
Column {
PickerButton(
size = 45.dp,
drawable = R.drawable.ic_plus_icon,
enabled = number.value < max.value,
onClick = {
if (number.value < max.value) number.value=number.value+1;
onValueChange(number.value,context)
}
)
Text(
text = number.value.toString(),
fontSize = 20.sp,
modifier = Modifier
.padding(10.dp)
.width(IntrinsicSize.Max)
.align(CenterHorizontally)
)
PickerButton(
size = 45.dp,
drawable = R.drawable.ic_minus_icon,
enabled = number.value > min.value,
onClick = {
if (number.value > min.value) number.value--
onValueChange(number.value,context)
}
)
}
|
Complete code for Jetpack Compose Number Picker
package com.example.jetpack.widget
import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.chillibits.composenumberpicker.HorizontalNumberPicker
import com.chillibits.composenumberpicker.PickerButton
import com.chillibits.composenumberpicker.VerticalNumberPicker
import com.example.jetpack.R
@Composable
fun PreviewNumberPicker(context:Context) {
Scaffold(
// below line we are
// creating a top bar.
topBar = {
TopAppBar(
// in below line we are
// adding title to our top bar.
title = {
// inside title we are
// adding text to our toolbar.
Text(
text = "Number Picker in Jetpack Compose",
// below line is use
// to give text color.
color = Color.White
)
},
navigationIcon = {
// navigation icon is use
// for drawer icon.
IconButton(onClick = { },
) {
Icon(Icons.Filled.Menu,"")
}
},
// below line is use to give background color
backgroundColor = Color.Blue,
// content color is use to give
// color to our content in our toolbar.
contentColor = Color.White,
// below line is use to give
// elevation to our toolbar.
elevation = 12.dp
)
}, content = {
var number = remember { mutableStateOf(20) }
val max=remember { mutableStateOf(40) }
val min=remember { mutableStateOf(10) }
Box(modifier = Modifier.fillMaxSize()
) {
Column(
Modifier.fillMaxHeight().
fillMaxWidth(),
content = {
Text(
text = "Horizontal Number Picker",
modifier = Modifier.width(IntrinsicSize.Max).align(CenterHorizontally))
HorizontalNumberPicker(
min = 10,
max = 100,
default = 50,
onValueChange = { value ->
Toast.makeText(context, value.toString(), Toast.LENGTH_SHORT).show()
}
)
Text(
text = "Vertical Number Picker",
modifier = Modifier.width(IntrinsicSize.Max).align(CenterHorizontally))
VerticalNumberPicker(
min = 20,
max=30,
default = 20,
onValueChange = { value ->
Toast.makeText(context, value.toString(), Toast.LENGTH_SHORT).show()
}
)
Spacer(modifier = Modifier.height(20.dp))
Text(text="Custom Number Picker")
Column {
PickerButton(
size = 45.dp,
drawable = R.drawable.ic_plus_icon,
enabled = number.value < max.value,
onClick = {
if (number.value < max.value) number.value=number.value+1;
onValueChange(number.value,context)
}
)
Text(
text = number.value.toString(),
fontSize = 20.sp,
modifier = Modifier
.padding(10.dp)
.width(IntrinsicSize.Max)
.align(CenterHorizontally)
)
PickerButton(
size = 45.dp,
drawable = R.drawable.ic_minus_icon,
enabled = number.value > min.value,
onClick = {
if (number.value > min.value) number.value--
onValueChange(number.value,context)
}
)
}
},
verticalArrangement = Arrangement.Center,
horizontalAlignment =Alignment.CenterHorizontally,
)
}
});
}
fun onValueChange(value: Int,context:Context,) {
Toast.makeText(context, value.toString(), Toast.LENGTH_SHORT).show()
}
|
Conclusion: In this jetpack compose tutorial we covered how to display number picker component in Jetpack compose and create custom number picker with PickerButton.
