Implement Material 3 Date/Time Pickers with Jetpack Compose! - Android Studio Tutorial

foreign welcome back to my new videos so in this video I am going to show you how to implement material 3 date and time Pickers in your application using a jetpack compose so let me show you how those Pickers actually look like so here we have a date picker as you can see it looks very nice we can select here either a single or a multiple different days we can choose a month we can choose a year so it's up to us and here we have of course A Time picker as well so it looks also quite beautiful it is adapted to a support material three design system so it also supports both the light and the Dark theme so let me show you how all that actually look like on a dark theme as well there we go so it's quite beautiful and without further Ado let's get started and let me show you how you can Implement those Pickers in your application okay so here I'm going to show you the actual library that we're going to use for that purpose and that library is called the sheets compose dialogues by Max Kepler so this is one of the a best Library I have found so far as you can see this is not just a date and time picker Library this is a dialogue library that offers a couple of different styles and types of dialogues for your projects so this is the third party library and this is not the official source for uh date and time Pickers for Jetpack compose I'm sure that the Android team will release the official uh composable functions for this purpose but until then we can use this um this Library without a problem so I have already tested and everything works perfectly fine those are Pickers supports both a dark and the live theme as you have seen and also it looks quite beautiful so if you scroll down below you're going to find here a link to the documentation of this library and you're going to find also here a setup section where you can see what kind of a dependency you need for for this Library the first dependency is a core dependency and after that you can Implement either one of those modules are separate modules for each and every dialog that this Library actually supports in this case I have chose a calendar and a clock dialog for this demonstration purposes now let's open up our Android Studio project as you can see here I have added that the material 3 calendar and the clock modules but also this core as well now this is my actual screen so I have only two buttons a date picker and time picker so first let's start implementing the actual a date picker right or a calendar picker so the first thing which I want to do here I want to create a calendar a state and I'm going to call here remember a sheet state so this is a sheet state will be used to actually trigger our dialog and then below that I can just call this calendar dialog composable function so here we can pass our calendar state and as a selection we can call a calendar selection dot so here we have a two different options we have a date and the dates so of course this first one will return just a single date and it will allow us to select only a single date inside our calendar and this second one will allow us to select multiple different dates in our date picker so in this case I'm going to choose this a single one so only a date there you go and we also have here this warning saying that we need to add the experimental three uh material 3 API let's just move those arguments on a separate line there we go and here we can just write a date and we can log a simple message select the date and there you go now let's run this application so we can see uh how will this actually work let me just here also actually um call this a calendar state to actually trigger this date picker so a calendar state.show this estate also has a couple of different properties and functions to show up as well so we have a show function hide invoker reset it will basically reset the current state data we also have some properties like on dismiss request on finished requests visible reset finish and so on and so on let's just call here a show function to open up our actual calendar dialog for now so let's just open that up there you go and this is how it looks like so it's uh quite beautiful and of course it is designed to support material 3 design system here we also have an option to select the actual uh models and the actual year however uh in order to enable those selections we need to adhere one more parameter to set up the configuration of this calendar dialog anyhow here as you can see for now we can select only one update in this calendar but if we specify here um dates instead of the date then we will be able to select multiple different updates as well now let's say here configure this calendar dialog so specify the config parameter and here call just a calendar config right so this calendar config accepts multiple different parameters for now I'm going to specify here a month selection equal to true so that we can actually select the month by ourselves and the year selection to true now after we Now launch our application then we should be able to select by ourselves the month and the year of this uh calendar picker right so now we have this arrow and from there we can select each and every month that we want also about the year so as you can see we can select each and every year we actually need and there we go so it works like a charm here we also have a couple of different uh customization options like uh the style of this um calendar dialog so we can call a calendar style dot a week or a DOT month so uh the month is the default style of this calendar however if I here specify a week and then let's see how our calendar will look like now let's open it up and there you go so now we have a different kind of a style for our calendar so this is a weak style and also one important thing here to note is that we can specify uh what kind of dates or uh days actually we want to disable in this calendar let me just um add here one more parameter and that will be a disabled disabled dates and here we can just specify a list of updates that we want to disable right so for example here I can specify a list of and I can specify maybe a local date dot now plus 7 for example so I'm going to disable here a day which will be a seven days after the current day so let's run this example so I can show you open that up and now as you can see the current date is actually uh the 4th January 2023 and a disabled date I will be a January 11th as you can see now I cannot select that date because that date is not selectable anymore it is disabled we can only select other different dates that are actually not disabled so that's pretty much it about this calendar dialog so it is quite easy to implement that in your project now let me show you how to implement this time picker or a clock picker so let's here create one more variable a name the clock State let's hear also call that the same remember sheet State composable function and down below let's call a clock dialog let's pass the clock State here first for the selection it's a call here um clock selection DOT hours minutes or we also have hours minutes and seconds in this case they only need the hours and minutes so let's hear a write our Lambda so uh hours and minutes there we go let's move those arguments on a separate line we can also log here uh the actual add data or hours and minutes so we can just write hours um column minutes and of course let's call this a clock State and show that dialog whenever we click our second time picker button so clockstate.show let's now run these example so we can check that out and let's choose the time picker now okay so as you can see this is how this clock or a Time picker will look like so here we have to choose uh the actual hour and then minutes so we can here type for example zero uh six then uh maybe uh one two we can choose here am or a PM so it's up to you there is also a 24 hour format as well so let's for example here select this side at this time so if I press ok then that the time should be now inside our log head so let's open it up as you can see um this is the actual format that I'm seeing at the moment but you can specify that explicitly so let's just uh open this clock dialog let's call here a config parameter and specify a clock config and let's specify now its parameters so let's hear call is 24 hour format a false and let's now run this example okay so now as you can see I can select for example zero six again one two click OK and now we are seeing uh a six and not 18 okay any and here if I set for example a true explicitly uh then we are going to see that the 24 hour format instead and our time picker here or a clock picker will not have those am or a PM options as well and there you go so that's basically how you can easily Implement a date and time picker in your application so those are only two different figures or dialogues that you can use from this Library there are also more different options that you can Implement within your project and you can check them all on this actual uh GitHub repository I'll be sure to leave the link down in the video description so nowhere is there and basically that will be all so uh comment down below and let me know what you think about this useful library for material three uh Pickers or dialogues and of course don't forget to like this video but only if you find it helpful for this video that will be all [Music]

Channel: Stevdza-San

Views: 19,370

Keywords: jetpack, compose, android, development, android studio, kotlin, app, how to, guide, tutorial, implement, show, display, material 3, dialog, picker, pickers, dialogs, easily, date, time, choose, overlay, composable

Id: uAw87DdUnxg

Length: 10min 22sec (622 seconds)

Published: Wed Jan 04 2023