How to Implement Date & Time Picker Dialogs in Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to a new jetpack compose tutorial in this video I will show you how you can Implement date and time picker dialogues in Jetpack compose you probably know these material dialogues from XML but in compose it's not natively supported yet um I'm assuming Google will come up with a solution in future to have material dialogues as well but right now we have to rely on a cool Library it's um yeah it basically comes with all the functionality we need and I will tell you how you can use that to implement such a dialog here in Jetpack compose and you can of course also style this as you like this is quite an ugly default design you will learn how you can also Implement some kind of date validation logic so you can see I can only select even dates and not the odd ones and after we selected a date let's say November 16th we click ok then it will actually apply that and print it here and the same I will show you for a Time dialog so here we can select the time between noon and what is it 8 pm here so let's pick a time and then you can see it also shows that here so as I said we will use a library for that and that's really not a problem um usually you should not Implement something like that on your own unless you really really rely on that custom design of your date picker dialogues but you can save so much time by just yeah making use of a library like this one here um so Props to the authors of that Library it's quite cool and quite easy to use and I've also added this core library to Sugar ring which is only needed if you target or if your minimum SDK is lower than 26 because then you need to add this line to also be able to use the local daytime API of java and you also need to set core Library this should be enable to true in your compile options if you have that we can jump into main activity and actually start building our simple UI with our two dialogues first of all we want to declare some states um these states will on the one hand reflect the currently selected date and time and on the other hand we want to have states that just format that time a little bit to display in our UI so we start by declaring a bar picked date by remember and we just set that to some kind of default date mutable state of local date not local data local date that now for example so just the current date we import get value and movable state of import again and then we can do the same for picking a time so of our picked Time by remember mutable stayed off and here we choose some kind of default time you can also choose anytime basically for example noon here and now we want to have two other states which um just get recalculated or re yeah recreate it every time one of these states actually changes so whenever the pick date State changes so whenever we pick a date we want to yeah just recalculate the formatting of that picked date so what we can do is we can say Val format the date by remember and in here we say it arrive State off because that state is derived of another state which is our pick date state so we say pick date um actually let's do date time Formula First dot off pattern and the pattern we want to form it here is let's say we have three letters for the month then two letters for the day and four letters for the year and then we can say that format I'm going to format our picked date we can then copy this and paste it for our time so form at a time and then here we just change the format which will be hours and minutes and we also Swap this out with picked time cool so now we have all of our States but we of course need to assign them after we picked a time and a date so how do we do that we first of all want to go down and create a column with our buttons which will then trigger our material dialogues so we say modifier modifier fill Max size like this and let's also make sure to add some horizontal alignment of Center horizontally and vertical alignment our arrangement of Center as well just to Center these buttons and texts and we can then add a button when we click it we want to open our date dialog and the text will be pick date we then add a text below that which will show our format date so we can say formatted date here you can then add a little bit of spacing for our time dialog 16dp import DP Alt Enter copy this stuff paste it below and rename this to pick time and this one here to format a Time cool so when we click these buttons what should happen well then we of course want to show our dialogues and the way this works with this Library we added is with so-called material dialog States so we can say when the one hand have a date dialog state which is equal to remember material dialog state and with the same forward time dialog state remember material dialog State and these states can now be used to Simply show the dialog so when we click this button here to pick a date we say data dialog state that show and the same will happen when we click the other button then we say date time dialog state that show cool but now we haven't specified anything about the dialogues so right now nothing would really show because we haven't specified the composables for our actual dialogues how do we do that we do that below our column that does not need to be inside any other composable right here we can say we have a material dialog and here we now need to set up quite a bit of stuff most importantly the dialog state so we'll link our state to this composable so that the library knows when we call show on our state that we also show this dialog so we pass our data log State here we can then um yeah we could configure some dialog properties for example if we want to dismiss this dialog on back press which is true by default usually what you want you can dismiss on click outside so if you click somewhere outside the dialog should it hide the dialog usually also what you want and some kind of secure policy I'm not sure what that is but we can simply leave this away here and then you can also style this here as you want so you could assign a background color you could assign another shape if you want that even a border so there is some customization options here you can add some elevation Auto dismiss which is true by default so if you click on one of its buttons it will always dismiss the dialog usually also what you want on close request might be be interesting so this will be called when the dialog is requested to be closed so when the user clicks outside when the user clicks cancel so in any of these scenarios this would simply fire so if you want to do something in that case use this Lambda and what else buttons that's important because we want to add some buttons to our dialog um let's leave that and these buttons we can actually create here so usually we have some kind of positive and a negative button for our dialogues so we can say positive button which would be something like okay or yes and we can add some text which would simply be okay so we pick the date after that we can specify some um yeah and on click listener when we click that it will already automatically dismiss the dialog so you don't need to do that in the on clicklist now that's only needed if you want to do some some extra thing for example showing a toaster so let's do that here toes make text use our application context and say clicked OK or so toast length along that show and then below that we can also add a negative button for which the text would simply be cancel for example you also have the option to add another button which would be the neutral button so if you want to have a third one maybe something like remind me later or so or you have the option for an accessibility button which consists of an icon yeah then you just have an additional icon button so quite cool what the library offers here we only need these two positive and negative buttons and then inside of this block we can now Define the type of dialogue we actually have because right now we just specify that we have a material dialog and this Library offers a lot of material dialogues not only date and time and here we can then say if we take a look here we have a lot so we could put a custom view in that dialog that just allows us to easily Define we have custom dialogues but that already works with compose out of the box quite easily um we can have a list of items multiple choice list multiple items with a single choice just a title or we have date and time picker that is what we're interested in here so we make that a date picker and in here we can set the initial date of our date picker so what the Yeah the initially select the date will be let's just say local data now the title we could choose pick a date for example what else you could choose the colors which is like date picker colors or date pick up defaults it is dot colors and in here you could specify a bunch of colors for all the different UI components of that dialog I won't change that here just that you know how you could change it and what's cool is this allow date validator what I showed you so in here you actually get a local date and you need to return a Boolean whether you want that date to be selectable or not that is what I showed you so if for example the day of month is modulo 2 is 0 then you could only select even dates if that's one you could only select odd days and yeah so if you have a certain logic behind that when a date should be selectable for example if you don't want weekends you could also specify that here so then weekends would not be selectable um yeah let's just leave that logic here just you see that it works and one thing that's missing now is when a user selected a date how do we get the date they selected because we of course want to update our pick date State here and we get that here in the date picker in a block right afterwards here we get it so a local date and then we can say pick date is equal to it and that's it for our date picker dialog we can now copy this because the time picker dialog is very similar paste it below swap that out with time dialog State and the buttons can stay the same and just here I want to make sure that we have a Time picker of course we don't have an initial date now we also don't have an initial time I think do we have yeah we do have an initial time so we could say um local time Dot noon for example we can say pick a time we don't have a date validator of course but we have something similar which is called time range and here we are here we can pass the time range that is selectable for example from local time Dot midnight till local time dot noon so then only the hours zero to 12 will be selectable because that's our range and here we then get our reference to the local time that we selected so here we can update picture time to it and that should be everything we need to do to implement these two dialogues for our UI if we launch this on my device take a look here and wait until the app is opened and then we fully see that we can select some dates and times here there we go we have our UI here so if we click pick date then our date picker dialog will show you can see now we can only select all dates as I said and yeah let's pick this one click OK there we go we get the message clicked OK and the date was properly adjusted here and we can also select a time we can select Am Pm you can also change that if you want the 24 hour format and what is selectable here um I'm not sure why nothing is selectable okay because I need to select am here I'm not used to this this way of specifying time in Europe um so let's pick 8 AM for example and there we go here's our 8 AM we clicked OK again so I hope you enjoyed this video and this helped you to actually Implement your date and time Pickers in Jetpack compose if so then you will definitely also love my more advanced Android courses which you can find down in this video's description where I can just go much more into detail into building whole projects about important topics you need in the industry so definitely do check these out you will love them apart from that thanks for watching this video I wish you an amazing rest of the week and I'll see you back in the next one bye bye foreign

Channel: Philipp Lackner

Views: 23,169

Keywords: philip, lackener, phillip, compose, jetpack, date, picker, dialog, library, android, android studio, electric eel, easy, simple, color, change, design

Id: BhyavkT2UO4

Length: 13min 34sec (814 seconds)

Published: Mon Nov 14 2022