#2 Android MVVM Architecture Tutorial - Project Setup

Hi Everyone! This is Belal Khan and you are watching Simplified Coding. Welcome back to the MVVM Course and in this video we will do some basic things that are needed for every project. And we will start by creating a new project. So open your Android Studio and you can see I am using the version 3.4 and here I will start a new Android Studio project with an Empty Activity. Then you can give your application any name, I will give it MVVM Sample App or you can give it any name that you want. Now this is the location, this is the package name, make sure you select the language as Kotlin and you should mark this option which is use androidx artifacts and it is nothing it is just an improvement of the android support libraries. So once all the things are done click on finish to create the project and now you need to wait until your project loads. Once the project is loaded you need to add all the required dependencies for this project and we have so many dependencies for this project, so let me add it. To add dependencies you need to open your gradle scripts and here inside the build.gradle file which is your module: app build.gradle you need to open this file and inside this file, inside dependencies block we will add all the dependencies that are required. So we need to use these dependencies, the first one is the Retrofit and GSON and it is the networking library and we need to use it to consume our RESTful API. Then we have Kotlin Coroutines and it is a library for writing asynchronous code easily in our project. And I will explain about it in the coming videos as well. And then we also need to use ViewModel and LiveData then I want to use the new Material Design so that's why I've added the new Material Design dependencies. Then we have kodein which is the dependency injection framework and if you don't know about dependency injection then don't worry we will cover this thing in the coming videos. And then we have the android room dependencies and I have already separate tutorial about android room you can check that as well. Then finally we have the dependency for android navigation architecture. So these are the dependency required for our project. So we have added all the dependencies but for room and navigation architecture adding these lines are not enough we need to enable kapt plugin and we need to enable the safe args plugin for our navigation architecture. So we will do it here at the top. So we have added apply plugin safe args and apply plugin kotlin-kapt and lastly for our android navigation we need to add the navigation classpath in our root level build.gradle file so inside gradle scripts we will open this file which is build.gradle project and here we will add the navigation architecture classpath.

And don't worry you do not need to write these things or remember these things you can just copy and paste from my project the link to my project is given in the description of this video, so you can check that. Once everything is added you need to sync your project. So dependencies are added now we need to enable data binding for our project and to enable the data binding again you need to come inside your app level build.gradle and inside this android block you need to write databinding and you need to make it enabled equals to true. And this means data binding is enable for our project. We also need to enable the data binding compiler and to enable this thing you need to open your gradle.properties file and inside gradle scripts and here you need to write android.databinding.enableV2 and you need to make it true and make sure you write it like this, exactly like this and then again sync your project and now everything is done. Now the next step is I will create packages to organize my code. So this is the main package and inside this package I will create two packages.

The first one is data and the next one is ui. Inside this ui package I will put my MainActivity by dragging it inside.

And then we need to do the refactor that's it. Now inside the ui package I will create two more packages and for every screen here inside the ui package we will create a separate package in most of the cases. So first let's create a package for our authentication screen. So I will create a package and I will name it auth. And inside this package I will create all the screens related to authentication and basically we have two screens related to authentication the first one is user login and the next one is user signup screen or register user screen. And I will create one more package and inside this package we will store the home screen where the user will come just after logging in and I will put this MainActivity inside this auth package and I will rename this MainActivity to LoginActivity. So right click go to refactor and rename and rename it to LoginActivity. Then I will also rename the respective layout file which is activity_main and I will rename it to activity_login and whenever you want to rename something make sure you do the refactor, so right click refactor and then rename and here we will write activity_login, that's it. Now inside auth package I will create one more activity and it is the user signup activity so right click on auth go to new select Activity and then Empty Activity. And I will name it SignupActivity or you can name it anything that you want, finish. So now, in our project we have two activities one is login and the another one is signup. import this R. Now we need to design these activities and again I will not waste the time on designing the activities but I will do the copy paste because I have already designed the activity and you can get my source code from the link that is given in the description of this video so you can copy my XML code or if you want you can create your own design.

And for designing the layouts, first I will paste some drawables in my drawables folder which is inside the res folder and you can get these drawables from the link that is given in the description of this video. And if you want you can create your own icons as well. So I will copy these drawables and I will paste it inside my drawable folder. So I have some icons and some background now I will go to the layout file of my login_activity and here I will design the login screen. And actually I will copy paste the design, so you can see our design is ready.

First we have a coordinator layout and inside this layout we have relative layout, we have some images, text views, edit text and button. So it is a very simple layout that you can design on your own as well. Now I will do the same thing to design the signup screen. So let's do it very quickly. So we have the signup screen as well. So both the screens are ready and one thing I just forget is I need to change the theme of my application. So I will go inside values and styles.xml and here I will make this DarkActionBar to NoActionBar and this time we will not use this AppCompat theme but we will use the new Material Design theme and to do this you need to write here MaterialComponents instead of this AppCompat. And the theme is changed and then I will also change these colors for my project because I have already designed my screens and I have already decided the colors.

So open colors.xml that is inside values folder and if you want to create the same design as mine then you can use these colors. Now come back to activity_login and you can see this time we have the new material design theme. Now we can also run our application, but right now it is just the design. So you can see this is our application the design is not very good, because our focus is to learn the MVVM architecture and not the UI design. So that's all for this video friends.

In case you have any issue you can let me know in the comments and please like this video if you want the next video to be published soon. And don't forget to tell your friends about this channel and this course as well. So thanks for watching everyone this is Belal Khan now signing off. .

Comments (0)

No comments yet

Leave a Comment