Project#1 Android Shopping List in Java using MVVM, Room(CRUD), RecyclerView, LiveData | 2021

hey guys welcome back to my channel in today's video i'm going to implement a shopping list project in java so we are going to implement the shopping list i am getting the request to implement some project so that's what the reason i'm doing this so let's begin with adding the dependencies in our project so first of all i'm adding a dependency for our recycler view as we are going to use the recycler view in it we are going to we are not going to use any api we are just going to use room database also we are going to use the mvvm so i am adding the dependency for viewmodel now i am adding the dependencies for our card view this is the new thing we are going to implement in our recycler view and as i said we are going to use the room database so i am adding the dependencies for that apply an okay now i am creating a separate package as we do it in our real time projects so i'm creating a separate package for database and another separate package for our view model inside the database let's implement our database so i'm adding a class that is gonna be the app database where we are going to create our database i already made a video on that so you can use that as well but i'm going to show you each step for that so inside our database annotation we need entities and inside entity we need to define our entity class also we need to give the version number for our database i'm giving it a 1 because it's the first time and use the abstract keyword and here we are going to use the category in our shopping list so category inside the category user can define the item so let me create that class as well that is simple model class then we'll define it as an entity now i'm creating a singleton instance for our database and a static function which is going to return of the instance of our app database class and this function is going to take a context as an input and now we'll simply check if it is null then we'll initialize our instance variable else it will return it as it is and now we'll initialize our instance variable so that is room.database builder inside it we need to pass the context or class name and the name of our database so you can give any name and i'm using allowing main thread queries also to the caller at the end build that's it for our database class now let's go to category entity and implement this class so this is simple entity we need to define parameters so first parameter we need the uid that is a primary key for or category class or we can say category table and i'm setting it to auto generate to true another parameter is the that is actually the column and i'm giving it as a string type and we can give it as a category name and we need to define it as a column info and we can give any name which is going to be the same name in the table that's the column name that's all for our category entity now i'm creating another class for our items so each category has certain items like grocery inside grocery you can have certain items when you go for a shopping so this is for that so this is the second table name as the items so inside that we need some columns so and first column we need the uid that is again going to be the primary key for that table and second column we need the item name another parameter we need as a category id so that we can map our category id with the category table that is going to be the n type and another column name we need as a completed so when we buy it we need to mark it as a completed so this is going to be the boolean type yeah that's all for our items table so when we implement our database so inside that we need to define our item entity as well now inside the data room database we need another class actually the interface that is the dow so i am giving it as a name shopping list of and we need to define it with the annotation draw and here we will make our all the queries will write all the queries inside this interface so first function inside this tab we need a catal category list and that query is going to be the select start from category so this function will return us all the items inside our category table so that's that means it is going to be the list list of category type now since we have a query now we need a insert so that we can insert into the category table so i am defining a function insert category it's going to take the object of category after insert we need update function as well so if we need to rename a category we are going to use it for the renaming the category so let me define it and last function for category table is the delete so user can delete any category at any time so we are going to implement that functionality as well so i am defining that function also similar functions we need to define for the items table so it's going to be the query so select star from items but it need a fair query as well so pair category id is equal to the category so all the category id wherever it's matching it need to return the list of items so i'll show you how you can define a parametric function inside the tab this category id will come from any view model and this category id we can pass it with the colon and the id and now similarly similar to the category we need insert update and delete function so let me define for the items similar to the delete function in category it is gonna work for the items all the functions are taking input as the items object yeah so tau is also ready now so now i'm creating a another activity which is going to be your splash screen so you have seen most of the project have the splash screen so i'm going to show you how you can make a splash screen in your project that is going to be displayed for the two seconds so i'll leave an application launch so for that i need an image so i'm using this material icons that is free so we can get any icon from here so i'm choosing one [Music] and let me get this one so it's downloaded now and this is how go to file new vector image and here you can browse your file then you can rename it and give it any size if you want to change so i'm giving it as a 300 dp next and finish now let's go and implement the layout of our splash screen i'm simply adding an image you can design according to you i am setting the image on the center of the screen and then passing the image to this image view what we imported just now now go to splash screen activity and then we'll implement it so how you can navigate to the another screen after two seconds so here we are going to use the handler but before that i am just hiding the action bar because we don't need it it's going to be the full screen so here we can use the new handler pause delete it's the function name of the handler and we'll pass the interval in the milliseconds so 2000 millisecond is equal to two seconds and once that timer will implement at that time we'll call we'll start an another activity so our activity is gonna be the main activity after a splash and we'll close this is splash so that's it or splash activity is also ready now let's go and implement our main activity so we'll start with the layout so basically main activity is going to be our category which is going to display the category list of inside the recycler view so i am simply adding one recycler view in or in the top of the activity and on the bottom of activity i am going to add an image from there we can add categories so that we can insert categories inside the category table so i'm going to keep it on the bottom right corner and we need another image so let me find one okay this looks better to me you can use any images similarly we need to import that into our project and now i am using it and another textview we need like whenever we don't have any category inside our table so like the case where we don't have anything at the launch of the application like very beginning of the [Music] application launch so at that time we can show you don't have any list and user will inform like you don't have any list and click on add button and add some category so layout is ready for main activity now let's implement our main activity or we can say implement our category list first of all we need to set the title we can give any name i am giving it as a project name shopping list and now we need to handle the image which is going to add a new category now i am handling its click so on click of this button i'm planning to show a dialog where we can have one input added text and two buttons so let me write the code for showing a dialog so it's going to be a simple alert dialogue so now we need a layout for our dialogue as well so let's create that so this layout is for our add category dialog only you you i'm adding and one edit text to get the input from the user on the dialog itself you our layout is ready for the dialog let's go back to our main activity and pass the name of our layout class you now we need to handle the create button and cancel button click on a cancel we'll simply close the dialog it's not finding it and copy the wrong thing should be the builder and dismiss similarly we need a click handling for the create button textview and where we will call our insert function so let's let's check the what user has entered in our input edit text and i am adding a null check as well what user has entered so that user is not able to enter the empty or null inside our database so i'm adding the null check or empty check if user did not enter anything then it will show up those two and ask them to enter it enter the category name here we need to call the uh insert function of viewmodel so we are going to use the viewmodel as well so in that case we need to create a viewmodel first but before that we'll complete this complete the code for this dialog so let's set the view on our dialog builder set view and call the dialog view and at the end dialog builder dot show so once that function is called then dialog will pop up so we'll come back to this function once our viewmodel will be ready now inside our view model package i am creating a class then we'll create a view model for that i'm giving it as a name main activity view model and now we are going to implement it so i am using a android view model because we need a context application contacts to call our database so that's the reason i'm using androidview model instead of just viewmodel and this is our live data and inside our constructor we'll initialize it and inside our view model we need to access our database app database so i am declaring it as a variable and inside our constructor i am initializing it as well now i am creating a separate function for our category list observer let us simply return this live data and now this function is going to retrieve category list from the database so i'm giving it as a name call all category list and inside this we'll simply call our dao so database dot we i think we did not define our draw inside our database so let's define it first it's going to be the another public abstract or dao and define a function now we'll call this there you are and dot get all category list which is already defined in our tab and that's going to return the list of category and in case of category list is null we'll check the size of it it is greater than zero then we'll send the category list if it is not greater than zero then we'll simply send it to null value so that we can show if it is null in our activity so that we can show no results message to the user similarly we need to implement a insert function this function i was talking about which we need to call from the dialog so i am creating a category insurance inside the category we just simply need to set the category name which user entered on the dialog and then we'll call similar way app database dot dow dot insert and pass over category object and then we'll call the load all category so that instantly it will reflect on our recycler view similarly we need to call update function in case of update we'll simply get the category object from the activity or the user and with update we define the delete function as well so we should have the delete category function as well and in all cases we need to immediately reflect on our recycler view so i am immediately calling the get category list function and here we need to initialize our view model so i'm creating a separate function for initializing the viewmodel here we are going to use the view model provider so viewmodel providers is deprecated so don't use that use view model provider and now we will call our observer get category list observer function and observe that live data here so as we said if that in our view model we set it to the null so in case if there is no data then we'll receive null so i'm putting a null check here in case if it is null then we will simply show the message to user if it is not known then we will set that list to the recycler view so we will check what do we have did we give any id to this textview no so let me give the id to that text here you since message is already set to that text field so we'll simply set the visibility of this text here in case we have data then we'll send it to gone now we need to initialize our recycler view you and now it's time to create another adapter for our recycler view so let's create our adapter for our recyclerview so i'm giving it as a name the category recyclerview category recycler adapter you so here we need to inflate our layout and we need to create our layout now so that is going to be the recycler view row how it gonna look like and i am going to use the constraint layout only and as i said like we are going to use the card view so i am adding a card view inside that i am going to add the views now i am adding another constraint layout inside the card view so that we can align our icons and the text view i am simply adding one text view now adding one image view one is to remove category and another image view i am going to add for added the category we need the icon for that so for delete i'm going to use this icon let me get that and for edit i need another icon so i can use this one or maybe so this look better to me so i'm going to use this icon for edit trend item let me import it into the project so both icons are important i am going to use those here inside the image view and another image view is for edit then i'll change the icon as well so layout is ready now for our raw i will go back to our adapter and use that layout here inside on create view function now we need to extract our text view and the image views what we have inside our layout now inside the own bind viewholder function we need to set the data to our textview so we'll set the category name and for the images we need to handle their click so i'm handling those click listener now on click if we handle the on click then we need to handle the item click as well so on the item click on the row click we'll call a new activity to display the item inside the category now i am creating an interface for hand over click and i am defining few functions inside it so one function is for item click another function is for remove category and another function is for edit category now we need to handle their click or we need to set our adapter inside our main activity and in on init view model observer will set the data what we received from the view model in case there is no data so recycler view visibility we need to set to gone as we set the no result text view visibility to visible and similarly when we have data then we need to reset it to the visible another thing we need to handle the click as well so now i am implementing that interface will all write its function all three functions so this function will call when we will tap on our item we'll add it or we'll try to delete and we'll simply get the click listener inside our constructor of our adapter and now we'll call our click listener interface functions and we'll pass the object category object and calling according to the edit button edit image click and remove category image click the function is calling accordingly so our adapter is ready now let's go back to our activity and handle these functions here so we already have these functions in our view model so we just simply need to call viewmodel functions so in case of edit we need to call that show category list dialog uh one more time so that your user can add it in that text to yourself so i'm reusing it but i need to differentiate like in case of add the same function is getting called or add it also so i'm differentiating it with the based on one boolean so if this boolean is true then we'll call it for edit if it is false then we'll call it the add function of our viewmodel and now we need a object of category object so let me define it so this is going to be initialized inside this added category function and now our dialog will open and then we'll set the new name whatever user has entered and then we'll call edit function of our viewmodel and we'll pass the same object and in case if it is added then let's change the let's set the text whatever we received from the database or we'll set the button name as update instead of create we'll set the category name and then user can edit it and then save it or we can say update it let's run our application and see so i'm missing something let's go and see okay so inside our gradle file we need to change this so it should be a notation processor for compiler room compiler now run and see so we are successfully able to run it and let me click on add button so you see the dialog now i am giving it as any name let me see the crate okay so that's great we are able to see that category it's working absolutely fine i'm seeing some small ui like it's doesn't have any padding from left so let me add that margin also the that image edit image doesn't have any margin on bottom so let me add that padding yep first everything looks good one click of it it's calling edit and up you can see the update button name that's great and then update is also working let's try to delete okay so delete is also working and we can see if there is no data then it's showing us the no result or you don't have message you don't have any category list message we are able to see successfully that's really great now we we did not see the splash screen so that is basically we don't wouldn't make the splash screen as the launcher let me make the splash screen as launcher then we'll be able to see the splash screen than our main activity let's run it again and see there you go so this is our splash screen you are not seeing no result let me remove this visibility [Music] then run and see okay now you can see that let me add one more time one category electronics and create now it look better we have proper margin let me try and edit the rigger now inside this category will add certain items and we'll see another list of items inside it so let's do it by adding a empty activity and you can give any name so now we need to design its layout so it's gonna be almost same but there will be some certain difference so first we need a recycler view on top of all i need i added text that is going to like user can add certain items through that then i am going to put it on the bottom of the screen you now i'm adding in maze view basically when user will enter so after clicking on that image that is the icon the data will store that item will store in the database for that so that image or icon will be at the end of the added text now you need the icon for that so let me find out one i think this will better you can use any icons if you have anything and i am adding another text to you for the no result so i'm just copy and paste it from the main activity so this is gonna be behave same as if you don't have any item then it will so it will be visible and show a appropriate error message to the user now on item click we'll call that activity so let me start that activity from this main activity and we need to pass the category id and category name so that user can add to the appropriate category id only so just to make the relationship inside the database we need to pass a category id as well category name i am passing to just to display it on a title bar so we are reading with the same key the category id and the category name as well so make sure to pass the same key what we passed on the previous screen and now we will set the title name on the supported action bar note set title and then we will simply pass this category name here so that it will display on the top and i am making the back button enabled here so that you can see the back button on top left corner now i'm extracting all the viewers will handle that send button save button click will make a small validation like user should be able to enter at least some character inside the edit text if not then we'll show a small test this is the separate function i'm calling when we need to save a item this function is for initializing the view recycler view now we need a adapter as we did for the category so let me copy and paste the same adapter and we'll modify it according to the items so that we don't need to write the same code again we'll just modify the that category adapter to the item adapter now we'll modify this click listener function name and the list type instead of category it's gonna hold the items type of data and now we need to implement the items click listener interface here instead of category one and now we'll override all the three functions so this adapter is also going to have similar kind of function like the user can edit the item user can delete the item when one item click user can mark it as the complete as you define inside our data class or the model class and now this function is for our view model and now we need a separate view model for our items so i'm again doing the same thing like copy paste for the existing view model we can reuse it but we need to define the separate function so better to have the separate view model for each activity now we'll make changes in this view model and accordingly we will call our tao functions so here get all list it need a category id so that we can retrieve we can get it from the activity so we'll make it as a parametric let me modify all these functions before that you here this function will having the category id as a main type and now we will use that view model inside our activity that is new view model providers inside the get function will pass the this new view model now we'll set the observer and similarly if the way we did it in the category in screen if there is no data then we'll enable the no result text view if there is data then we'll set it to the adapter now we'll call our view model from the oncreate and then it recycler viewer as well and now we need to handle the save new item function so here we'll call the insert function of our dao or the view model so first of all we need to build a item object with the name and category id so we will set the name and category id and now we will call our view model dot insert and at the end we'll set our edit text to empty and now we will handle all the function which we are right from the adapter like item click so an item click is simply set will update the completed status to true if it is true i'll will set it to the false and we'll call the update function of our daw similarly we will handle the remove item and the edit item functions so remove item is very straightforward but edit is gonna be little bit tricky the way we handle in the category activity or the main activity for the category so similarly we are going to use the same approach so that we can set the item name to the added tags and then then user can edit it accordingly and then on the send save button click it can be updated we will set the new name to the object item object and now we'll call simply the viewmodel.updateitem function and then we will set this item update object to null also we will set the edit text to empty and inside our item adapter we need we didn't use the completed uh variable so let me do that so on item click will simply draw a line on the item name if it is mark as a completed so we'll simply draw a line on top of the text or we can say a text view with the help of paint flag and in else case if the status is false if the complete status is false then we'll not draw the line on top of it so it is just to differentiate between the task has been completed or the item has been picked now let's run our project and see so you can see the splash screen and there are no categories so far i'm going to add a new category okay i think we missed something and bring the previous one okay so we didn't call our load category function or get categories function of the view model so that's the reason when we are first time coming it's not loading any categories so let's run it again so now it's loading both the categories that's great inside the category electronics we are not seeing any items so let's add some items that's great you can see now i'm adding another item few more so we can see all the items has been added successfully now let me delete one it's able to delete so delete function is also working now let me try to add it so i'm adding editing it there you go so it's editing also working absolutely fine and on click of item it's like drawing the line as well so this is just to differentiate like if item has been picked we can mark it as complete and if user want to revert it then they can revert it back so we see the new category category and in that category we haven't added any items so now i'm adding few more items in it there you go you can see now you can delete and delete and you can see the no results also so you see the back button was not handled so let's handle that back button on top of the items activity will simply close the activity by calling the finish function now i am adding deleting and now adding new category grocery there you go there are no items i'm adding some okay i think we are still missing that load items function and get all the item list function from the oncreate so an activity is loading we are not calling that function so let's call it and run it again there you go so guys that's all for today's video thank you so much for watching if you have any question you can ask me in the comment section thank you so much for watching you

Channel: LearningWorldz

Views: 11,392

Rating: 4.9761906 out of 5

Keywords:

Id: mfqOug9HyX4

Length: 91min 33sec (5493 seconds)

Published: Tue Jan 05 2021