Seems like anyone using Marshmallow (Android 6.0) is not able to use the DatePicketDialog within my app. There appears to be some sort of theme issue that I'm encountering. I use a DialogFragment which contains a DatePicketDialog for the user to select birthday. Here are shots of the DialogFragment with Android 5.x an d 6.x.
I attempted to add a theme in the DatePickerDialog constructor, but that made the DialogFragment fullscreen and I don't want that. Does anyone know how I can get the DatePickerDialog to look like it was prior to Marshmallow?
UPDATE 1
Here is the code where I create the DialogFragment:
DialogFragment ageFragment = new DatePickerDialogFragment();
ageFragment.show(getFragmentManager(), "datePicker");
Here is the onCreateDialog inside the DatePickerDialogFragment:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the current date as the default date in the picker if no filters are set
Calendar cal = Calendar.getInstance();
// Set the date 18 years previous, since only 18 and older are allowed on the app
cal.add(Calendar.YEAR, -18);
int year, month, day;
if (iDialogListener.getYear() == -1 || iDialogListener.getMonth() == -1
|| iDialogListener.getDay() == -1) {
Calendar defaultCal = Calendar.getInstance();
// 40 is the default age to show
defaultCal.add(Calendar.YEAR, -40);
year = defaultCal.get(Calendar.YEAR);
month = defaultCal.get(Calendar.MONTH);
day = defaultCal.get(Calendar.DAY_OF_MONTH);
} else {
year = iDialogListener.getYear();
month = iDialogListener.getMonth();
day = iDialogListener.getDay();
}
DatePickerDialog datepicker = new DatePickerDialog(getActivity(), this, year, month, day);
datepicker.getDatePicker().setMaxDate(cal.getTimeInMillis());
Calendar minDate = Calendar.getInstance();
minDate.set(Calendar.YEAR, Calendar.getInstance().get(Calendar.YEAR) - 100);
datepicker.getDatePicker().setMinDate(minDate.getTimeInMillis());
// Create a new instance of DatePickerDialog and return it
return datepicker;
}
In the themes.xml the only line that touches Dialogs is
<item name="android:alertDialogTheme">#style/CustomDialogTheme</item>
But if I'm thinking right, that doesn't touch the DialogFragment does it?
Update 2
Here is the CustomDialogTheme:
<style name="CustomDialogTheme" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
You create theme in styles.xml but didn't refer it to DatePickerDialog like
DatePickerDialog dlg = new DatePickerDialog(getActivity(),
R.style.datepickerCustom,this,year,month,day);
and create a folder name values-v21 and add a copy of style.xml to it. and paste
<style name="datepickerCustom" parent="#android:style/Theme.DeviceDefault.Light.Dialog">
<item name="android:colorAccent">#color/orange_theme</item>
<item name="android:windowBackground">#android:color/darker_gray</item>
<!--<item name="android:windowContentOverlay">#null</item>-->
<!--<item name="android:textColorPrimary">#color/white</item>-->
<!--<item name="android:textColorSecondary">#color/white</item>-->
</style>
Just change colorAscent color in styles.xml :
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorAccent">#FC6C2D</item> ---> I used orange color here to display the picker dialog in orange color for marshmallow device.
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#000000</item>
</style>
Thanks to the post How to change the style of Date picker in android?, I was able to properly show the DatePicker. I had to use parent="Theme.AppCompat.Light.Dialog" when styling the DatePicker
Related
I have set
<item name="android:textSize">12sp</item>
in the style of the app [AppTheme].
As a consequence, the year label and the summary label in the date picker dialog has gone smaller. I am trying to edit the sizes of them.
I tried various solutions from StackOverflow. But, none of them worked for me. Instead, the calendar is covering the whole screen. Kindly help me with this issue.
You can use a custom theme for your date picker like this
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:textSize">25sp</item>
</style>
and your date picker dialog like this
new DatePickerDialog(MapActivity.this, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
#Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
//DO SOMETHING
}
}, 2019, 11, 25).show();
In the datetime picker there are three things you can control. The year text in the header, the date which is below the year. And last is the buttons (Cancel and okay).
To change the buttons size and font just edit your something like:
<style name="datepicker_dialog" parent="Theme.AppCompat.Light.Dialog">
<item name="android:colorAccent">#color/black_000</item>
<item name="android:colorControlActivated">#color/black</item>
<item name="android:textSize">14sp</item>
<item name="fontFamily">#font/yourFont</item>
<item name="android:textAllCaps">false</item>
</style>
To change the year and date font and size you have to jump into the code where you define the DatePickerDialog:
val dialog = DatePickerDialog(activity, this,
params[0],
params[1],
params[2])
val baseLayout = dialog.datePicker.getChildAt(0) as LinearLayout
val childLayout = baseLayout.getChildAt(0) as LinearLayout
val titleLayout = childLayout.getChildAt(0) as LinearLayout
val dayText = titleLayout.getChildAt(1) as TextView
dayText.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 20f)
dayText.typeface = ResourcesCompat.getFont(activity, R.font.yourFont)
val yearText = titleLayout.getChildAt(0) as TextView
yearText.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 12f)
yearText.typeface = ResourcesCompat.getFont(activity, R.font.yourFont)
dialog.show()
I am unable to see the initials of Day in DatePickerDialog
What I want is :
The code I am using for showing dialog is :
DatePickerDialog dialog = new DatePickerDialog(context, startingDateSetListener,
starting_date_object.getYear(),
starting_date_object.getMonthOfYear()-1,
starting_date_object.getDayOfMonth());
dialog.getDatePicker().setMaxDate(ending_date_object.getMillis());
dialog.show();
The days are probably there but their textColor is the same as the background so you can't see them. This has to do with the style/theme of the dialog.
Create a theme in styles.xml like:
<style name="DatePickerTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/your_accent_color</item>
<item name="colorControlActivated">#color/your_control_activated_color</item>
</style>
and initialize the DatePickerDialog by supplying the theme:
DatePickerDialog dialog = new DatePickerDialog(context,
R.style.DatePickerTheme,
startingDateSetListener,
starting_date_object.getYear(),
starting_date_object.getMonthOfYear()-1,
starting_date_object.getDayOfMonth());
I am building an app that uses a DatePickerDialog to allow the user to select their birthdate. Here's the code that loads the dialog right now:
private void selectBirthdate() {
int year, month, day;
if (mBirthDate == null) {
year = DEF_YEAR;
month = DEF_MON;
day = DEF_DAY;
}
else {
year = mBirthDate.get(Calendar.YEAR);
month = mBirthDate.get(Calendar.MONTH);
day = mBirthDate.get(Calendar.DAY_OF_MONTH);
}
new DatePickerDialog(
getActivity(),
new DatePickerDialog.OnDateSetListener() {
#Override
public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
mBirthDate = new GregorianCalendar();
mBirthDate.set(Calendar.YEAR, year);
mBirthDate.set(Calendar.MONTH, month);
mBirthDate.set(Calendar.DAY_OF_MONTH, dayOfMonth);
if (mTxtBirthDate != null) {
mTxtBirthDate.setText(mBirthDateFormat.format(mBirthDate.getTime()));
}
}
},
year,
month,
day
).show();
}
And here's what the dialog looks like when I load it:
However, they want to be able to use the old-style spinner DatePicker, because in the new Calendar view, it's not always obvious to the user that they can change the year. So I have been studying up on the topic, and according to what I have read, it should be possible to use themes to force the DatePickerDialog into Spinner mode. So here's what I've done.
First, I added the following to my styles.xml:
(Sorry for the screenshot. Apparently SO's parser can't handle XML.)
Then, I update the DatePickerDialog constructor to use my new style:
new DatePickerDialog(
getActivity(),
R.style.MyDialogTheme,
new DatePickerDialog.OnDateSetListener() {
#Override
public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {
mBirthDate = new GregorianCalendar();
mBirthDate.set(Calendar.YEAR, year);
mBirthDate.set(Calendar.MONTH, month);
mBirthDate.set(Calendar.DAY_OF_MONTH, dayOfMonth);
if (mTxtBirthDate != null) {
mTxtBirthDate.setText(mBirthDateFormat.format(mBirthDate.getTime()));
}
}
},
year,
month,
day
).show();
Now, when I load the dialog it looks like this:
Clearly something has changed; the dialog has a darker theme. But it's not doing what I want. It's still displaying the calendar view instead of the spinner view. Any idea what I might have missed?
Here is what worked for me:
1) Create these two styles in your style.xml
<style name="MySpinnerDatePickerStyle" parent="android:Theme.Material.Dialog">
<item name="android:datePickerStyle">#style/MySpinnerDatePicker</item>
</style>
<style name="MySpinnerDatePicker" parent="android:Widget.Material.DatePicker">
<item name="android:datePickerMode">spinner</item>
</style>
2) Set "MySpinnerDatePickerStyle" as your style in your new DatePickerDialog
DatePickerDialog datePickerDialog = new DatePickerDialog(myContext, R.style.MySpinnerDatePickerStyle, date, myCalendar
.get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),
myCalendar.get(Calendar.DAY_OF_MONTH));
Hope this works for you..
Note: I am still trying to figure out how to style the spinner by changing color and text color
Similarly as #Abuzaid said, inside your AppTheme style, add the android:datePickerStyle item as shown in this AppTheme example below:
<!-- Example of a Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<!-- !Important! Add this to force the use of the Spinner mode -->
<item name="android:datePickerStyle">#style/myDatePickerStyle</item>
</style>
Add this style to your styles.xml (inside the values-v21 folder, becouse this option is available only for api 21+)
<style name="myDatePickerStyle" parent="android:Widget.Material.DatePicker">
<item name="android:datePickerMode">spinner</item>
</style>
For Android version < 21, the spinner mode is the default. For 21+ the calendar mode is the new default mode.
In this case you can omit to specify the dialog theme becouse it will be inferred by the AppTheme that we have. For example: (With Java 8 lambda)
final Calendar cal = Calendar.getInstance();
final DatePickerDialog.OnDateSetListener dateSelectedListener = (view, year, monthOfYear, dayOfMonth) -> {
cal.set(Calendar.YEAR, year);
cal.set(Calendar.MONTH, monthOfYear+1);
cal.set(Calendar.DAY_OF_MONTH, dayOfMonth);
};
int year = cal.get(Calendar.YEAR);
int month = cal.get(Calendar.MONTH);
int day = cal.get(Calendar.DAY_OF_MONTH);
DatePickerDialog dp= new DatePickerDialog(context, dateSelectedListener, year, month, day);
Reference: https://developer.android.com/reference/android/app/DatePickerDialog
Hope it can help! :)
Using the styles mentioned in the other answer to get the spinner only works on stock (or close to stock) Android devices, such as Pixel, Motorola, OnePlus, etc.
I made the mistake of testing on these devices only, and to my surprise, Samsung users were still complaining about the other picker, where they couldn't find how to change the birthdate year without having to scroll month by month.
The only cross device solution is using a library, that way you are sure you get the same spinner picker regardless of the underlying OS. I my case, I used SpinnerDatePicker, which is a pretty straightforward replacement for the native picker.
Simple solution with Material Componente
<style name="SpinnerDatePickerDialogTheme" parent="ThemeOverlay.MaterialComponents.Dialog">
<item name="android:datePickerStyle">#style/DatePickerStyle</item>
<item name="colorControlNormal">#color/teal_200</item>
</style>
<style name="DatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:datePickerMode">spinner</item>
</style>
For some reason ThemeOverlay.MaterialComponents.Dialog.Alert is not working with darkmode
I am using datepickerdialog in dialogfragement and the spinners are transparent as showing in this image
How i can fix this?
Thanks
Define a custom dialog theme by setting the back ground color in your styles.xml as below.
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/white</item>
</style>
And apply this theme to the date picker dialog while creating as
DatePickerDialog dialog = new DatePickerDialog(context, R.style.DialogTheme,
new MyDateSetListener(), selectedYear, selectedMonth, selectedDate);
Hope this helps.
DatePickerDialog dialog = new DatePickerDialog(context, R.style.DialogTheme,
new MyDateSetListener(), selectedYear, selectedMonth, selectedDate);
dialog.getWindow().setBackgroundDrawable(getDrawable(R.color.white));
I faced same problem and this did the job done
I wanted to show a DatePicker in a DialogFragment:
public class DatePickerDialogFragment extends DialogFragment {
private OnDateSetListener dateSetListener = null;
private String title = null;
public DatePickerDialogFragment() {}
public DatePickerDialogFragment(OnDateSetListener dateSetListener, String title) {
this.dateSetListener = dateSetListener;
this.title = title;
}
public Dialog onCreateDialog(Bundle savedInstanceState) {
Calendar calendar = Calendar.getInstance();
int year = calendar.get(Calendar.YEAR);
int month = calendar.get(Calendar.MONTH);
int day = calendar.get(Calendar.DAY_OF_MONTH);
DatePickerDialog datePickerDialog = new DatePickerDialog(this.getActivity(), this.dateSetListener, year, month, day);
datePickerDialog.getDatePicker().setCalendarViewShown(false);
datePickerDialog.setTitle(this.title);
return datePickerDialog;
}
}
Unfortunately datePickerDialog.getDatePicker().setCalendarViewShown(false); is completly ignored. I hate the calendar view because it is ugly and uncomfortable. So how can i disable it?
In my "values-v21/styles.xml" I've modified activity theme as below it's hiding calendar & shows simple datepicker spinner. You might want to use a drawable with white background & rounded corners:
<item name="android:datePickerDialogTheme">#style/style_date_picker_dialog</item>
</style>
<style name="style_date_picker_dialog" parent="#android:style/Theme.DeviceDefault.Light">
<item name="android:windowIsFloating">true</item>
<item name="android:windowBackground">#drawable/dialog_background</item>
<item name="android:datePickerStyle">#style/style_datepicker</item>
</style>
<style name="style_datepicker" parent="android:Widget.Material.Light.DatePicker">
<item name="android:datePickerMode">spinner</item>
</style>
This has been answered elsewhere: Android Material Design Inline Datepicker issue, and trying to solve it with the accepted answer got me no where.
Basically you need to do:
<DatePicker
...
android:datePickerMode="spinner" />
because setCalandarShown(); has been deprecated.