How to properly display DatePickerDialog using MaterialComponents? - android

I'm using MaterialComponents for Android from material.io.
I have two themes (light and dark). I want to show an DatePickerDialog.
But this is the result:
Here is the code how i show my dialog:
private fun selectDeadline() {
val dialog = DateDialog()
val bundle = Bundle()
bundle.putInt("themeId", themeId)
dialog.arguments = bundle
dialog.show(supportFragmentManager, "")
}
class DateDialog : DialogFragment(), DatePickerDialog.OnDateSetListener {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val date = DateTime.now()
val themeId = arguments!!.getInt("themeId")
return DatePickerDialog(activity!!, themeId, this, date.year, date.monthOfYear - 1, date.dayOfMonth)
}
override fun onDateSet(view: DatePicker?, year: Int, month: Int, day: Int) {
deadlineTitle.text = "$year, $month, $day"
}
}
And last but not least, my themes:
<resources>
<!-- Dark application theme. -->
<style name="AppTheme.Dark" parent="Theme.MaterialComponents.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarBackground">#color/darkBackground</item>
<item name="toolbarStyle">#style/AppTheme.Dark.Toolbar</item>
<item name="iconColor">#fff</item>
<item name="dividerBackground">#android:drawable/divider_horizontal_dark</item>
<item name="android:statusBarColor">#android:color/black</item>
</style>
<style name="AppTheme.Dark.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/darkBackground</item>
<item name="android:elevation">8dp</item>
</style>
<!-- Light application theme. -->
<style name="AppTheme.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarBackground">#color/lightBackground</item>
<item name="toolbarStyle">#style/AppTheme.Light.Toolbar</item>
<item name="iconColor">#000</item>
<item name="dividerBackground">#android:drawable/divider_horizontal_bright</item>
<item name="android:datePickerDialogTheme">#style/AppTheme.Light.DatePicker</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.Light.DatePicker" parent="ThemeOverlay.MaterialComponents.Dialog">
<item name="materialButtonStyle">?android:attr/borderlessButtonStyle</item>
</style>
<style name="AppTheme.Light.Toolbar" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">#color/colorPrimary</item>
<item name="android:elevation">8dp</item>
</style>
If i don't give themeId as parameter it shows properly on light theme but on dark theme it shows just the light version with white text which is invisible for the user to see because of the white background.
What is the proper way to solve this problem?


Thank you for the question. The Material Components library currently doesn't support dark mode for date and time pickers. We plan to add support for this, please stay tuned.

Related

Splashscreen API below Android 12

