How to Make a Clean Architecture Notes App(MVVM/CRUD/ROOM) || Android Studio Tutorial || Kotlin

hey guys welcome back to another video fox Android so finally the day has come when we are going to create a real world project you heard me right we are going to create a complete project not just a tutorial that will be solving some problem or we'll be teaching a single concept of Android development this is not that type of tutorial we'll be creating a whole project a whole app that will be running on your device in this tutorial so I want to put out a disclaimer that this is not a 10 15 or 20 minute video the duration of the this video can go up to two 2.5 hours right because we are going to create a complete app so definitely the duration for this video will be long so if you are deciding to watch this tutorial then make sure that you complete it I'm not saying that just complete written in single go I know that it's a complete project you'll take some time you will take breaks but make sure that you write the whole code to learn the concepts very effectively right I personally feel that if you write your code by your own hand and not just copying it from the the GitHub it gives you a great deal of clearance on the concepts right so let me just demonstrate that what I'm talking about right I have just talking since the video started but let me just show you that what we're gonna get by the end of this video so if you can see on my emulator I have this app open right and you can see some notes are there in a staggered format right I can scroll them and let us just talk uh feature by feature so the very first feature for this notes I will be definitely we can create a new node so if I just tap on this button and I just name it as node fi and we just put in some data for example my name and we put some empty space and just tap here so if I just go down you can see this node has been created and you must have noticed one more thing that the space or the size of the note is defined by the content of the node right so the longer the content the size of the note would automatically be increased second thing we have recorded the time on which this node has been created for the first time the date Day and The Time so the time is 12 26 am and there is 14th of October and days Friday so that will be recorded on all the nodes right you can see here and all the nodes have different color right you can see that and it automatically changes you just remember these colors if I just close this app how do you open this app you can see again the color has been changed the second feature is can we delete the note of course if we are creating an app then definitely the node should get deleted so if I just long press on this we catch here a pop-up saying delete if I just tap on lead make sure you watch that node 3 should get deleted so you can see node 3 has been deleted and this staggered view has been updated in real time right so Note 3 has been deleted and all the nodes have shifted upwards that is the second feature can we edit the note is it possible no it is not just kidding definitely we can edit the node because we are creating a Notes app and definitely you want to edit the nodes at times so I can just simply tap on any note right so I can just delete some data for example I want to delete till here right you can just tap on this button so uh I forgot I guess it was node 5 if I'm not wrong so this node has been updated right and the last feature will be can we search some notes for example I have 100 of notes right I just can't go to a single node to look out for a particular node so I can just type in some keyword for example I want to type CrossFit right so these two nodes is having the keyword cross V or let's just say that I want the nose that has car so this node is having car alarm so all these notes is having a keyword called Lower so we can search the notes right so this is this is all the features I guess these are the major features that we use in a in an app that we use day to day I'm sure that all of us uses notes apps so now you need not to rely on someone else's app right you can develop your own app and run on your device and you can save your notes in your own app right so this is what we'll be getting by the end of this video make sure you watch this tutorial till the end and you develop the same app right so without Much Ado let's get started [Music] thank you so guys if you're into this channel make sure to hit that subscribe button and press the Bell notification icon force your notification of the upcoming videos and by the end of the video if you like the video make sure to hit that Thumbs Up Button as well so let's just start with the tutorial so first of all we are going to create a new project right so we'll just go here and empty project only we'll name it as nodes YT tutorial date we'll name it something like this the language will be kotlin and the minimize ticket will sport is 24 only so we'll just finish this so let's just wait for the build to be completed so it will build the project then we'll start it's okay is the new project has been created so the very first thing that we are going to do is we are going to add certain dependencies so we'll just expand this Gradle scripts then we'll go to build.gradle the app level build.gradle right so here we'll go and here independencies we need to add certain dependencies so I have already copied the dependencies that are required for this app so basically we need the room right room DB dependencies then we have view model and core routines right so I'll be uh I'll give you the link for the notepad file in which I have written all these dependencies that are required you can just directly go to the link in the description below and download that notepad file you simply just copy these dependencies and paste it here then we'll just sync the project it may take a while depending on your network speeds because it's gonna download certain things so here are some uh I guess we got some error okay because here we need to define a plugin as well so let me just copy that as well [Music] so now we'll just try again so you can see it's downloading and then it's gonna build the project so let's just wait for a while and see if okay so it's it got finished so we have successfully uh added dependencies so you can see you need to add this plugin and you need to paste in these dependencies here right so after that we are going to enable this view binding as well so [Music] build speeches view binding S2 sync again so okay this thing has been completed so we are done with the dependencies that is all we need to do inside this file right so we'll just close this then we're going to start with our front end part so this is our main activity right so first we are going to design our content thing so for that just right click here and Android Source directory menu okay so we have created this directory here so the very first thing what we need inside this activity is we need a search view if you have seen that app that I have demonstrated at the starting of the tutorial we need a search view here then we have a floating button here right Lenovo cycler view so I'll just simply delete this [Music] recycler View right then we had that search view as well and Floating Action button right so this is all we need so let us just uh constrain these things one by one okay Floating Action but has not been added because I need a drawable source file so just go here and go to Vector assets just double tap here add this one next finish so now add a floating action button and you can see where is my ADD button okay thing we're good to go okay we have added just add it to the constraint layout right let me just arrange this okay it's okay it's the very first thing is we are going to work with this search view so I'll just consent it on three sides to the parent so top left and right I'll just constraint it then we'll just go to the split window and for the height I'll just mention action bar size right so where is our search view so this is our search view right so guys now we are going to work out with this cycler view so the first thing we're going to do is we're going to set the constraints so I'll set the start to the parent and the end to the variant as well and to the bottom to the parent as well okay and we want to set the constraint of the top of the cycler view to the bottom of the search view right so I guess we have got that right and I just want to set the height as 0 DB because these constraints will do that part right so if I just set to 0 DP I can see this is taking this space and we want to set the ID as well so ID will be let's just call it as recycler view only right and that is pretty much everything for the cycle view I guess now we are going to go out with this uh Floating Action button so I just want to constrain the bottom to the Freeland oops we've got yeah so we are going to set it into two sides only the bottom part and the right part right and now we are going to set certain uh like margins because we just don't want it to stick around to the parent on all the sides so I am going to set some constraints here so yeah let me just go to the design mode and select this margin margin here right so start this one is and I guess I'll just set it to 26 DB looks good and to the bottom is 26 DB as well right so I guess this is the location that where we want our Floating Action button to B and yeah so now here also we just don't want to completely line with the parents so we want certain margin here as well so for this we are going to set the margin for this it has 16 BP Maybe yeah looks fine right and we want to give the elevation is squaredness so 8 DB right so this is our search View we want the hint as well so the hint will write here search notes right and let's just see comes out here okay we are not getting it let's just go to the design old mode and see yeah we have got that very hint as well quickly just see why we can't see the text here okay so there is one more attribute that is accountified by default we need to set it to false so yeah I can see we can see the text so that is pretty much everything for this main activity now we are going to create a list item for this so let's just go new layer to source file so I'll just name it as list underscore item right and I guess that is going to go let's just click here it's okay I just want to change it to card View right and we are going to save the width as match parent and height as wrap content all right and then we're going to set the margin here so layout margin will be 8 DPI guess and then we're going to set the background as white f Corner radius [Music] Corner radius should be EDP guess we are good to go yeah so in the list item we need three things the title and the summary of the note and the date on which the note was created right so here we'll set the elevation as well let's just set it to ADP only so first I am going to take a linear layout right and we are going to set the width to match parent and the height to wrap content only and we are going to set the orientation for this as well so orientation should be vertical right so inside this linear layout we are going to take a relative layout and the width and height should be same so match parent and trap content right [Music] so first just let's take a text view so the width should be match parent and the height should be wrap content right and then we should give it a edges so ID is DB underscore title right so align [Music] parent start is true we just save the text as title text color should be black number eight the text size should be 26 the text size should be 18 dbis right so let's just keep it this way only so inside this relative layout I just want to set this and then we're going to take and then we're going to take two more text views so let me just copy this one only so I'm going to paste it two more times so let's just change ID first so this will be note and TV date right so okay and this size we're going to set in Sp the size for this should be 14 SP and this one should be 14 SP square right and here I am going to the title of note and here we are going to save the date right so this is a rough layout for our list item right so let us just keep it this way we are going to modify it at the latest stage by looking at how it looks in our app so I'll just go to main activity and here inside the recycler view we are going to set the list item as list item right so this is our cycle view will look like right so now we I'm going to create a new activity to edit the note right so just go here new activity so I'm going to select an empty activity node at or okay let's give it as add note yeah that's okay so okay guys we have got this new activity called add node so we'll be using this activity for adding new nodes right so let's just go to this activity and here we are having a constraint layout so we'll be using this one only now the very first thing we are going to add is we are going to add a toolbar and then we are going to add to edit text right so plain text I'm creating here and one more ready text we'll be adding edits second one if so we got these two edit texts so what we'll do is uh the first one will be used for adding the title and the second one will be used for uh adding the note right so now we are going to style it so inside if I just go to split window so okay the height here will be wrap content match player and this looks fine so inside this I'll be adding a relative layout so the width 4 will this will be wrap content and height will be wrap content as well so now inside this we are going to add two image views because here in the toolbar we we have seen that we have two image views the first one is the back arrow and the second one is check Arrow so for that we need to add two drawable source Vector assets so I will just search for check yeah this one all right next finish and this second one we need is the back arrow I guess I should yeah this one I look back next finish so now we are going to go to the design window image review so inside our relatively out we are going to add the Arrow we should go under relatively out and the second one was uh yeah image view only so image View and this one will be this particular thing yeah so so for this set it takes I'll just uh constraint it to the parent on the start and the end right yeah the bottom to the parent as well and the top to the toolbar right oh I guess I need to delete this particular thing okay I'll do it there itself just go to split window tab here this one I guess the okay this bottom constraint we don't need this yeah so the secondary text so for this second text okay let me just first uh okay yeah this one I'll constraint it to the start of this text View this one here and this to the top of this Frame now we are going to change the IDS first so this will be e t [Music] title right yeah refactor and the second one will be PT underscore note yeah so okay uh now we need to just line these things so what we have added we need a toolbar we have added that we need to edit X right so now I'll just change certain attributes to look like the way it was looking in the app right so first just let's go to toolbar so yeah this is our toolbar so for this we'll constraint it to the parent talk to the parent as well and we'll set the width as 0dp yeah right so for the background we'll set white color so the hex code for that is this one right so okay now let us just set these images so this one will be align parent end we will set it to only right so it goes set the end and for this we are going to add certain padding so padding should be 8 DB yeah and similarly for this as well we are going to add certain padding here as well we will do that as ATP only looks good so now let me just change its ID so I'll name it as IMG back Arrow right and this one has [Music] ing let's just call it as check only date reflector so yeah our toolbar looks fine I guess I need to get give certain padding here let me just do that let's just add the margin here so margin end as well DP Maybe 14 you can do that 14 as well yeah it looks fine so now we're going to work on these titles uh so let me just change certain attributes the very first thing is we are going to set Jets width has 0 DB right and we are going to give some margins so the margin start should be 16 DB and then we are going to give a margin on the top as well so margin top should be 12 DB or we can make it ATP I guess yeah looks perfect so the margin on the end should be 16 DB as well right now the next thing is we do not want any background for this so background and delete null we'll just see how it goes okay let's just get rid of this and instead of this we are going to add hint hint will be title right and just add the text size as well and we're going to set as 26 SP yeah looks good you can see I think this particular ET looks very good now we'll just move on to this one so here is well we are going to set the width as 0dp because we are using the constraints right so the height is 0 DB as well the next thing is we are going to add certain margin so let's just add the margin on the top as 26 DB I guess let's just see how it looks okay I just forgot to concentrate it at the bottom so yeah it will be the space between the title and the note I think it looks good so we're going to delete this text instead we are just uh type the hint as start typing right and but we do not want this at the center we just want it at the top so for that uh the very first thing is I just uh don't want any background so I'll just set the background as well and for this we can use the attribute gravity to the top let's just see okay again see that we have moved this text to the top and one more attribute we'll be using here is lines spacing multiplier let's just set it to 1.8 so it'll do is when whenever you are typing any node right so there should be certain distance between a certain margin between the two lines so if you just uh one is the normal uh line spacing so we have just multiplied it with 1.8 it just really gives a nice look to your note right while someone is typing it looks more readable so that is all so I guess we are pretty much done with this activity as well so now we are going to create this menu so just right click here new menu source file right so you can just uh give it any name so I'll give it as pop-up menu because this will contain only one item of deleting a node menu let's just go to the split window and add the item here so item just give it ID delete note and we'll save the title here as delete right and that's only with everything we need this for menu bar so okay and now we are going to themes and I just don't want any action bar here so I'll just set it to no action bar right so we have created two activities a list item a menu item so we are good for this time for the front end part so we'll be modifying this as and when required uh as if now we have made everything so we have these two activities so let me just quickly go through this so we have this activity so this is the main activity where your old nodes will be there right so whenever user Taps on this button add new note you will be related to this particular activity here you will set the title and the description of the node and if he Taps here then that node will be saved and it will be better to this particular activity type so this is our front end part let us just see if we have given the IDS let us just change this as FB and it's good yeah so now let us just move to the backend code and create certain packages here so right click here new package so the very first one should be adapter all right then we have got e-utilities right and then we have got database last one is [Music] yeah so we have created these packages because we want that the source code files that will be generating here right so we'll be creating certain classes so every class or every code file should be stored in particular directory so it is more readable and it is more standard practice right so we have created these four packages and inside this will be creating certain files right so let's just first go to main activity but here we do not need to modify anything as of now so first we are going to create certain classes so the very first thing is we are going to create a data class so why are we creating that data class because we want to store our nodes right so what all the contenders a node have it will be having a title the description the date right these three things we need to store so how will be storing it to the local device we'll be storing that into the database so for that we need a data class so just we are going to store it inside this models package so just right click here new cutting class and just select data glass so we are going to name it as note only so we have got this class here and inside this we are going to specify all the elements of this data class but first we are going to annotate it with entity because we are going to use this in the room DB so for that we need to mention here entity and we have to give the table name so table name so I'll give the name as nodes table right so for this for storing data into the table we need the ID so the very first element will be the ID so ID of type int the second element will be uh the title right that will be of type string [Music] three third thing will be note itself that will also be of the type string the last thing will be it [Music] we are going to show that as well in the form of string right okay so certain annotations are required here as well so this will be the primary key right and we are going to set it to Auto generate as true because we are not going to pass this ID it should be automatically created and this is column info the name will be title only and here we're going to name the column as to [Music] [Music] we are going to set it as node only the name of the last column will be 8. 4 name as so we have created our data class so what this class will do is it it defines that how our object of the node will look like this this particular object whenever the object of this class will be created then we are going to have three things that will contain actually four things right the title of the note the note itself right the main node and the date on which that node was created and for storing this to the database any database we need the ID right so this ID will be automatically generated by the room TV so this is the first class that we need so the second class will be Dao that we are going to create here so if you do not know about room DB then I have a complete series on this I'll just uh put the link for that in this I button somewhere here right so you can just go there and you can watch that video if you want the I guess there will be three videos in that playlist if you're not aware about room DB so Dao is also a concept of room DB only actually I'm vbm but I have extended there in that video so we are going to create a interface here and I am going to name it as node now so we are going to annotate it with doubt and inside this we are going to create certain functions so the very first one will be insert and we are going to get the note as an argument of the type node and we are going to annotate it with insert this second function will be delete here also will get the note and we're going to delete that similarly we're going to hand rotate it with delete the third one is you get all notes and it will return live data that will be the list of nodes right and the last function that we are going to create is update so here we are going to get ID of the node that we need to update to i t of type int obviously the oops title of type string the third thing we are going to get is the note itself rate [Music] of tribe string yeah so now here we need to Define certain things so here we need to Define on conflict [Music] so now I am not going into the details of this but uh this we have defined that on conflict if there is a conflict between the node that we are going to insert and there is already a node there then you should replace that and here as well sorry [Music] so we need to annotate it with query update update notes table set title is equal to title node is equal to node [Music] where ID is equal to right so what we have done is whenever this method will be called this update method will be called will be getting the ID of the node that we need to update and the title that should the new title right if someone has changed the title then we'll be adding this title and the note so what we have uh passed here in the query is that you should update the nodes table where title is equal to the new title and node is equal to new note and where ID is equal to this ID so you update the Note with this ID and you should replace the content of the node as per these two arguments right and here also we need to pass a queries so select all ROM nodes table and we want to order by [Music] ID send me right so whenever this method will be called get all nodes so when we will be getting this uh so when we want to fill the Recycled view we want the all the nodes that are stored into the DB so what will we told the database or we have passed the query that we want the all the nodes that are stored in the nodes table and it should be we should get those nodes in the ascending order by the ID right so I guess we are pretty much done with our this doubt interface class as well so yeah and I guess you must be aware about this suspend because when you whenever we want to uh run these function in the core routine that means on the background thread then we have to Define it as a suspend function so otherwise we could not call it in on the core routines right so that's why I was saying if you want to get into details of these things I have a playlist you can watch that playlist and if you are aware about core routines and room DB then you're good to need not to watch that playlist right you can just continue with this as well so after this we are going to create a new class so 14 class and we are going to name it as nor database rate and we are going to annotate it with database entities audio so after that version is one and the export schema is outside so this is The annotation that we need to give to this class and after that we are going to create an abstract function right and we're going to name it as get node doubt so okay it's giving some error because we have not made this class abstract so let's just make this as abstract class so uh you know that for the database class so basically this particular class will be responsible for creating the database for your app right so this there should be one instance of this class in your whole app so if the database is already created or if you have created the object of this class then the same object should be accessible throughout the app so for that we are going to follow the same written method in which only one object of particular class is created throughout the app right so for that we are going to create our companion object right [Music] private or instance of node database [Music] on [Music] again database and here we'll be getting the context [Music] the return type will be it will turn the object of this class itself wait [Music] return instance [Music] foreign [Music] dot database Builder context dot application context dot build right [Music] so okay this is the no database class we have create an abstract function for getting the node object so we have called it as no get no doubt now this is the single time pattern in which only single object of this class can be created and if already object is created it will turn the reference to the same object so here we have created a variable called instance for the node database so whenever this method is called it will check if the instance is null then it will execute this line of code otherwise it will run the reference to the same object that is for that this variable is pointing to right so here we have set the synchronized lock that means if uh one operation is being carried out on this class with the help of this class then there should be a synchronization log no two operations should be carried out at a single point of time right so that that's why we have set this synchronized lock and and here we have used the room class to create the database and we have passed the context as an application context and for the database we have passed the object of this class and this database name we are going to create we have going to Define inside our utilities package right so let us just create that class as well so right click here on the utilities new cotton class file just select file and name it as consent of it so you will get this class and here we are going to Define all the constants that will be using inside our app right so as if now I'll just Define one constant that is the database [Music] name right [Music] and we'll set it to node in database so now we are going to import this yeah so we have got this error because we haven't implement the distance right now uh this room node database class is created and that is pretty much everything we need to do inside this class now the third thing we are going to create is new cotton glass file and we are going to name it as nodes repository right [Music] so this class will take an argument called no job of type no doubt right which is create well all nodes of type live data that will be the list of [Music] notes right pressed all enter is equal to No Doubt dot get off let's read so we are going to call this method get get all nodes from this Tau right we have created here so this will get all the notes so this all nodes will represent all the nodes that are there in the form of the live data right now we are going to create a suspend function called insert and we'll take the argument of note and similarly here we'll call the insert in the note now right the next one will be delete you will get the note here as well and we are going to call no doubt dot delete and will pass the note here right the next is update [Music] so we'll get the node here as well but whenever we are passing No Doubt Dot update so here we'll pass the ID the title and the note right that the way we have mentioned here so what this function will take is is still take the ID the title and the note right so for that we will Define note dot ID note Dot title and note Dot eight so what this repository class will do is it will act as an intermediate to our for example our main activity and just to our database so all all these functions are called from the uh no doubt class right we have created all the functions so we are calling same functions to get all the all the nodes we have this function get all nodes for inserting a new node we'll call this insert function but reading we'll call delete and similarly for updating the node we'll call this update function right so okay we are pretty much done with the repository class so now we are going to create the adapter for recyclerview so for that just right click here new cartoon class file and we are going to name it as notes adapter right so inside this we are going to create a inner class called node view holder right and it will take a argument as item View of type view standard cycle View Dot View holder just click here Alt Enter let me just zoom it a bit so okay this is our inner class so so now our main class that is nodes adapter it will take two arguments private parallel context of type context right and the second is the item listener we'll just skip that for now cycle View dot adapter oops some notes adapter Dot node view holder right so here we're getting error so just click here Implement members and we are going to implement all the three members right so let me just cut it from here and paste it at the end all right so here we will Define two arraylists so I will name it as notes list right the list of type note right and another one that is private call just name it as four list of type note so what these two lists will represent is so this is the arraylist that we are going to show at a given point of time in the recyclerview right and this is the full list this full list will contain all the elements that are there we are going to fetch from the database so what we are going to do is we are going to manipulate only this list right so after that okay we are getting error here so for this get item count so we are going to return the size of the notes list notesless dot size we're going to return this right and now we're going to implement this node view holder so for this we are going to Define nodes layout is equal to item View dot find view by ID here we have the card View RS dot ID Dot let us just go to our list item and I guess we haven't given any ID yet so let us just give it ID so let me just name it as card layout so we are going to refer this at our notes adapter so r dot just implement this so r dot ID Dot card layout right and similarly and similarly after that we are going to refer to the titles so item view Dot find view by ID and this time it will be text View and r dot ID Dot and the title for this will be this one TV title right well note is equal to item View find view by ID and this will also be text view only dot ID Dot is C this one this is TV note the last one will be date or yes let me click this let me just change this fit so DV date is equal to item View dot find view by ID will also be text view only so r dot ID Dot TV Detroit C this is the one here so basically what we have done is we have referred to this card view this layout and all the three elements that are there that is title node and date right so we have referred to all these view items inside this node view holder so after this we are going to implement this on create view holder so here we'll return um Road view holder layout inflator from and will pass the context here Dot instead r dot layout Dot what was the ID card layout it was so list item so we'll refer to this particular item and the second argument will be parent s right so we'll return the object of this class node view holder so we have implemented this method on create view holder so after that we are going to implement on bind view holder so well current node is equal to nodes list and we'll pass the position here so after that sorry holder Dot title dot text is equal to current node dot right left right and similarly folder Dot notes TV click on text don't worry I'll just explain it in a bit so title and will pass note here and similarly holder Dot date Dot text is equal to current node.it right so what we have done is we have this notes list right so in this note list we have all the elements that are shown in the cyclic that we want to show inside the cycle view so we have set the text that means the title of the the text of the title the test of the description of the node and the date to the current node title description and the trade and we are going to set one more attribute so holder dot title dot is selected is equal to true and for this date as well folder Dot date dot is selected it's equal to two right so these are the attributes that we need to set as if now so uh we have implemented all the methods now we are going to create one mode method called a random color generator as you know that all the nodes have different colors and those are randomly generated so for that we are going to create a method called it's fun a random color right and it will return the integer so for this we need to Define certain colors inside our color file so just go here to colors and I have already defined these six colors so you can Define as many colors as you want and the colors can can be of your own choice so if you want to copy you can just copy these colors so you can create your own colors as well so I have taken six colors so our notes will be of these six colors right the background of these notes will be of this six color so we'll just go to our adapter and here we are going to create a arraylist so I'll name it as well list it's equal to other list of type in trade so we are going to add certain elements so let's Dot add r dot colors Dot let me see what name we have given so note color one so we'll just copy it six times yeah so color 2 3 4 5 and 6. so we have this array list which contain uh the source ID of these six colors right so now what we have to do is whenever someone calls this number random color then we have to return a random color out of the resource ID of the any color out of this six colors so for that what we'll do is so first we have to create a seed so Val seed is equal to system Dot current time in Millis dot two inch right so this is the seed I'll just explain what we are doing so the second thing is we are going to get a random index So Random index is equal to random and we're going to pass the seed here [Music] to next int and here we'll pass the size of the list so list six and here we're going to return list Dot random Index right so basically we have this class already defined random right and we can create any uh random index so for this you have to give the size of the list so that means I have given the size to 0 to 5 so it will just create a random index from 0 to 5 and we have to pass the C date based on the seed it will create a random pattern so the time will always change that's why I have taken this variable so whenever this method is called the seed will be changed so there will be no repetition in the floor the colors right so basically whenever someone calls this method a random color will be the resource ID of the different color will be given at that time right so now we're going to use this so holder dot notes layout Dot Set Card background color so hold it dot item View dot resources dot get color so here we'll just pass that function random color right so okay uh whenever we have to set the background color for that card we will just uh call this method and we'll get different colors so we'll just set that color as the background of the Art card right so this is how a random number is generated oh sorry a random color is generated and that has been set to the background of the note right so after this we need to create a interface uh let me just create here interface called nodes item click listener so basically it will Define two methods on on [Music] item clicked and we'll take note as an argument right and the second one is fun unlocked item clicked it will take two arguments the very first one is node and the second one is card View right so okay this is the interface so basically uh in the main activity we are going to implement these methods so just let me just delete this and I forgot to do it a camel please let's just do that as well yeah so this is the interface that we have created basically it has two functions on item clicked and on Long item clicked right so we'll just go to our on bind view holder and first we have to Define here it will take one more argument well listener yeah of type nodes click listener right now we'll just come here inside this online view holder so folder Dot nodes layout dot set on click listener listener dot or item clicked so we'll just set the on click listener on the item right of the folder that has been clicked so we'll just implement this lesson in the main activity so we are pretty much done with our own bind view holder right let's just select the notes layout dot set on Long click listener sorry listener dot or long item clicked notes list folder Dot adapter position and the second argument will be folder Dot what's left right let's return to so we have implemented the uh on click listener or and long click listener so we have basically set it on each item right so yeah we are done with this on bind view holder now so now we are going to create another two functions so the very first function will be update list soccer take new list list of type note [Music] so whenever user calls this method what we want to do is we want to clear this full list and we want to set this list to a new list right so for that we'll just call full list dot clear right first we want to clear all the elements inside the full list and then full list dot add all we want to add all the elements of this new list to the full list and similarly notesless dot player notesless dot add-on of the fullest rate we want to add all the elements of the full list to the nodes list that we are going to display inside the cycle view so you'll understand why we have created this method once we code inside the main activity right and we'll call notify data set changed and one more method that we're going to create here is one filter list so this method will be called whenever user types anything in the search bar so it will be of type string so we'll just get this argument whatever the characters that the user is typing so we'll get this character as this search variable right so what we'll do is first we'll create clear the notes list dot clear now we'll run the for Loop so item in or list so we are going to iterate through all the items that are there inside the full list if item Dot title load case contains search so if and true [Music] or [Music] item Dot note to lowercase dot continuous search lowercase [Music] is equal to 2. so if this is the case [Music] we want to add node to notesless notes list dot add this side right so what we have done is we will get this string that the user has typed into the search box in this variable search right so we'll compare if the title contains that particular string or the description of the node contains that will add that particular node to our nodes list right because we have cleared all the nodes from the notes list here then we have added it here right so this is the case so either it should be in the title or in the description right so after this four list will again called notify data set change so it will notify the adapter that we have changed the data now you need to refresh the data inside the cycler right so we are getting some error here because I have done the same mistake right so we are getting these two error as well because you just see okay because there is some typo we have to type is equal to here right so that is it for the adapter class right we have created the adapter for our cycler view now we are going to move to our main activity so now we just need to implement the main activity and add note right so now we are going to implement this main activity first so inside this main activity first we are going to implement the view binding so private latent War we'll just name it as binding [Music] right so binding [Music] is equal to activity mean binding dot inflate and will pass the layout inflator here and in set content will pass binding Dot root right so this is the thing that we always do for view binding right so after that we are going to declare certain variables so the very first one will be private latent War will name it as database of type node database and the next one will be [Music] latent War foreign model of type node view model latent War adapter of type nodes adapter and the last one will be [Music] selected node [Music] of type node right so these are the variables that we need to Define so let's just import this Alt Enter yeah this one right so now here we are going to call a method called init I UI and let's just create this method right and this is for initializing the [Music] UI foreign so we are going to implement this method just a while so after that we are going to create view model is equal to view model provider pass the context here and the second argument will be viewmodel provider dot android model Factory dot get instance and here we will pass the application context Dot get notes sorry node view model class dot Java all right so we have initialized this view model here right so after that viewmodel Dot all nodes dot observe this list [Music] dot left chapter Dot update list and will pass the list here so okay let's just move this out of the parenthesis so basically we are going to observe all the nodes that are there through this view model and whenever there is any change in the nodes then we are going to call the update list method that we have created in the adapter class so we are going to call this method because then we want to clear the full list and the notes list and we want to update the list according to the new list that will be passed here right so this is blue model so after that database is equal to node database Dot get database and we'll pass this here now let us just initialize this method we need to implement this init UI so the very first thing is we are going to this sector view dot set has fixed size to true so after that let us just set the layout cycloview.set layout manager see we'll put we want the staggered grid layout let's we want the two rows and the orientation should be net layout so dot vertical after that adapter is equal to nodes adapter yeah so we'll pass the context here [Music] and The Listener don't worry about this error we are just going to create this as well so binding [Music] Dot cycle review dot adapter is equal to adapter right so after that we are going to create get content is equal to activity for result activity result contracts make sure you implement this one Android x dot activity dot result contract Dot start activity for result [Music] if result dot result code is equal to activity dot result okay so basically we are registering the this get content for the activity result that means whenever the user Taps on The Floating Action button to create a new note then we want that we get the result out of that activity so if the result code is okay that means everything is fine and we are getting the content then what we want to do with it so we want to insert that particular node inside our database right so well nope is equal to result Dot data dot get serial serializable extra and here I'll just pass node as node rate so if note is not equal to null then view model view model dot insert okay it's okay I guess we forgot to declare certain methods here so let us just quickly do that as well so you want to declare three methods here for deleting update and insert the nodes so on delete note and we'll get the node here as an argument right is equal to view model scope dot launch dispatches dot IO repository dot delete and we'll pass the note here and similarly we are going to create method called insert node thank you models group dot launch dispatches dot IO pause tree dot update and pass the note here so basically we have defined these three methods for deleting insert and update the Note right so now let us just use this method insert node and we'll pass the note here right so after that binding Dot we'll just see if we have given the editor floating FB add node if we add no Dot dot set on click listener so whenever user Taps on this button well intent is equal to new intent and we have the add note so get content dot launch in little pass the intent right so what we have done is we we whenever user Taps on this Floating Action button we have created the intent for the next activity that is add note and we have uh call this get content that we have created here so basically this activity will be created as a result launch activity right we need we we are expecting some result out of this [Music] so after that binding Dot is it the search view let me just see the ID for this search view only binding dot searchview dot set on [Music] query text list now object of search view Dot on query text listener so let us just implement the members so return false here so whenever user types anything inside this search view here so this particular method will be called and whenever there is a change in the text then what we want to do is we want to call this method filterless right we want to filter the list so we're going to call this method here so let us just change the name to new text so if new text is not equal to null and then what you want to do is adapter Dot filter list and we want to pass this text here and here we will return so whenever user types anything inside the search view then we want to filter the list and we want to update the cycle view according to this new text right so after that um let's just create private is equal to with this for activity result start activity for results result dot result code is equal to dot result okay then value note equal to data dot get serializable extra you get the note here let's try it if note is not equal to null then we want to call viewmodel dot update mode and we'll update this right so basically the second activity can be called in two circumstances the very first one is whenever user Taps on that Floating Action button that means he has to create a new node in that case we want to call this instance and if user Taps on or a node that is already there then that means you want to update the node then we want to use this one right so for using this thing let me just come here on item clicked and long click so for that we have implement let's click listener and we have two Implement these two members right so whenever user Taps on any item we want to update that node so for that in well intent is equal to intent this and delete main activity and here we want to pass add note class dot Java here we want to update node dot launch and we want to pass this intent here right also we want to put intent dot put extra if we want to pass the current node here because we want to update that particular node so we will just pass this note after that I'm going to set this limited node as node so whenever user long clicks on any note we want to set that particular note as selected node and if we want to call the method called pop-up display and here we will pass this right so you guys just create this file is equal to pop-up menu so right menu Dot set on menu click listener it will pause this so we are getting this error because we haven't entered this pop-up menu Dot one item click listeners and here we need to implement the members rate so let us just change the name to item so if Item ID is equal to r dot ID [Music] Dot delete note I guess let us check here yeah delete note if ID matches this to view model dot delete note and we'll pass this note notes we will pass the selected node here right and here we will return true it will return right so okay we are pretty much done with our main activity now let's move on to add note activity so first Let The View binding thing be done with wait now let us just declare certain variables here so we have declared these three variables so is update is false that means this will track if the note is updated or new note is created and initially we have set it to false this will give us the new note updated one this is the old node so after this we are going to put this inside uh try catch block old node is equal to intent Dot get serializable extra and here Will pass the same thing that we have passed here that is current node copy this there should not be any type over here right so binding Dot T title right and similarly binding Dot 18 note I guess set text old node Dot note space update is equal to true so we have put it inside the try catch block that means if the conditions are executed till here without throwing any error that means this activity was called to update the Note right so this was called for that so we'll just set this to true now after this we know that we have to update the node whenever user Taps on this this item let me just show you whenever user Taps mistake button we have to update the Note right so catch [Music] exception e Dot yeah so after that binding Dot IMT check dot Saturn click listener so whenever user Taps on this particular thing here right either he wants to update the note or he wants to create a new note right so put that title is equal to my new DOT title dot text Dot to string similarly we'll get the node as binding dot 18 node.x dot to sing right if title is not empty or note is not empty then prepare for matter is equal to simple formatter yeah so we have set the pattern for our date so this is how our date should look like so if is update is true that means uh we have to update the node so for that note is equal to node old node.it the second thing is title so we'll just pass the new title if the user has changed it and we'll pass this note and for the date will pass formatted dot format teach right else I mean let's just call it description here we don't want to pass any ID here we'll pass the title no description so now well intent is equal to 10 dot texture [Music] note and will pass the note here set the result DVT dot result okay and you will pass the intent here right else dot make [Music] text and we'll just make a toast saying that please enter some data post dot length short and right yeah and here also it should be no description so okay we are pretty much done with everything but you can see we are getting these two error right here and in the main activity as well this is because we have to make it serialize it right so you can see these errors are gone so this is the complete Notes app that we have developed as of now so there might be some errors so let us just build this app and install it to our emulator and see if it is working fine or not right so let me just install this to my device let's go to Terminator run this emulator so okay guys while building the app I was getting some errors so I've just figured it out if you just go to build.gradle right this file so make sure that these particular versions right it should be 7.2.2 7.2.2 1.6.21 and you should add this as well as clean is equal to this thing this might not be there if you're creating uh the project right now in this version of Android Studio so make sure you manually type this and these version should be like this and then you build the app if you're getting any error related to this no doubt right regarding this update function then make sure you modify this build.gradle file right project level Builder needle file and then you try to rebuild the project so now let us just uh install this app to our emulator so yeah let's just install this so this is our app so we have got this search field right and this Floating Action button so if we tap on this button we have moved to the next activity so let us name it as node one and type this is the first [Music] note of r right we just tap on this button so you can see the note has been created and it is displayed here and if I just want to update it I have Egypt the no trade [Music] so you can see I have updated the node so I can see that it doesn't look very nice here because we have not while building the app we haven't done detailing of this thing right so now let us just do the modifications that are required in this file then we'll see how it looks right so the attribute that we are going to do here is this one forever so what this will do is uh if the title uh text is longer for example if I just give a longer name to this node one it will scroll from right to left right so the next thing will be we want to give it a padding of ATP foreign settings for our title now let us just go to our node so the very first thing is Max lines will set it to 10 we'll give it a padding of 8 DB only right and we'll just delete this and set textile to write so this is for the note and the last is date okay okay we need to give it a gray color so that is not there in our colors file so let us just add the gray color the color so this is the hex code for the color now just go to list item just delete this and we're going to copy the market setting foreign I guess we are good to go now let us just try to reinstall this app and see how does it go so you can see now this node looks really good right so it gives a good vibe earlier it was not so neat and clean so yeah now if I just create another node node 2 and this is ours node 2 from the app and here also if you see I couldn't go to the next line right so for that we have to go to our add note activity and here we have this edit text we need to modify certain attributes for this as well so here we need to modify this attribute input type 2 text multiple line right so now it is it will allow us to add the text in multiple lines so now let us just again rebuild the app foreign press enter so I can go to the next line right we'll just tab here you can see it automatically takes the size of the note and if I just want to search something for example SC all right so this node contains this particular text I'll just delete this whole notes gets displayed right so search functionality is working fine so let us see if we can edit the nodes so if I just delete this and tap here the node gets updated right so I guess the app is working perfectly fine all the functions that we have included in this app are we are good to go with them right and I also hope that you guys have understood the code of the app I know it's a big code but make sure that if you have any concept of yours is not clear for example you are not clear with the room DB repository how does the view model works right and anything like that for example cyclerview make sure that you watch those videos first then you come to this project video because it's uh quite a big project not very big but as the basic or the initial level it's a good project to start with so I hope that you guys have understood everything right but still if you have any doubt you can always come to a Discord server on weekends I try to come to the squad server and sometimes I'm not able to reply you on Instagram but whenever I guess the time I always make sure that I do reply on all the messages that I get on Instagram or the doubts that we have in the comment section due to some busy schedule I the response might get delayed but I always try to give it on time so if you guys have understood the code and you like the video don't forget to hit that thumbs up button and in case you're new to this Channel and want to watch similar tutorials I'll be posting the projects tutorial in the upcoming videos make sure that you join our family and tap on that subscribe button and also tap on that Bell icon that is their adjacent to the Subscribe button so that is pretty much everything for from my site in this video so see you another video bye foreign [Music]

Channel: Foxandroid

Views: 46,202

Keywords: notes app using kotlin, android studio, clean architecture, mvvm, kotlin, notes in android studio, simple notes app, android college projects, notes app, notes application android studio tutorial, 2022, 2023, how to create notes app in android studio, android development notes app, note app android studio, android notes app kotlin, notes app in android, notes app in android tutorial, foxandroid, notes app using room library, android notes app development, note app, crud, room librar

Id: 8_u4EOYShgo

Length: 114min 29sec (6869 seconds)

Published: Sat Oct 29 2022