Notes App (MVVM + ROOM Database) in Android Studio using Kotlin | Part 4: Fragments & Final Output

hey everyone welcome back to my channel in this video we will continue with the notes app in previous video we have set up view model and adapter so if you have not yet watched it I'll highly recommend you to watch that first and then watch this video now in this video we will be covering fragments and the final output also this is our last video of the notes app Series so now let's create it we already have three fragments that is home fragment add note fragment and edit note fragment home fragment is where all the notes will be displayed add note fragment is where we can add a new note and edit node fragment is where we can edit the existing note simple so first let's start with home fragment let me quickly remove all the unnecessary code and done now here we have to create multiple functions that will help us to display the notes in a recycler View and also a search view to search a note so first we will extend the fragment layout here as fragment home then as we will be using search view so extend search view dot on query text listener and as this search view will be present on action bar menu so extend menu provider as well and done next we will be using data binding in fragment so let me quickly declare it and done then obviously we will require view model to connect with UI and adapter for Recycler view so declare them as well and done then we have already declared data binding so inside on create view initialize it as well [Music] and done next in on VI created we need to initialize menu host like this way and done then also initialize notes view model and done then if you remember on home fragment we have a add Fab button at the bottom right if we click on it it will lead to add note fragment correct so let's navigate it set on click listener on add note Fab and inside it find the Nave controller then navigate it from home fragment to ad note fragment and done now outside on view created we need to create eight functions so let's create it one by one first is very simple that is to update the UI so let me write the code first and done now see if you remember we had an empty notes image right in case of no notes available and empty notes image will be visible and Resler view will be gone but if notes are available means not empty then recycling view will be visible and empty notes image will be gone simple next is to set up recycler view function so let me write the code first anded now see first we have initialized note adapter then as we want to recycle view in a staggered layout hence we have used staggered grid layout manager on home recycler view the layout is vertical and contains only two Grid in a row got it then set the adapter then we need to display all the notes in the recycler view correct so for that we need to observe it here get all notes method is observed and a list of notes via note adapter is displayed on on the recycler view lastly update UI method which we created before with node as an argument means update the UI according to note availability or not got it next is to set up menu on the action bar that's where we have to place the search view right so menu provider provides us with two functions this two functions are of search view so add them as well see first is on create menu where we will initialize the menu and second is on menu item selected if we click on that menu item basically first is to clear the menu means it removes an existing menu item then attach or inflate the home menu which we created in the menu directory like this way and done then initialize search menu item present in the home menu keep each submit button enabled as false because we don't require any submit button search will simply filter it and set on query text listener as this activity itself lastly on menu item selected will be false because when clicked on it the search Logic will not be handled by menu host instead we will create a separate function for it so create a new function as search Note with parameter as query then create a variable as search query and initialize it with query by concatenating percentage the percentage sign is interpreted as a wild card character indicating that there can be zero or more characters in that position then we need to search the in the list by observing like this way and done then on query t listener comes with two functions first is on query text submit and second is on query text change and first one when the user write the query and submit it by clicking on the search button then it provides the results but we don't want that way so keep it false what I want is as the user keeps typing the query the result starts showing up got it which is possible with the help of of on query text change so if new text is not null means there is a query present then search the note and return true simple then last method is on Destroy here the app is destroyed means the fragment is no longer in use in that case our home binding fragment will become null got it and that's it lastly don't forget to call setup home recycler view inside on view created and done our home fragment is ready next go to add note fragment remove unnecessary code here we need to save the title and the description of the note in the database and that save button will be on the action bar menu so we need to set that to there will be few things that will be quite similar to home fragment like minding and menu host so whever required we will simply copy paste it to save time okay so first thing is to extend XML layout here as fragment ad note then menu provider now inside it let me quickly set a binding and done then declare notes view model and a view as ad note view which is the ad note fragment itself next inside on create view initialize data binding as well and done then inside on view created simply copy paste this three lines and done this is to set up menu Host this is to initialize view model and also initialize the view itself and done next outside on view created create a new function as save note let me write the code first and done now see First We Take title and description of the note as an input from the user through edit text then checks if note title is not empty means title is present then simply add the note with its title and description in the database then throw a toast as note saved and also at the same time navigate back to home fragment once the note is saved else through a toast as please enter the title got it next we have two functions of menu provider in on create menu first clear the existing item and then attach the menu add note which we created before then in all menu items selected we will create a condition as written when menu item do Item ID that is save menu item in the menu is clicked then save note method with argument as add note view how we write this in activities here it is same view return true else false last thing to do is overwrite on Destroy function and inside it add node binding as null and that's it our add note fragment is also ready next go to edit note fragment remove unnecessary code here we need to perform two things one is to save the updated note and second is to delete the node from the database so let's do it one by one first is to extend XML layout as fragment edit node then as the delete node will be on the action bar menu so we will require menu provider then inside it set up binding and done next declare view model and Note data class and done also we have attached data or the argument in nav graph so for that we will require edit node fragment ARS that is argument by NV argument got it then same initialize data binding and done again this three lines will be same in on view created and then also don't forget to initialize current note as argument do note then we need to save the updated note when The Floating Action button will be clicked so first let me write the code and done now see first whatever the respective note title and note description is that is displayed on it's respective fill with the help of set text then if the user updates the note by clicking on the Fab button then the following actions will be performed like take note title and note description as an input from the user and if note title is not empty then take current note ID title and the description and update it as soon as it's updated go back to home fragment else if the title is empty then simply throw a toast as please enter the note title and then next is to implement delete feature so to do that create a function as delete note so let me write the code and done now see here when you will click click on delete note it will throw a dialog box whose title is delete note and message as do you want to delete this node with two buttons as positive button and negative button so in positive button it simply deletes the node from the database and negative button which won't do anything null and then create it and display it next is to set up two function of menu provider so in oncreate menu first clear the menu then inflate the edit note menu which we created before and done then in on menu item selected return When menu item. item ID that is delete menu ID is clicked then delete note method true or else false and then last thing is to override on Destroy function keep edit node binding as null and that's it our edit note fragment is also ready and so do our notes have now let's run it we have an error let me figure it out okay got it see here the import of search view should be Android X not Android so correct that look this one not this one now again let's run the app see there is no notes available so it shows the empty notes image then we will add a note let me quickly write title and description and now I'll click on Save menu and see it says note saved and also it displayed in a Stager layout cool right then I'll click on it to edit the note and write something and click on Fab see the note is updated and also back to home fragment then I'll quickly create another note and done now let's delete this note and see it says note deleted great right and that's it now for your convenience I'll be releasing the source code of notes app series soon so if you are facing any error then you can simply compare share your code with my source code okay also for more updates you can follow us on Instagram or join a telegram group Link in the description box so yeah that is it for the video If you new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,457

Keywords: notes app android studio, note app android studio, notes app in andorid studio, notes in android studio, notes app in android studio using kotlin, mvvm notes app in android studio, notes application android studio tutorial, notes app android, notes app in android tutorial, how to make notes app in android studio, how to create notes app in android studio, notes app in android, notes app mvvm, android studio, how to create ui in android studio, notes app using room library, kotlin

Id: -XZXvLvL3II

Length: 30min 21sec (1821 seconds)

Published: Thu Dec 28 2023