I am testing the splash screen API below Android 12 versions. It is working fine. But when I navigate to another activity a black screen appears before activity apperas.
Here is my values-31/themes file
<style name="Theme.CustomSplashScreenTheme" parent="Theme.SplashScreen">
<item name="android:windowSplashScreenBackground">#android:color/white</item>
<item name="android:windowSplashScreenAnimatedIcon">#mipmap/ic_launcher_round</item>
<item name="android:windowSplashScreenAnimationDuration">300</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
</style>
this is my main themes.xml file
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDisablePreview">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:navigationBarColor">#color/primaryDark</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorAccent">#color/primary</item>
<item name="colorPrimaryDark">#color/primary</item>
<item name="android:forceDarkAllowed">true</item>
</style>
<style name="Theme.CustomSplashScreenTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#android:color/darker_gray</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/ic_launcher_background</item>
<item name="windowSplashScreenAnimationDuration">300</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
</style>
Now, I have to navigate to screen according to the authentication. So, I have made a splash screen activity. Here is the code for it.
class SplashActivity : BaseActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val splashScreen = installSplashScreen()
super.onCreate(savedInstanceState)
splashScreen.setKeepOnScreenCondition { true }
if (sharedPreferenceUtils.preferenceGetBoolean(Utils.PreferenceKey.isLoggedIn, false)) {
startActivity(Intent(this#SplashActivity, HomeActivity::class.java))
} else {
startActivity(Intent(this#SplashActivity, LoginActivity::class.java))
}
finish()
}
}
I have attached the video for the issue I am facing.

Material DatePicker Not Showing Properly

The Date Picker is not coming as Expected can any one help me on how to remove this issues?
var datePickerBuilder = MaterialDatePicker.Builder.datePicker()
datePickerBuilder.setTitleText("Select Date")
datePickerBuilder.setTheme(R.style.DatePickerTheme)
var materialDatePicker = datePickerBuilder.build()
materialDatePicker.show(requireActivity().supportFragmentManager,"DATE_PICKER")
above code is for datePickerDailog
and here are the stylings -
<style name="DatePickerTheme" parent="Theme.MaterialComponents.DayNight">
<item name="materialCalendarFullscreenTheme">#style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="materialCalendarStyle">#style/Custom_MaterialCalendar.Fullscreen</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen"
parent="#style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="android:windowFullscreen">true</item>
image -
im trying to expect someThing like this -

How to change Theme of "MaterialDatePicker" in Android?

I've used MaterialDatePicker for the purpose of selecting a single date & also I had achieved that task but I cannot change the theme of the header & button.
MaterialDatePicker.Builder builder;
MaterialDatePicker materialDatePicker;
long today = MaterialDatePicker.todayInUtcMilliseconds();
CalendarConstraints.Builder con = new CalendarConstraints.Builder();
con.setValidator(DateValidatorPointForward.now());
builder.setSelection(today);
builder.setCalendarConstraints(con.build());
materialDatePicker = builder.build();
findViewById(R.id.startCalender).setOnClickListener(v ->
materialDatePicker.show(getSupportFragmentManager(), builder.toString())
);
materialDatePicker.addOnPositiveButtonClickListener(selection ->
Toast.makeText(this, materialDatePicker.getHeaderText(),
Toast.LENGTH_SHORT).show());

You have different options.
You can use:
builder.setTheme(R.style.MaterialCalendarTheme);
with:
<style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<!-- just override the colors used in the default style -->
<item name="colorOnPrimary">#color/primaryDarkColor</item>
<item name="colorPrimary">#color/primaryLightColor</item>
</style>
or you can use something like:
<style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<!-- Header panel -->
<item name="materialCalendarHeaderLayout">#style/MaterialCalendar.HeaderLayout1</item>
<!-- Buttons -->
<item name="buttonBarPositiveButtonStyle">#style/TextButton.Dialog1</item>
<item name="buttonBarNegativeButtonStyle">#style/TextButton.Dialog1</item>
</style>
<style name="MaterialCalendar.HeaderLayout1" parent="Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
<!--<item name="android:background">?attr/colorPrimary</item>-->
<item name="android:background">#color/primaryLightColor</item>
</style>
<style name="TextButton.Dialog1" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#color/white</item>
<item name="backgroundTint">#color/primaryDarkColor</item>
</style>

Lollipop v21, FragmentDialog doesn't take my activity theme

I have my activity theme as below set.
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:colorButtonNormal">#color/colorPrimary</item>
</style>
The activity have a simple FragmentDialog that is started using (Kotlin code)
MyDialogFragment().show(supportFragmentManager, MyDialogFragment.TAG)
The MyDialogFragment does have a Button. Hence I expect the color of the Button is colorPrimary as per the theme. However the color of the Button (on v21) is only grey)
This works on Marshmallow (i.e. v23) and not Lollipop (v21). I haven't tried v22. ... So I guess the v21 doesn't automatically inherit the theme from the activity.
For KitKat and below, this doesn't apply, as it doesn't use 'android:colorButtonNormal'
How should I get my FragmentDialog get the theme that I set on my activity?

I found a way to do it, which is to explicitly define my FragmentDialog theme as below, on top of defining my activity theme.
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:colorButtonNormal">#color/colorPrimary</item>
</style>
<style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:colorButtonNormal">#color/colorPrimary</item>
</style>
Then I need to explicitly set it from my FragmentDialog onCreate().
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(DialogFragment.STYLE_NO_TITLE, R.style.MyDialogTheme)
}
Note: It has to be in onCreate as mentioned in https://stackoverflow.com/a/26582301/3286489
I'm still open to more elegant answer if there's any out there.

AlertDialog styling - how to change style (color) of title, message, etc

I've breaking my head over this quite a bit. What I need to do is, change the style of all AlertDialogs in my android application - dialog background needs to be white-ish, and text needs to be black-ish. I tried creating a lot of styles, themes, and applying from the code, manifest, etc, but no success, with regard to the text colors inside the AlertDialog. Right now, I have the simplest of codes, set like this:
Manifest:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
styles.xml:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:alertDialogStyle">#style/DialogStyle</item>
</style>
<style name="DialogStyle" parent="#android:style/Theme.Dialog">
<!-- changing these background stuff works fine -->
<item name="android:bottomBright">#android:color/white</item>
<item name="android:bottomDark">#android:color/white</item>
<item name="android:bottomMedium">#drawable/dialog_footer_bg</item>
<item name="android:centerBright">#android:color/white</item>
<item name="android:centerDark">#drawable/dialog_body_bg</item>
<item name="android:centerMedium">#android:color/white</item>
<item name="android:fullBright">#color/orange</item>
<item name="android:fullDark">#color/orange</item>
<item name="android:topBright">#color/green</item>
<item name="android:topDark">#drawable/dialog_header_bg</item>
The items listed below don't work (please read the comments I've put above each element):
<!-- panelBackground is not getting set to null, there is something squarish around it -->
<item name="android:panelBackground">#null</item>
<!-- Setting this textColor doesn't seem to have any effect at all. Messages, title, button text color, whatever; nothing changes. -->
<item name="android:textColor">#000000</item>
<!-- Also tried with textAppearance, as follows. Didn't work -->
<item name="android:textAppearance">?android:attr/textColorPrimaryInverse</item>
<!-- Also tried changing textAppearancePrimary, to no avail -->
<item name="android:textColorPrimary">#000000</item>
<!-- Also need to change the dialog title text, tried it as follows, dint work: -->
<item name="android:windowTitleStyle">#style/DialogWindowTitle</item>
</style>
The DialogWindowTitle is defined as follows:
<style name="DialogWindowTitle">
<item name="android:textAppearance">?android:attr/textAppearanceMediumInverse</item>
</style>
So none of these is working. Can anyone tell me what I could be doing wrong, and how can I:
Change text color for messages (content text)
Change title text color
Remove the
panel background
Note: I need to support API 8 (2.2) upwards. Also, I've went through most of the related question here, and google groups, but can't figure out, though I have a feeling its right under my nose!
Edit: adding screenshot:

