Simple Todo App | Jetpack Compose 🚀 | Android Tutorial

what is going on guys in this video we are going to create our first fully functionable jetpack compos application from scratch it will be a simple to-do application but we will learn a lot of things from this single video we will learn how to create beautiful UI in Jetpack compos how to add Todo items by taking input from the user how to display all those items in the UI we will also add delete functionality also we will use view model and live data to reflect the change immediately in the UI so it will be awesome project so let's get started with new Android Studio project click on new project select empty activity that is Jetpack compos Activity Click on next let's give the application name as to-do app minimum SDK select 8.0 build configuration language Let It Be recommended one click on finish so our project is created let's run the app and test either it is created correctly or not we can see hello Android that means it is created correctly now let's get back here we will say hello to this greeting and we will delete it and here also we'll delete this greeting surface and theme let it be there so here we will create one composable first let's go and create one file let's call it to-do list page and select file so here we will create composable so to create composable you have to create a function let's say too list page and we'll mark it as composable you can also create with shortcut comp if you enter it will create composable for you so this is our composable we'll go to main activity and give that composable over here to-do list page now if I run there will be nothing because we have not written anything let me arrange side by side so before creating design I will create a data class so let's create a data class for the to-do items select data class over here and let's say to-do and here we will write some variable so first let's say ID it as int second variable will be title which will be string and third thing will be created time so create at let's say and we'll give the type date so our to-do data class is ready let's create some fake todos so that we can use them in the UI so for that let's say function get fake to-do here we'll return list of to-do and here we'll create some fake too let's give the return type list of to-do let's create first one too let's give ID as one title as first too and create it at will be date. from instant. now so it will take the current time similar way we will create some more let's say four items we will create let's give ID 2 3 and four second this is my third this will be my fourth too so that I can use it in UI so these are the fake todos you will use to display in the UI so here what we will do first thing we'll get all those todos so value to-do list equals to get fake to-do so we have the to-do list if you write over here text too list. TW string and run it you can see we have four items that are being displayed so we have the data in this too list now we have to make the design so first thing I will do is I will create a column and pass some modifier so modifier modifier. fil Max height let's take full height and G padding around a DP so it will be the parent column and inside this column what we will do we will use lazy columns so lazy column is like recycler view we used to do in XML based layout if you want to learn everything about lazy column I have dedicated video you can watch from the link in the description so here we will use lazy column content will be we can pass items or items index so I will use items index here we have to pass the list so we will pass to-do list and here we'll get the scope that is leg item scope here we have to here if you write I we'll get the index and item click on it we have got the individual item from the list so we can sew in the UI let's SE it in text for now item do TW string let's run you can see now we have four individual items this is the first one second one third one and fourth one now we can design this individual item like anything let's extract it in another composable so I will create one composable that will be to-do item so here we can write text and we need item from here so item that is to-do item from here we can call this Todo item if you run it will do same thing now here we can design our item so let's remove this text and design here what we will use we will use a row and in a row we will use column first to display title and created ad and we will have delete icon so first I'll create a column where we will have text text will be item do created at do to string another item will be text item. tile now if I run we can see the time and our title we can format this date this is full date so we can format it with let's cut it out we can use Simple dat format here let's pass pattern let's say our hour minute minute and we'll give AM PM and day and month you can give year also so let's give local do English and do format which will be our date so item do created at we'll pass the date it will format in this pattern if I run now you can see we have time and the text let's Design This and add some background so for the row I will use modifier so modifier equals to modifier do fill Max width first it will take the full width let's add padding about 8 DP let's give background from Material theme. color scheme. primary color let's run it you can see we have background let's add padding after adding background as well so 16 DP now it will be like this let's make it rounded corner so that it will look more beautiful so before adding background we can do clip rounded Corner shape and we'll pass 32 DP radius let's add 16 DP now it's looking better let's style this text as well so first text I will style let's give font size as 10. SP import it and color let's give color do light gray for the time and same for this title we give font size as 20 SP and color will be white if I run now now it is looking much better you can make it tosp for the created time now it is looking good let's add a delete Button as well here so we have our Row in that row we have this column so after column we will add a delete icon so for this I'll first go to drawable and create an icon so new Vector asset clipart let's search for delete you can use any of this I will use this one and I will click on finish so we have the delete icon over here Baseline delete 24 now we can use that so in a row we have a column and after this column I will use icon so icon button I will use icon so delete will act as a button so I will use icon button we have onclick method we don't have to do anything as of now and in the scope we can pass icon painter resource will be r. drawable do delete one and description you can give delete if I run now you can see this delete icon over here I will also make it white so tint color. white I'll give the weight to this column so that it will take full size so for this column I will use modifier modifier do weight one point if I run now you can see we have the icon and it is clickable let's Center it vertically also so in a row we can use vertical alignment alignment do Center vertically now we have our UI design ready for the to-do items so we have to-do items now we'll add the functionality so how We'll add first I will take a text field over here and a button to add the to-do so for that I will go to this design where I have this lazy column inside main column Above This lazy column I will add a row so here we will have outline text field where value we need value and on value change so for that I'll create variable let's say input text by remember mutable state of let's give empty value we have to import this if you want to learn about state in Jetpack compos I have already uploaded a video you can check that out here we'll use this input text in this text field so value will be input text on value change input text equals to it so in this way we can take the input from the user in this input text and I will add a button which will take on click and text will be add that's it if I run now so you can see I have input text field and I have this add button so let's give a style to this row so for this row what I will do I will add modifier modifier do fill Max width also so give padding about 8 DP and I will give horizontal Arrangement Arrangement do space evenly if I run now now it is looking good I can type something and I can add over here now we need to add the functionality first functionality will be button on click so that we can add the item second functionality will be delete button on click so here we have icon button on delete so for adding the functionality we'll use view model so let's create a view model let's call it as to-do view model and we'll extend it from view model class here we'll create the list and functions so first thing what I will do is I will create a private where let's give underscore we not expose it equals to mutable live data of type list of to-do so here we'll create mutable live data and we'll expose it as live data so value here to-do list which will be of type live data list of to-do and we'll get to-do list so in this way we'll make it private so that we can modify it from view model only and we'll expose this live data to the UI now we will create some functions so function let's say get all to-do another function will be add to-do another function will be delete to-do so get all to-do return type will be list of to-do so this function we will call from UI this function will internally call either API either the database either in memory so for this video we'll be storing it in inmemory so let's create a manager for that let's create a singl turn class it will be of object type let's call it as to-do manager here we will create in memory variable so private value to-do list let's say equals to mutable list of too that's it we created a variable we will have same function so I will copy it from here and paste it and we will implement this functionality over here so in get all too we'll just return to-do list in add to-do we will take the title as string and in delete to-do we will take ID as integer so we'll add this to this list so for that to-do list. add same way we are doing over here here we will do the real one so to-do ID will be let's get unique ID from system. Curren time Mist do2 int it will be unique ID every time title we'll get from parameter and date we will say date do from instant do now in this way we will add new to-do item to this to-do list so whenever we are deleting we will do to-do list. remove if so we'll check it. ID equals to equals to ID so in this way we have added the functionality it will return all to-do list from here first it will be empty if you add the item it will add over here if you delete it will delete from here we will get all this data in view model so here in view model we here we'll assign it to this mutable life data so to-do list do value equals to to-do manager dot get all Todo we don't require to return over here here we need a string title and we can do to-do manager do add too and pass the title same way here ID it will be int to-do manager. delete ID so once we add the data we should call this get all to do so that latest data will be reflected for this delete as well we will do this now we can use this in the UI so how we can use in the UI let's go to our to-do list page here in the parameter we'll take view model we'll take it from Main activity and instead of this get fake to-do what we will do view model do too list do observe as state we don't have observe as state so we have to add the dependency so let's go to Google and search for compose runtime dependency you can check this Android developers page we have dependencies let's select cotlin and copy this live data dependency this is is the version I will copy this go to build at gradel that is appable and in the dependencies let's paste it click on sync now now if you close this and WR here observe you can see we have this observe as state so it will observe as state so you can see over here we have to use buy instead of equal to so to-do list by view model. too list. observe as state in this way we'll get the to-do list as straight if you see we have got error over here so what is the error here you can see we have the type of list and we are getting the list but it is nullable so it can be null so we can't use the nullable value to lzy column so what we can do we can do a safe call so here what I will do to-do list do let so that it will be safe and cut this lazy column and paste it inside save call so here we can do it now that means if it is not null then only it will show the lazy column so if I run now we have the error that means we need view model in the main activity we have to pass the view model so how we can get that we can get it as a variable so to-do view model equals to view model provider we have to pass owner and let's pass the too view model class. Java so in this way this provider will give the view model so we can use it anywhere here we'll pass in this page now we have got the view model if we run app now you can see we don't have any items because list is empty and it is null what we can do we can show a text over here if it is null so in this l call we can do if it is null we can write no items yet now run here we can see let's add modifier so that it will come in Center modifier. filmax width and also text align text align do Center and font size let's say 16 SP so no item H now we have to add the functionality to this add button so how we can do that you can see see over here we have button and we have onclick so here we can do view model since we have view model over here view model dot add too and what will be the title title will be input text that we write over here so input text now once we add the to-do we will just set it to empty so that it will clear out if I run now let's add our first item you can see it is added let's add second to-do it is being added third one we have created time as well we have the title we have delete button one thing you can notice latest one is coming at last because it is a list so what we can do in view model when we get all the todos we can reverse it with reversed so that the latest one will come at top so let's say first second so you can see latest is at top now let's add functional default delete button so how we can do that if you go to our to-do list page in the to-do item we have this icon button that will delete so from this icon button how we can call the method of view model since we don't have view model over here in this composable this is independent composable we have view model over here in this composable but here we don't have so how we can access that either you can pass it from parameter like this over here view model as view model and you can get it from here and you can use it over here but instead of that better way is we can pass the entire function so here what we will do we will create one function on delete which will not take anything which will not return anything anything that will be unit so this on delete will be called whenever this will be clicked so in on click I will remove this brackets and just call on delete so we'll assign the onclick function as a on delete so this we can pass from here from to-do item here we have the access to view model so on delete what we will do view model do delete too and ID will be item. ID in this way it should work let's run now let's add first second let's add third one as well now if I delete this you can see it is deleted if I delete third it is deleted if I add some more I can delete any of them so this is working you can add as many as possible you can see we can scroll it as well and we can delete this so this is working but if we restart the application all will be gone because we are restoring it in in memory so in next video what we will do we will store it in persistent memory that will be database so we will use room database to store all the Todo list over there so we'll get the list from the database We'll add too to the database we'll delete this from the database so we'll add those functionalities if you enjoyed this video please hit the like button if you have any doubts and queries please comment below I will reply for you don't forget to hit the Subscribe button before going see you in the next video [Music] bye-bye [Music]

Channel: Easy Tuto

Views: 6,063

Keywords: easy tuto, android, development, beginners, android studio, jetpack, jetpack compose, compose app, lazy, todo, todo app, first app, todo jetpack, todo android, simple todo app, simple todo android, simple todo android jetpack, simple todo compose app, compose todo app, todo application in android

Id: P3xQdINdrWY

Length: 18min 8sec (1088 seconds)

Published: Fri Apr 05 2024