The Notes App (MVVM + ROOM Database) in Android Studio using Kotlin | CRUD

hi everyone welcome back to my channel in this video we will create a Notes app using mvvm and room database I have already created a Notes app but that was using sqli database which was very basic but this time we will create an advanced version of notes app using room database and mvvm also previously I have created a news app using retrofit even there I have used mvvm and room database so if you want you can watch it by clicking on the I button not just that but I have also explained mvvm and room database in a detailed video so you can go through it for revision Link in the description box now first let's see a quick demo of a Notes app here it is this is how it looks I have kept the designing very minimal as always then we have five major features like starting from adding a new note then displaying it stagger layout then updating the note then you can also delete the note and lastly you can search the note and that's it I know it sounds simple and it is very simple but there is a lot of code to write hence I have divided the code in four videos in this video we will do all the prerequisites and XML design then in part two we will cover room database then in part three we will cover adapter and view model and then in last part four we'll cover all the fragments and final output and that's it now before starting with all the prerequisite let me quickly tell you the technical side of it and also it will be great if you guys are using the latest version of Android Studio 2023.2rpm be saved in the room database whose three main components are entity dowo and database correct then they all will be handled under repository then we have view model for the communication and lastly we will have three fragments add node fragment where we will add the note then edit node fragment where we will edit the note and home fragment where we will display the nodes simple right also delete feature will be handled in edit note fragment and search feature will be handled in home fragment got it now let's create it choose Mt views activity name it as the notes app and done now let's start with all the prerequisite also as I always say as a developer your first priority should be logic rather than designing hence to save your time I am providing source code only for the prerequisites and XML layout so you can simply copy paste it but there are few important parts that need explanation so don't directly jump on the source code instead watch this video first and then go to the source code okay now first let's start with gradel as we'll be using room database and view models so obviously we will require it dependencies right and also we'll be using navigation component so we will require dependency for that as well so first go to build grel project here simply copy paste the dependences and plugins from here to here and then this is for navigation and this is for KP Cod Lan symbol processing it's a better alternative for Kap plug-in do not click on sync now then go to Gren module here don't blindly copy paste it because there are chances of package name being different hence only copy paste what is necessary like we will require kscp paralize and save arguments then scroll down here add data binding as true done then copy paste all the dependencies as it is is and done see we have dependency for room then Coe routines then navigation and then view model now you can click on sync now and done close all the tabs next go to Android manifest.xml here we need to mention metadata for room Library so simply copy paste it and that's it now go to colors.xml here I will add two prominent color as pink and red pink hex value is f88 379 and red hex value is C13 b34 there is a website with all the color hex code from which you can decide your app color Link in the description box then go to strings.xml here simply change the string as notes or whatever your app name will be then go to themes. XML here write parent as St action bar action bar will play an important role in our app because features like saving the node deleting the node and even the search is present on the action bar then simply copy paste the remaining code and done then close all the tabs now come to drawable folder here we will require four icons delete search add and done icon so let me quickly add them and done then I have created a background image which will be display when note notes will be available means in empty Notes app so I'll add that as well last thing in drawable is to create a border for edit text as well as for notes so create a drawable resource file and name it as pink border then give it a shape as rectangle then copy paste the code and that's it next thing is to create menus specifically three menus the first one is for search second one is to save a note and third one is to delete a note as they are menu so they will be present on the action bar in three different fragments home add note and edit note fragment so first create a menu directory then inside it create a home menu and here paste the code it's a search menu with search icon in home fragment action bar then create another menu as menu add note and inside it create an item with ID as save menu title as save and show us action as always there will be no icon only save text on the action bar of add node fragment then next create another menu as menu edit note paste the code here an item with delete icon present on the action bar of edit note fragment and done next we need to create all the package and fragments so that we can design it so first package is adapter where recycled adapter will be present then create another package as database where Dow and database will be present next create another package as model where entity will be present then create another package as repository where obviously notes repository will be present then another package is view model which will consist of view model and view model Factory and in the end main activity then as I have to design layout so for that I need three fragments so create fragment package and let me quickly create all the three fragments and done see here we have add note fragment edit note fragment and home fragment and that's it our packages and fragments are ready now it's time to design them so go to layout here we have activity main fragment ad node fragment edit node and fragment home also we will require one more layout that is note layout for Recycler view item so let me quickly create a layout resource file and done now first let's design fragment home this is where notes will be displayed and also a floating action button to add a note so let me quickly copy paste it and done I'm not going to explain in detail just the important parts as we'll be using data binding so opening will always be with layout then important things are IDs this is Fab to add a note whose ID is add note Fab with add icon then a recycler view to display nodes whose ID is home recycler VI and then image VI whose ID is empty nodes image and it will display when there will be no nodes also I have kept both of their visibility and scone because this will be handled in logic only next go to fragment ad note here same layout for data binding then a text view as hiding also make sure to add Poppins font otherwise you will face error then two edit Texs one is for note title whose ID is add note title and second one is for note description whose ID is ad note description and that's it next go to fragment edit note here everything is similar to add note layout except IDs and Fab this is edit note title then edit note description and a Fab button whose ID is edit note Fab which will save the edited note with icon and that's it next go to note layout here again a layout and inside it I have given a pink border to linear layout then a text view whose ID is note title for displaying the title of the note and another text view whose ID is note description for displaying description of the note and thing to be noted here is I have kept the maximum height of text view as 170 DP you can customize as per your requirement and also make sure card view height is WRA content it's a very common mistake hence it was necessary to remind and that's it next go to activity main here all the three fragments will be displaying using fragment container View and also this is our Nave host fragment as well which will help us to navigate from one fragment to another fragment and for that we will require nacra so I have already mentioned it here and now let's create it first create a navigation directory and inside it a na graph file and done now here we have our host as activity main that is our fragment container view right then we will add new destinations means all the fragment so we have home fragment add note fragment and I did not fragment and done now listen to me carefully the flow or the navigation goes like when the user will click on ADD Fab it will navigate to add node fragment right so create a path for it then when the user will click on the Note in home fragment it will navigate to edit note fragment right so again create a path for it and then now another flow goes like when the user will click on the save in add note fragment it will save the note in the database and instantly navigate the user to home fragment so create a path for it then similarly when the user will click on edit Fab in edit node fragment it will save the edited note in the database and instantly navigate the user to home fragment so create a path for it too and then now few things to keep in mind make sure to keep home fragment as a start destination then come to code here see home fragment has two actions add note fragment has one action and edit note also has one action to be performed then here we need to attach data through argument tag which will require database so that we will cover in the next video and that's it all our prerequisits are done and now from the next video the real logic begins so stay tuned for that okay also for more updates you can follow us on Instagram or join our telegram group Link in the description box so yeah that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next video hey everyone welcome back to my channel in this video we will continue with our Notes app in previous video we have covered prerequisites and XML design so if you have not yet watched it I'll highly recommend you to watch that first and then hop on to this video now in this video we will cover room database but before starting with that let me give you a quick recap of our previous video so in our previous video we have added all the dependencies and plugins in grel then we have designed all the XML layouts three menus navigation graph and also added icons in the drawable folder then colors themes and segregating all the packages and and that's it you can find all the prerequisite source code in the description box also I have already explained room database in detail so you can watch it by clicking on the I button now as you know room database has three components that is entity dowo and database entity represents table with its columns dowo provide query for data access and database serves as a main access point got it we will create classes for all three of them first let's start with entity class so under model package create a data class as node as this is an entity class so there will be a table name with its columns right so I'll write here as entity annotation and inside it table name as notes then inside the table I need to save two things first is the title of the note and second is the description of the note so we will create two columns for it note title as string and note description as also string then obviously we will require a unique value that will be our primary key so for that I'll create another column as ID which I'll keep it as primary key simple next it will be difficult to transfer this type of data so in such cases we go for partialization now what is parcelization parcelization is a mechanism that converts complex data objects into a simple format that can be easily transfer between activities or fragment got it so to implement it we will mention here paraliz annotation and here Parable interface and then we have table as well as called colums and now it's time to implement query on it so for that we will require Dow that is data access object so under database package create an interface as noow then inside it we will have PC crud queries like insert read update and delete also we have a search feature as well so we will require query for that as well here mention da annotation then let me quickly write the code and then I'll explain you and done now see our first query is insert query here what is on conflict so on conflict strategy. replace means if there is a conflict like if same primary key already exist in the table then the old data will be replace with the new data it's basically a safe way of writing code so that we don't face any error in the future then we have created a suspend function named insert node that inserts the node in the database this is our entity with table and columns correct and as you already know that suspend keyword indicates that this function is called from a code routine similarly I have created for update and delete note as well but to read note means to display note and to search note we will require custom queries hence I have wrote queries using query annotation in get all notes function so the query to display all the notes goes like select star from noes that is a table name ordered by ID descending means the recently created note will be at the top and previously created will be at the bottom got it the result is wrapped in a live data object containing a list of note entities similarly I have created a query for search note function as well here select star from notes where note title is the column name like query is the keyword that needs to be searched or notes description like query means if the keyword matches either with title or description then store the result in live data containing a list of note entities and this question mark means it can be null if no specific search criteria are provided got it and that's it our Dow interface is also ready next is the third component of room database that is database itself so create a new class as no database in database package and then here we need to create and set up the database so to tell the compiler it's a database class here we need to mention database annotation and inside it entities as note class and version and as one now listen to me carefully we will make this class as abstract class because we will be creating an abstract function in it later then as this is the main access point of database so note database will extend room database now inside it I'll create an abstract function as get note Dow which declares no Dow interface abst function basically has no body in it then we will create a companion object so whatever present inside companion object is static and can be accessed anywhere in the code using its name then inside it it's mostly syntax only so let me write the code first and then I'll explain you and done now see volatile annotation ensures that changes made by one threade are immediately visible to other threads an instance variable holds the Singleton instance of the node database or null then this is a lock object which is used to synchronize the database creation process T basically this block ensures that only one threade can execute the code inside the block at a time got it then this is a custom invoke operator for the companion object basically it allows you to create an instance of no database by calling no database context invoke function follows the singlet ton pattern ensuring that only one instance is created then this line checks if the instance is already initialized if not then it enters a synchronized plog using the lock object to ensure that only one thread can create the database instance at a time then inside the block again it checks if the instance is still null and then creates a database using the create database function I know you will be wondering why is there a need of this invoke operator function because invoke operator is used for Simplicity when creating an instance and also double check locking pattern is implemented to ensure thread safety during database creation process lastly I have created a function as create database it is responsible for creating the node database instance using database Builder method then it also specifies the database class database name that is notore DB and then finally build it and that's it our database is also ready next and the very last thing to do is set up repository so in inside repository package create a new class as note repository and then now what's the general meaning of repository it means a place or a container where something is deposited or stored right same we will be going to do in this noes repository with the help of node database which we created before okay so I'll write here as well DB and declare no database class then inside it I'm going to create five functions insert node function delete node function update node function get all nodes function and search node function we have already created their queries in Dow but this time we will call all of them as methods in their respective function so first let me write the code and done now see suspend make sure that all this operation is running on a background threade then we have a function as insert Noe with its parameter as note and that is equals to here I have called the insert node method which is present in node to and that node to is present in node database see if I click on it it leads me to note Dow interface and this get no Dow interface is called in node database over here hence the chain goes like this way and then all you need to do is pass the arguments that needs to be saved so for our case it is node got it similarly delete node method for delete node function then update node method for update node function then get all notes function don't require parameter because it is retrieving hence call get all notes method from database then search node function do require a parameter which will act as a keyword that needs to be searched so in our case it is query whose data type is string then using search note method from database it will search the note according to its query and that's it our repository is also ready one more thing that is left is to attach node entity class with navigation graph in edit node fragment as an argument it's basically attaching data with its respective fragment so let me quickly do that and done now in next video we will set up our adapter and view model so stay tuned for that okay 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 video hey everyone welcome back to my channel in this video we will continue with our Notes app in previous video we have covered room database 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 cover view more model and adapter so as you know mvum stands for model view and view model out of which we have already created model that is a data view model we will create it today and view we will cover it in the next video then adapter is for Recycler view so first let's start with adapter create a new class under adapter package as node adapter and done now we have only one recycler view present in home fragment to display the notes correct so for that we will create an adapter and a view holder which will basically going to attach the data with its respective UI got it let's start with extending the recycler view do adapter and inside it node adapter Dot note view holder which we'll create now so inside note adapter class create another class as note view holder view holder is basically used for attaching the xtml layout file like r. layout. not layout but here we will be using binding so for that here write well item binding as note layout binding that is an XML file extends view holder with item binding dot root now whenever we want to access anything from note layout we will write item binding and a list of all the UI components present in it will be displayed next is to set up differ call back and Earth Sy list differ now what are those both of them are used together to efficiently update the contents of a recycler view without refreshing the entire data set so let me write the code first and then I'll explain you and done now see this is an differ call back implementing diff util do item call back interface this interface is used by diff U to determine the difference between two list first function is our items the same is called to check whether the item represents the same object in no data class here it compares the ID no description and no title of the old items with the new items if all this properties are same it considers the item as same similarly second method are contains the same is called to check whether the contents of two items are the same in the node data class here it uses the default equality check that is old item is equal to equal to new item this means that if all the properties of the nodes are the same then contents are considered the same got it then this line creates an Ayn list differ instance using differ callback which we created basically a syn list differ determine differences between two list on a background threade which helps in smooth UI updates and that's it next we will Implement three members of node adapter class that is on create view holder onbind view holder and get item count first in on create view holder we need to define the view means XML layout file so let me write the code and see as we have used by Bing so note layout binding will inflate parent. context and returning note view holder obviously next in onbind view holder first Define the position of the note in the list like this [Music] way then once we know the position then simply attach the data with it respective UI like this way no title text through item binding is equal to current note do title means whatever the current note title will be that will be displayed on the Note title text view similarly whatever the current node description will be displayed on the Node description text view simple now what will happen if I click on the recycler view item means on the note it should navigate the user to edit note fragment correct so first set on click listener on item View and inside it we will set up NB controller let me write the code and done see Direction variable consist of Home fragment direction that goes from home fragment to edit node fragment of the current node then set the direction on the next controller and done next is to return size of the list in get item count function so return defer do current list do sites and that's it our note adapter is ready now moving on to our next class that is view model so create a new class under view model package name it as note view model and then now as you know view model acts as a bridge between View and model so here we will be creating five functions that will launch through Co routin scope so for that first we need to add parameters here as application then note repository and extend it as Android view model with argument as app then inside it create a function add node with node parameter is equal to view model scope do launch which is a part of the Coe routine basically it ensures that the core routine is cancelled when the associate view model is cleared or destroyed to prevent potential memory leaks got it then inside the co routin block write note repository do insert note with Note argument this will launch in the background using Code routines and done similarly let me quickly create for delete note as well as Update note and then next we will create get all nodes function is equal to node repository dot get all nodes as we are retrieving the data so there is no need of parameters then create another function as search node with query parameter that is equal to search note m method from node repository with argument as query and then our view model is also ready next we will create view model Factory so create a new class under view model package as note view model Factory and then now what is view model provider Factory basically view model Factory is a class that instantiate and return view model simple so here I'll pass the parameter AS application and note repository then extend it as view model provider do Factory and then inside it let me write the code first and then so this function is required to create an instance of the V model class basically it overrides the create method from The View model provider Factory interface then inside it it returns a new instance of the not view model by passing the application and note repository instances to its Constructor this SD is used to ensure that the return instance matches with the generic type T which we called before and that's it our notes view model Factory is also ready next go to main activity here we need to set up the view model which we created so to do that first initialize not view model then outside on create here create a functional setup view model and inside it let me quickly write the code and done see node repository initializes node repository object with node database instance then view model provider Factory creates a note view model Factory with parameters AS application and the note repository now once we have repository and Factory initialized then set it up in the note view model like this way view model provider with this and view model provider Factory which is used to create an instance of note view model then note view model class specify the class of the view model that needs to be retrieved and then lastly call setup view model method here inside the on create and that's it our adapter view model Factory everything is ready now the only thing that is left is to set up fragments which we will cover in the next video stay tuned for that okay so yeah that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next video hey everyone welcome back to my channel in this video we will continue with the notes app in 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 Up Series so now let's create it we already have three fragments that is home fragment add node 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 note 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 then 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'll 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 the 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 and done next in onm created we need to initialize menu host like this way and then then also initialize notes view model and done then if you remember on home fragment we have if 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 ad note Fab and inside it find the Nave controller then navigate it from home fragment to add note fragment and then 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 an empty notes image will be visible and recycler view will be gone but if notes are available means not empty then recycling view will be visible and empty noes image will be gone simple next is to set up recycler view function so let me write the code first and done now see first we have initialized note adapter then as we want a recycl view in a staggered layout hence we have used tagger 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 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 men on the action bar that's where we have to place the search view right so menu provider provides us with two functions these 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 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 is 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 fall 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 s 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 note in the list by observing like this way and done then on query text listener comes with two functions first is on query text submit and second is on query text change in 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 on query text change so if new text is not null means there is a query Pres present then search the note and return 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 set up 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 Bing and menu host so wherever 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 up 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 these 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 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 node 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 note then as the delete node will be on the action bar menu so we will requir 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 na graph so for that we will require edit node fragment arcs that is argument by now argument got it then same initialize data binding and then again this three lines will be same in on view created and then also don't forget to initialize current note as argument. node then we need to save the updated node 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 its respective fi 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 on delete note it will through a dialogue box whose title is delete note and message as do you want to delete this note 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 on create menu first clear the menu then inflate the edit note menu which we created before and then then in on menu item selected return When menu item. item ID that is delete menu ID is [Music] clicked then delete note method true or or else false and then last thing is to overwrite 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 say is 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 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're new to this channel then please consider subscribing to my channel and I see you in the next [Music] video

Channel: Android Knowledge

Views: 9,023

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: zCDB-OqOzfY

Length: 78min 31sec (4711 seconds)

Published: Sat Dec 30 2023