kotlinandroid-jetpackandroid-jetpack-composenumberpickerandroid-number-picker

Android Jetpack Compose NumberPicker Widget Equivalent


What is the recommended solution for creating a NumberPicker Widget in Jetpack Compose? Similar to the image below. I am able to create an NumberPicker using an AndroidView within my composable but the view does not seem to allow flings or snap to position. Btw the UI below shows three NumberPickers placed in a row. It is not supposed to represent a DatePicker

enter image description here


Solution

  • By coincidence I've implemented a screen like that last week. I can't share the whole code here, but basically what I did was:

    1. Create a layout with a DatePicker (res/layout/date_picker.xml).
    <DatePicker xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/datePicker"
        android:theme="@style/DatePickerStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false"
        android:datePickerMode="spinner" />
    
    1. Then, use it in your composable function.
    @Composable
    fun DatePicker(
        onDateSelected: (Date) -> Unit
    ) {
        AndroidView(
            modifier = Modifier.fillMaxWidth(),
            factory = { context ->
                val view = LayoutInflater.from(context).inflate(R.layout.date_picker, null)
                val datePicker = view.findViewById<DatePicker>(R.id.datePicker)
                val calendar = Calendar.getInstance() // show today by default
                datePicker.init(
                    calendar.get(Calendar.YEAR),
                    calendar.get(Calendar.MONTH),
                    calendar.get(Calendar.DAY_OF_MONTH)
                ) { _, year, monthOfYear, dayOfMonth ->
                    val date = Calendar.getInstance().apply {
                        set(year, monthOfYear, dayOfMonth)
                    }.time
                    onSelectedDateUpdate(date)
                }
                datePicker
            }
        )
    }
    
    1. Finally, use it in a ModalBottomSheetLayout

    Editing my answer... Using a NumberPicker working as well...

    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            NumberPicker(context).apply {
                setOnValueChangedListener { numberPicker, i, i2 ->  }
                minValue = 0
                maxValue = 50
            }
        }
    )
    

    Here is the result.

    enter image description here