Change NumberPicker fading edge value or change alpha of top/bottom text

Question

Is there a way to increase the fading edge or change top/bottom text alpha of number picker? I was able to extend NumberPicker class and change alpha of number picker wheel but once I start scrolling alpha gets applied to the center text as well. As you can see, I picked hour value and alpha got applied to all text. I want alpha to be only top and bottom number. Is there ANY way I can accomplish this. ?

private void updateTextAttributes(String fontName) {
    for (int i = 0; i < getChildCount(); i++) {
        View child = getChildAt(i);
        if (child instanceof EditText) {
            try {
                Field selectorWheelPaintField = NumberPicker.class.getDeclaredField("mSelectorWheelPaint");
                selectorWheelPaintField.setAccessible(true);

                Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/SFUIDisplay-" + fontName + ".ttf");

                Paint wheelPaint = ((Paint) selectorWheelPaintField.get(this));
                wheelPaint.setTextSize(mTextSize);
                wheelPaint.setTypeface(typeface);
                wheelPaint.setColor(mTextColor);
                wheelPaint.setAlpha(50); //It does change alpha in the beginning but once I scroll then it also changes center text color

                EditText editText = ((EditText) child);
                editText.setTextColor(mTextColor);
                editText.setTextSize(pixelsToSp(getContext(), mTextSize));
                editText.setTypeface(typeface);
                editText.setAlpha((float) 1.0);


                invalidate();
                break;
            } catch (NoSuchFieldException | IllegalAccessException | IllegalArgumentException e) {
                e.printStackTrace();
            }
        }
    }
}

Design

RESULT so far

EDIT: Ended up using this library

You can try material number picker http://www.materialup.com/posts/material-design-number-picker — Lips_coder, Jun 02 '16 at 04:34
`NumberPicker` is not designed to have alpha animation while scrolling so you cannot have numbers with different alpha level. In `NumberPicker` all numbers have the same alpha and the fading effect is done by fading edge, that is drawn on top of numbers. This gives the effect of numbers "alpha" animation. But underneath the fading edge numbers and the top and bottom are drawn with the same color and alpha as the middle one. And for your question how to manipulate fading edge size, there is a method called `setFadingEdgeLength` that you can use for that purpose. — Maciej Ciemięga, Jun 02 '16 at 10:19
@MaciejCiemięga - Hey thnxs for the comment. So, do I have to accept that it's not possible. I tried setFadingEdgeLength() from custom number picker class inside initView() method (this.setFading....) didnt work. I also tried it from fragment where I've the reference to hourPicker. So inside I also tried hourPicker.setFadingEdge(200). None of them worked. Is there any other way we can do this? Also tried putting on top of those top/bottom text and gave gradient transparent background to that view. That kinda messes up with background that I have. — Alex, Jun 03 '16 at 01:46
@Alex I have the same problem, please let me know if you got solution for it — shweta c, Mar 09 '17 at 06:07
@shwetac - Hey, I had to go with a library (with more flexibility) https://github.com/Carbs0126/NumberPickerView — Alex, Mar 09 '17 at 16:32

Change NumberPicker fading edge value or change alpha of top/bottom text

0 Answers0