Monday, September 28, 2020

android kotlin - NumberPicker remove divider

MainActivity.kt

package com.example.jetpack

import android.content.res.Resources
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import android.widget.NumberPicker
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // display string values to the number picker
        // at first, initialize a new array instance with string values
        val colors = arrayOf("Red", "Green", "Blue", "Yellow",
            "Magenta", "Black", "Pink")

        // set the number picker minimum and maximum values
        numberPicker.minValue = 0
        numberPicker.maxValue = colors.size - 1

        // set the valued to be displayed in number picker
        numberPicker.displayedValues = colors

        // remove number picker divider for api level up to 28
        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.Q) {
            numberPicker.removeDivider()
        }
    }
}


// extension function to remove number picker divider for api level up to 28
fun NumberPicker.removeDivider() {
    val pickerFields = NumberPicker::class.java.declaredFields
    for (pf in pickerFields) {
        if (pf.name == "mSelectionDivider") {
            pf.isAccessible = true
            try {
                val colorDrawable = ColorDrawable(Color.TRANSPARENT)
                pf[this] = colorDrawable
            } catch (e: java.lang.IllegalArgumentException) {
                // log exception here
            } catch (e: Resources.NotFoundException) {
                // log exception here
            } catch (e: IllegalAccessException) {
                // log exception here
            }
            break
        }
    }
}
activity_main.xml

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FEFEFA"
    tools:context=".MainActivity">

    <!--
        NumberPicker divider color for api level 29 and up
        set number picker divider color to transparent to remove it
        android:theme="@style/NumberPickerTheme"
    -->
    <NumberPicker
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:descendantFocusability="blocksDescendants"
        android:theme="@style/NumberPickerTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="NumberPickerTheme" parent="AppTheme">
        <!-- Set NumberPicker divider color transparent to remove divider -->
        <item name="colorControlNormal">#00FFFFFF</item>
    </style>

</resources>