how to change number picker style in android?
Solution 1
Make copy of library/res/drawable-*/numberpicker_selection_divider.9.png and name then, for example, custom_np_sd.9.png.
Override default NumberPicker style via activity theme:
<style name="AppTheme" parent="@style/Holo.Theme">
<item name="numberPickerStyle">@style/CustomNPStyle</item>
</style>
<style name="CustomNPStyle" parent="@style/Holo.NumberPicker">
<item name="selectionDivider">@drawable/custom_np_sd</item>
</style>
And apply @style/AppTheme as activity theme.
Solution 2
Unfortunately, you can't style it. The styles and styling attributes for NumberPicker
are not present in the public API, therefore you can't set them and change the default look. You can only select between light and dark theme.
As a solution I would suggest to use android-numberpicker library instead. The library is basically a port of NumberPicker extracted from Android source codes. But it's better than that, it also backports NumberPicker
to Android 2.x. The library can be easily styled.
To style the divider adjust NPWidget.Holo.NumberPicker
style and its selectionDivider
and selectionDividerHeight
attributes.
To style the text adjust NPWidget.Holo.EditText.NumberPickerInputText
style.
Solution 3
Preview of a customized number picker:
<NumberPicker
android:id="@+id/np"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:background="@drawable/drawablenp"
android:layout_centerVertical="true"/>
Create the background xml in the drawable folder named "drawablenp.xml"
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#707070"
android:centerColor="#f8f8f8"
android:endColor="#707070"
android:angle="270"/>
</shape>
Solution 4
I faced this problem too. I really want to have nice NumberPicker
UI. All answer in this question worked but very limited. I almost create my own RecylerView
to create the NumberPicker
I want. Apparently I found neat library which is very robust. Here is the link https://github.com/Carbs0126/NumberPickerView
Not trying to answer the question here. Just want to help someone with the same problem as I am.
Solution 5
I face this problem too, I use reflect to change the style
public class MyNumberPicker extends NumberPicker {
public MyNumberPicker(Context context) {
super(context);
setNumberPickerDivider();
}
public MyNumberPicker(Context context, AttributeSet attrs) {
super(context, attrs);
setNumberPickerDivider();
}
public MyNumberPicker(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setNumberPickerDivider();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public MyNumberPicker(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
setNumberPickerDivider();
}
@Override
public void addView(View child) {
super.addView(child);
updateView(child);
}
@Override
public void addView(View child, int index, android.view.ViewGroup.LayoutParams params) {
super.addView(child, index, params);
updateView(child);
}
@Override
public void addView(View child, android.view.ViewGroup.LayoutParams params) {
super.addView(child, params);
updateView(child);
}
public void updateView(View view) {
if (view instanceof EditText) {
EditText et = (EditText) view;
et.setTextColor(ContextCompat.getColor(getContext(), R.color.font_content));
et.setTextSize(16);
}
}
private void setNumberPickerDivider() {
try {
{
Field field = NumberPicker.class.getDeclaredField("mSelectionDivider");
field.setAccessible(true);
field.set(this, ContextCompat.getDrawable(getContext(), R.drawable.horizontal_divider));
}
{
Field field = NumberPicker.class.getDeclaredField("mSelectionDividerHeight");
field.setAccessible(true);
field.set(this, 1);
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}
Related videos on Youtube
user1796624
Updated on July 09, 2022Comments
-
user1796624 almost 2 years
I want to use the NumberPicker component-widget but Instead in the default Holo theme I need to replace the blue color with orange since that is the default color in my styling. How can I replace the blue color and the color of the numbers,and keep all of the functionality of the component?
thanks
-
Eugen Martynov over 9 yearsWhy Google doesn't allow styling NumberPicker
-
-
user1796624 over 11 yearswhere can I find the library folder in order to copy the style
-
user1796624 over 11 yearsbut by using the library you suggested the scroll functionality of the component is lost, I would really like to keep this functionality
-
Tomik over 11 yearsThe library version can scroll too. There's no problem with that.
-
Someone Somewhere about 10 yearsNo matter what style I picked, I always got black text.
-
zdarsky.peter about 10 yearsNot working Error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Widget.Holo.NumberPicker'. Error: No resource found that matches the given name: attr 'android:selectionDivider'.
-
Vikram over 9 years@SomeoneSomewhere Old comment, I know. You need to override
android:textColorPrimary
in your base theme. This can possibly affect other TextViews' text color (if one is not set explicitly). But, this behavior can be contained on theActivity
level. -
SlashG almost 9 yearsWhat is the use of this library if this too can't style the text for itself? I cannot override
android:textColorPrimary
, as I've already done so differently, -
Pedro Lopes over 7 yearsAdding that the public attributes are marked by the framework using this res/values/public.xml. Also, here is a bit more context about how it works
-
maXp over 6 yearsI agree with the comment above. No resources found. How to use it?
-
AlexS over 3 yearsWill not work on 28+ API. developer.android.com/about/versions/10/non-sdk-q?authuser=1