You need to define a Theme for your AlertDialog and reference it in your Activity's theme. The attribute is alertDialogTheme and not alertDialogStyle. Like this:
<style name="Theme.YourTheme" parent="#android:style/Theme.Holo">
...
<item name="android:alertDialogTheme">#style/YourAlertDialogTheme</item>
</style>
<style name="YourAlertDialogTheme">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="android:windowTitleStyle">...</item>
<item name="android:textAppearanceMedium">...</item>
<item name="android:borderlessButtonStyle">...</item>
<item name="android:buttonBarStyle">...</item>
</style>
You'll be able to change color and text appearance for the title, the message and you'll have some control on the background of each area. I wrote a blog post detailing the steps to style an AlertDialog.

Remove the panel background
<item name="android:windowBackground">#color/transparent_color</item>
<color name="transparent_color">#00000000</color>
This is Mystyle:
<style name="ThemeDialogCustom">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowBackground">#color/transparent_color</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:colorBackgroundCacheHint">#null</item>
</style>
Which i have added to the constructor.
Add textColor :
<item name="android:textColor">#ff0000</item>

Here's my Code to theme the alert dialog box:
<style name="alertDialog" parent="Theme.AppCompat.Dialog.Alert">
<item name="android:background">#color/light_button_text_color</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:textColorPrimary">#android:color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
<item name="android:titleTextColor" tools:targetApi="m">#android:color/black</item>
</style>
Place this code in styles.xml.
In your java apply this theme as:
AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.alertDialog);
Output of the code

You have to add the style to the constructor of the dialog
builder = new AlertDialog.Builder(this, R.style.DialogStyle);

I changed color programmatically in this way :
var builder = new AlertDialog.Builder (this);
...
...
...
var dialog = builder.Show ();
int textColorId = Resources.GetIdentifier ("alertTitle", "id", "android");
TextView textColor = dialog.FindViewById<TextView> (textColorId);
textColor?.SetTextColor (Color.DarkRed);
as alertTitle, you can change other data by this way (next example is for titleDivider):
int titleDividerId = Resources.GetIdentifier ("titleDivider", "id", "android");
View titleDivider = dialog.FindViewById (titleDividerId);
titleDivider?.SetBackgroundColor (Color.Red);
this is in C#, but in java it is the same.

It depends how much you want to customize the alert dialog. I have different steps in order to customize the alert dialog. Please visit: https://stackoverflow.com/a/33439849/5475941

Building on #general03's answer, you can use Android's built-in style to customize the dialog quickly. You can find the dialog themes under android.R.style.Theme_DeviceDefault_Dialogxxx.
For example:
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_Dialog_MinWidth);
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_Dialog_NoActionBar);
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_DialogWhenLarge);

Use this in your Style in your values-v21/style.xml
<style name="AlertDialogCustom" parent="#android:style/Theme.Material.Dialog.NoActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorAccent">#color/cbt_ui_primary_dark</item>
<item name="android:windowTitleStyle">#style/DialogWindowTitle.Sphinx</item>
<item name="android:textColorPrimary">#color/cbt_hints_color</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
And for pre lollipop devices put it in values/style.xml
<style name="AlertDialogCustom" parent="#android:style/Theme.Material.Dialog.NoActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorAccent">#color/cbt_ui_primary_dark</item>
<item name="android:windowTitleStyle">#style/DialogWindowTitle.Sphinx</item>
<item name="android:textColorPrimary">#color/cbt_hints_color</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
<style name="DialogWindowTitle.Sphinx" parent="#style/DialogWindowTitle_Holo">
<item name="android:textAppearance">#style/TextAppearance.Sphinx.DialogWindowTitle</item>
</style>
<style name="TextAppearance.Sphinx.DialogWindowTitle" parent="#android:style/TextAppearance.Holo.DialogWindowTitle">
<item name="android:textColor">#color/dark</item>
<!--<item name="android:fontFamily">sans-serif-condensed</item>-->
<item name="android:textStyle">bold</item>
</style>

Categories

Resources