Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing NumberPicker divider color

On recent android versions, number pickers use a blue divider when drawn (cf. image below).

enter image description here

I would like to change this color. Is there a working solution? or perhaps a library that package an updated version of NumberPicker that allows customizing the divider color?

I have tried android-numberpicker but I get an error (see below) at runtime due to some code from the library that tries to access to a resource id that does not exist.

android.content.res.Resources$NotFoundException: Resource ID #0x0
        at android.content.res.Resources.getValue(Resources.java:1123)
        at android.content.res.Resources.loadXmlResourceParser(Resources.java:2309)
        at android.content.res.Resources.getLayout(Resources.java:939)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:395)
        at net.simonvt.numberpicker.NumberPicker.<init>(NumberPicker.java:635)
        at net.simonvt.numberpicker.NumberPicker.<init>(NumberPicker.java:560)
        at net.simonvt.numberpicker.NumberPicker.<init>(NumberPicker.java:550)
like image 376
Laurent Avatar asked Jun 15 '14 19:06

Laurent


3 Answers

This worked for me without using the reflection.

my_layout.xml

<NumberPicker
   ...
   android:theme="@style/DefaultNumberPickerTheme" />

Styles.xml (AppTheme is my app theme in the app)

<style name="DefaultNumberPickerTheme" parent="AppTheme">
        <item name="colorControlNormal">@color/dividerColor</item>
</style>
like image 195
Rubin Yoo Avatar answered Nov 06 '22 04:11

Rubin Yoo


If you want simply to change the color (based on stannums answer):

private void setDividerColor(NumberPicker picker, int color) {

    java.lang.reflect.Field[] pickerFields = NumberPicker.class.getDeclaredFields();
    for (java.lang.reflect.Field pf : pickerFields) {
        if (pf.getName().equals("mSelectionDivider")) {
            pf.setAccessible(true);
            try {
                ColorDrawable colorDrawable = new ColorDrawable(color);
                pf.set(picker, colorDrawable);
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
            } catch (Resources.NotFoundException e) {
                e.printStackTrace();
            }
            catch (IllegalAccessException e) {
                e.printStackTrace();
            }
            break;
        }
    }
}

And after that

setDividerColor(mNumberPicker, Color.GREEN);
like image 39
gabin Avatar answered Nov 06 '22 04:11

gabin


Based on this (https://stackoverflow.com/a/20291416/2915480 although it's about DatePicker) there are several ways:

  1. Write your own NumberPicker without mSelectionDivider and its affiliates or use backported by Vikram. In last case:
  2. download from lib from github
  3. change drawable in res/drawable-xxx/np_numberpicker_selection_divider.9.png:
  • to transparent (or whatever) .9.png * create np_numberpicker_selection_divider.xml shape line resource in res/drawable (with 0dp height or transparent color).
  1. OR remove if (mSelectionDivider != null) branch from onDraw(Canvas) method in NumberPicker.java like here

  2. Use reflection to access private final field mSelectionDivider (details: https://github.com/android/platform_frameworks_base/blob/master/core/java/android/widget/NumberPicker.java) - e.g. see modification here. I used reflection but it's not the best solution.

  3. Use theming to override the number picker's divider color in API 21+: ?attr/colorControlNormal determines the color of the divider in material number picker, so changing this color in your widget's theme will do the trick, e.g. for DatePicker:

    <style name="MyAppTheme.NumberPicker" parent=" MyAppTheme">
        <item name="android:colorControlNormal"> ?colorAccent </item>
    </style>

and in the widget:

 <DatePicker
        android:id="@+id/question_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:calendarViewShown="false"
        android:datePickerMode="spinner"
        android:gravity="center"
        android:theme="@style/MyAppTheme.NumberPicker" />
like image 29
Margarita Litkevych Avatar answered Nov 06 '22 04:11

Margarita Litkevych