Changing Numberpicker Divider Color

Changing NumberPicker divider color

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" />

Changing NumberPicker divider color not working with Android Api 29+

You can use number-picker library like this:

implementation 'com.shawnlin:number-picker:2.4.11'

and in xml:

<com.shawnlin.numberpicker.NumberPicker
android:id="@+id/color_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:np_dividerColor="#000000"/>

and in java set color:

numberPicker.setDividerColor(Color);

Android: how to change the color of the datepicker divider?

Unfortunately, this is not a trivial task.

DatePickers use widgets NumberPicker and CalendarView internally. For instance, the image you have posted is using 3 NumberPickers. And the dividers you are talking about come from NumberPicker's attribute: selectionDivider. The problem is that this attribute is not public, and neither is numberPickerStyle, through which, this attribute is set.

I recently back-ported CalendarView and NumberPicker to API 8, mostly for fun. Since the code is readily available(look up android.widget.NumberPicker and others in android's source), all this task takes is time, and some digging through android's source-code. Examples:

  1. Easy ==> You'll have to change the private variable from View class to their accessor methods

    mLeft (protected variable in View class) ==> getLeft() (public accessor method)

  2. The most time-consuming task was restoring the Accessibility methods.

In any case, if you do decide on writing custom implementation of DatePicker, you'll have to write them for NumberPicker and CalendarView (optionally) as well.

Easier way:

Backported DatePicker is available as a library here: Android-DatePicker. As mentioned above, you'll be using backported CalendarView and NumberPicker in conjunction with this DatePicker.

What you need to change:

Use {library-numberpicker} / res / drawable-xxxx / np_numberpicker_selection_divider.9.png as a template, and change the 'bluish' color to green (I used pixlr). You can either save it with the same name, if you want to be done with the blue divider altogether, or use a different name and make changes in {library-numberpicker} / res / values / themes.xml.

The changes required in themes.xml if you choose a different name:

<style name="NPWidget.Holo.NumberPicker" parent="NPWidget.NumberPicker">
....
<item name="selectionDivider">@drawable/new_nine_path_drawable_name</item>
....
</style>

And that's it.

Output using the libraries:

Sample Image

Edit:

Does the android:divider refer to the divider in the datepicker, and
how could I use it to change color?

The attribute divider actually comes from LinearLayout. NumberPicker inherits this attribute as NumberPicker extends LinearLayout. But this divider serves a different purpose. The drawable passed to this attribute is placed between child views of LinearLayout.

The attribute android:showDividers is used to change the placement of this divider, possible values being:

  • none: No dividers shown
  • beginning: Divider is shown before the first child view
  • middle: Divider is shown after each child view, not not after the last child view
  • end: Divider is shown after the last child view

The attribute android:dividerPadding is self-explanatory.

Even though NumberPicker inherits this attribute, it does not use it. This is evident from your own research & trials: I tried a multitude of combinations of the two, but I don't seem to get it to work.

To see the divider attribute in action:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="@android:drawable/ic_media_play"
android:showDividers="middle" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="World," />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Again" />

</LinearLayout>

Hack-ish workaround using java reflection:

This answer here gave me the idea. I hate using refection in general, mostly for reasons listed in this answer: Link. Although I'm listing it here for completeness sake, I suggest you don't use it.

public class CDP extends android.widget.DatePicker {

public CDP(Context context, AttributeSet attrs) {
super(context, attrs);

Class<?> internalRID = null;
try {
internalRID = Class.forName("com.android.internal.R$id");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}

Field month = null;
try {
month = internalRID.getField("month");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}

NumberPicker npMonth = null;
try {
npMonth = (NumberPicker) findViewById(month.getInt(null));
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}

Field day = null;
try {
day = internalRID.getField("day");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}

NumberPicker npDay = null;
try {
npDay = (NumberPicker) findViewById(day.getInt(null));
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}

Field year = null;
try {
year = internalRID.getField("year");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}

NumberPicker npYear = null;
try {
npYear = (NumberPicker) findViewById(year.getInt(null));
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}

Class<?> numberPickerClass = null;
try {
numberPickerClass = Class.forName("android.widget.NumberPicker");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}

Field selectionDivider = null;
try {
selectionDivider = numberPickerClass.getDeclaredField("mSelectionDivider");
} catch (NoSuchFieldException e) {
e.printStackTrace();
}

try {
selectionDivider.setAccessible(true);
selectionDivider.set(npMonth, getResources().getDrawable(
R.drawable.np_numberpicker_selection_divider_green));
selectionDivider.set(npDay, getResources().getDrawable(
R.drawable.np_numberpicker_selection_divider_green));
selectionDivider.set(npYear, getResources().getDrawable(
R.drawable.np_numberpicker_selection_divider_green));
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (NotFoundException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}

What we do here:

  • Extend DatePicker
  • If you open date_picker.xml in sdk/platforms/android-xx/res/layout, you'll see that the three NumberPickers have ids month, day, year. We access android.internal.R.id to get resource ids for these NumberPickers.
  • We create three NumberPicker objects using these ids with findViewById(int) method.
  • Then, access and retrieve the Field mSelectionDivider using relection.
  • Set the field to accessible (as its declared final), set its value using Field#set(Object, Object) method. The first argument is the Object that we perform this operation on. Second argument is the Object that we want to set.

The drawable I have used can be downloaded from: here.

Change Divider Color Android DatePicker Dialog

You can do this using theme. Check accepted answer on this question. i think it will helpful to you.

UPDATES

Expand res folder in your application and expand values folder. Then create themes.xml file on values folder. then replace all code in themes.xml file with below code.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="MYTheme" parent="@android:style/Theme">

<item name="android:divider">@drawable/dialog_divider</item>

</style>

</resources>

Then open your AndroidManifest.xml file. and find android:theme and replcae with android:theme="@style/MYTheme"

Android divider color DatePicker dialog

The following approach worked for me.This sets divider colours for all fields (also for am/pm)

 private void applyStyLing(TimePickerDialog timePickerDialog){
Resources system = Resources.getSystem();
int hourNumberPickerId = system.getIdentifier("hour", "id", "android");
int minuteNumberPickerId = system.getIdentifier("minute", "id", "android");
int ampmNumberPickerId = system.getIdentifier("amPm", "id", "android");

NumberPicker hourNumberPicker = (NumberPicker) timePickerDialog.findViewById(hourNumberPickerId);
NumberPicker minuteNumberPicker = (NumberPicker) timePickerDialog.findViewById(minuteNumberPickerId);
NumberPicker ampmNumberPicker = (NumberPicker) timePickerDialog.findViewById(ampmNumberPickerId);

setNumberPickerDividerColour(hourNumberPicker);
setNumberPickerDividerColour(minuteNumberPicker);
setNumberPickerDividerColour(ampmNumberPicker);
}

private void setNumberPickerDividerColour(NumberPicker number_picker){
final int count = number_picker.getChildCount();

for(int i = 0; i < count; i++){

try{
Field dividerField = number_picker.getClass().getDeclaredField("mSelectionDivider");
dividerField.setAccessible(true);
ColorDrawable colorDrawable = new ColorDrawable(mContext.getResources().getColor(R.color
.interactive_color));
dividerField.set(number_picker,colorDrawable);

number_picker.invalidate();
}
catch(NoSuchFieldException e){
Log.w("setNumberPickerTxtClr", e);
}
catch(IllegalAccessException e){
Log.w("setNumberPickerTxtClr", e);
}
catch(IllegalArgumentException e){
Log.w("setNumberPickerTxtClr", e);
}
}
}

how to change number picker style in android?

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.

How to change divider color in Timepicker dialog in android

add this item to your main theme

 <item name="numberPickerStyle">@style/MyApp.NumberPicker</item>

set custom divider color in this style

 <style name="MyApp.NumberPicker" parent="Widget.Holo.NumberPicker">
<item name="selectionDivider">@color/white</item>
</style>


Related Topics



Leave a reply



Submit