MVVM in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn about mvvm architecture in Jetpack compost we have already covered mvvm so the concepts are the same in Jetpack compos also only a few changes while writing the code still let me give you a quick explanation about amphibium so amphibium stands for model view and model the model consist of the data The View displays the user interface and view model acts as a bridge between View and model for communication purposes basically the logic got it it is recommended to use an architecture because the apps that are created using emium architecture those apps logic and UI are separated from each other which makes the apps easy to test easy to maintain and more organized now let's understand it through an example so usually MVM examples are quite a big project which of course we will cover in upcoming videos but for now just to clear the basics we will understand it through a simple example okay I'll be creating a counter app in which there will be a button and a counter text so when you will click on that button the count increments simple now there will be two situations in the first situation we will create a counter app without using mvvm and in the second situation we will create the same app using mvvm so let's see the first situation without using mvvm first let me remove the default code and then now create a composable function as counter and then make sure to call it here inside the set content there will be no fancy UI or fancy code just simple Logic for the counter how do we start first we need a variable that will increment or that will be a count value right so create a variable as count by remember whose mutable State off is zero import State get value and also press alt plus enter to remove the error I have already explain remember and state off in detail in one of my previous video you can click on the IE button to watch but in short I will say we add mutable State off and remember to those variables whose value are capable of change in future so the count will increment means it will change in future hence we have used mutable state of got it then a column layout inside it a button whose on click will be count Plus+ means whenever the button will be clicked the count will increment next the text ad will be displayed on the button will click me and the last thing is to display the count through a text so create a text as the counter value with the dollar count variable this is where the count will be displayed and that's it our counter app is ready without using MVM let's see how it works okay if I click on click May button look the count is incremented by 1 2 3 4 and 5 great the app works perfectly fine then why is there a need of mvvm I'll show you why so if you rotate the screen the count goes back to zero that's not fair let's try again so again I increment the count till three and again I rotate the screen look it again went back to zero now imagine the same situation with a game app like you have created a game app without using mvvm so you are playing a game and suddenly you rotate the screen and the entire game starts from the beginning awful right hence it is recommend to use an architecture like mvvm now let's see the second situation where we will create the same app using mvvm we will go step by step step number one one add a dependency here we have multiple types of dependency for view model go for view model compose you have to Simply copy and paste the dependency with its version but I am using the latest version of Android Studio eona where there is a concept of version catalog so you can directly write the dependency this way lips library in which we have life cycle view model compose got it click on sync now and done but if you face an issue then add this both lines in version catalog and try again now in Step number two we will going to modify the code so in mvvm we have three components model view and view model let's start with view model so I will create a separate cing class for view model I'll name it as my view model okay now I have to inform the compiler that this class is a view model class so how do we do that by extending the view model class then inside it I will create a count variable and below it the logic then logic is the same only count Plus+ but inside a function named increment counter and then let me explain it's a very simple project so we don't have any big database or something just a simple count variable that is a data and that is our model also and this logic is our view model so the model and view model are done now what is remaining view so come to main activity this button and text are UI means our view now let's connect our view model with our view so how do we do that by calling my view model class here inside the counter function and then then as the data is moved to view model hence remove this and then logic is also moved to view model so here instead we will call the logic function that is view model do incre ment counter and here the count variable from The View model and then now let's run the app and see okay so if I click on the button the count is incrementing perfectly but here is the real test so when I rotate the screen and look at the count value as it is again I'll increment and rotate and perfect the count value is still the same now consider the example of the game app so if I close the game app or if I rotate the screen the game won't restart it is still going to be at the same place where you left off and that's the beauty of mvvm lastly as you saw MVM is the same for Jetpack compos as it was for XML only a few changes here and there otherwise it's the same also we will understand it better through a big project in the upcoming videos so stay tuned for that for now that is it for the video if you're 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: 615

Keywords: jetpack, compose, jetpack compose, what is jetpack compose, basics of jetpack compose in android, jetpack compose series in android studio, learn jetpack compose, create an app using jetpack compose, 2024 jetpack compose, android studio, new android studio, latest version, java, kotlin, create an android app, text composable, 2024, android in jetpack compose, mvvm, model, view, viewmodel, architecture., mvp, mvvp, learn mvvm, mvvm project, mvvm jetpack, mvvm compose, create mvvm project

Id: 57LBdPAnuLk

Length: 8min 15sec (495 seconds)

Published: Tue Apr 09 2024