Notes App (MVVM + ROOM Database) in Android Studio using Kotlin | Part 1: Prerequisites & XML Design

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 our 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 20231 point1 so first there will be a blank screen if no notes are available but if there are nodes available then it will display in a recycler View using staggered layout for that we will require an adapter right then notes will 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 note 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 feature will be handled in home fragment got it now let's create it choose empty 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 needs 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 Gradle as we'll be using room database and view model so obviously we will require its 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 dependencies and plugins from here to here and then this is for navigation and this is for KSP codan 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 friend hence only copy paste what is necessary like we will require kscp paraliz and safe arguments then scroll down here add data binding as true done then copy paste all the dependencies as it 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 men 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 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 as 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 Noe 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 packages and fragments so that we can design it so first package is adapter where recycl 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 frag 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 add 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 important parts as we'll be using data binding so opening will always be with layout then important things are IDs this is faap to add a note whose IDE is add note Fab with add icon then a recycler view to display notes whose ID is home recycler View and then a image view 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 popins font otherwise you will face error then to edit text one is for note title whose ID is ADD node title and second one is for Noe description whose ID is ADD node description and that's it next go to fragment edit note here everything is simp similar to add note layout except IDs and Fab this is edit node title then edit node 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 B to linear layout then a text view whose ID is note title for displaying the title of the note and and another text view whose ID is note description for display 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 W 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 a na host fragment as well which will help us to navigate from one fragment to another fragment and for that we will require Nave craft 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 edit note 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 note fragment it will save the edited note in the database and instantly navigate the user to home fragment so create a path for it to and done 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 prerequisites 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 follow us on Instagram or join our telegram group Link in the description box so yeah that is it for the video If you new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 3,174

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: u_hWbS-iHj0

Length: 16min 17sec (977 seconds)

Published: Fri Dec 15 2023