[Android]NumberPicker selected item change color

Question

Is it possible to change color of the selected item in numberpicker so each time a new center child TextView appear change its color to whatever I like I did not find any style or API expose about this ?

Answer 1

I tried to follow many answers and all of them were setting the whole number's color.

I figured out how to change color only for selected number. set OnTouchListener in your NumberPicker.

numberPicker.setOnTouchListener(new OnTouchListener() {
                    @Override
                    public boolean onTouch(final View v, MotionEvent event) {
                        currentTouchAction = event.getAction();
                        if (currentTouchAction == MotionEvent.ACTION_UP) {
                            new Handler().postDelayed(new Runnable() {
                                @Override
                                public void run() {
                                    if (currentTouchAction == MotionEvent.ACTION_UP) {
                                        setSelectedTextColor((NumberPicker)v, selectedColorRes);
                                    }
                                }
                            }, 300);
                        }
                        return false;
                    }
                });

and below code is for changing the selected number color. You might have to use 'performClick()' to dynamically apply the color.

And if you do that, the picker would immediately stop. So that's why I put postDelayed(300) above. User might drag number picker several times to select the profit number. If you put above postDelay() and wait for several milliseconds, it can be scrolled smoothly.

public void setSelectedTextColor(NumberPicker np, int colorRes) {
    final int count = np.getChildCount();
    for(int i = 0; i < count; i++){
        View child = np.getChildAt(i);
        if(child instanceof EditText){
            try{
                Field selectorWheelPaintField = np.getClass().getDeclaredField("mSelectorWheelPaint");
                selectorWheelPaintField.setAccessible(true);
                ((EditText) child).setTextColor(mContext.getResources().getColor(colorRes));
                np.performClick();
            }
            catch(NoSuchFieldException e){
            }
            catch(IllegalArgumentException e){
            }
        }
    }
}

Answer 2

I think you can use a NumberPicker.OnValueChangeListener using the method setOnValueChangedListener(...)of the widget.

In the callback you get the picker and can change the style the way you want.

Answer 3

You can try using below code. Just pass only your NumberPicker and color in this parameters. Hope this solves your issue

import java.lang.reflect.Field;

public static void changeNumberPickerTextColor(NumberPicker numberPicker, int color)
{

    try{
        Field selectorWheelPaintField = numberPicker.getClass()
            .getDeclaredField("mSelectorWheelPaint");
        selectorWheelPaintField.setAccessible(true);
        ((Paint)selectorWheelPaintField.get(numberPicker)).setColor(color);
    }
    catch(NoSuchFieldException e){
        Log.w("setNumberPickerTextColor", e);
    }
    catch(IllegalAccessException e){
        Log.w("setNumberPickerTextColor", e);
    }
    catch(IllegalArgumentException e){
        Log.w("setNumberPickerTextColor", e);
    }

    final int count = numberPicker.getChildCount();
    for(int i = 0; i < count; i++){
        View child = numberPicker.getChildAt(i);
        if(child instanceof EditText)
            ((EditText)child).setTextColor(color);
    }
    numberPicker.invalidate();  
}

Answer 4

By design is not possible to change only the center color. If you check the NumberPicker's source code, specifically in the onDraw method, then you will see that the widget makes no difference between the center item and the rest of the items when rendering. All the texts are rendered using the same color.

Source code link. Check the onDraw method starting at the comment "//draw the selector wheel": https://android.googlesource.com/platform/frameworks/base/+/0e2d281/core/java/android/widget/NumberPicker.java

In addition, when editing, it places an EditText control on top of the NumberPicker center area. Changing such EditText control will not solve the problem, even if you perform some tricks such as doing a programmatic click to set the EditText into focus, because as soon as you scroll again or set the focus to a different View in your layout, the EditText will be hidden, and you will loose such color effect.

The only solution is to create a new NumberPicker control. For example you could use the actual NumberPicker source code, and adapt it to your needs. You will need to make the adjustments in the onDraw method.