MVVM Pokédex App with Jetpack Compose - Android Studio Tutorial - Part 1

hey guys welcome back to new video in this video we will start with our pokedex mvvm app that i already tested on my instagram in case you missed that it will be just an app that makes use of an api a public api you don't need an api key for that you can just directly use it as it is and this api will retrieve all pokemon that are out there as a list and we will just make our very own pokedex app out of that all of that we'll use jetpack compose i recommend you to watch my jetpack compose basics playlist first because i won't go super in detail here into the single composed components at least i won't explain anything in detail that i explained in detail in that basics playlist so on the one hand this project purpose is to have fun most importantly but on the other hand you will learn how you can make a real app out of jetpack compose that uses mvvm that uses viewmodels repositories and api and just how you can structure that in a solid way to actually make an app that looks pretty good i know my apps back then looked pretty bad but i am improving as you can see this looks better than my first steps i even published here on youtube and by the way you will also learn how to do pagination here so you can see it loads i think 20 pokemon at once and then it stops loads the next ones and so on and let's say we want to view a specific pokemon like this one then you can see that is the detail view we have an animation here for the base stats we can see the weight of the pokemon the height the types and the name and the number of course and we will also auto detect the dominant color for each pokemon to actually choose the background color so this fire pokemon has a different background color as this grass pokemon for example so just depending on what the dominant color of a specific pokemon is we will choose a different color you can see even though that's a bug pokemon it has the background that fits to the pokemon's color what you need to do now is you need to take a look in this video's description and download this project here from my github repository so let's actually show you how that works um this is actually the api we will use pokeyapi.co you can experiment with that here but as i said you don't need to register here you can directly use that api and i will show you how you can do that let's actually visit my github very quickly you will see here is this jetpack compose pokedex repository that i will link in this video description you want to be sure to be on the master branch which will just contain the initial project setup for this project and then you can either copy this url here you go to code click copy go to android studio canary version that's important because right now compose is only available for cannery if when you're watching this video it's available for stable then you can of course also use stable but right now it isn't you want to go to file new project from version control and simply paste that url here for my github and android studio will automatically import my project on your machine so what this initial project contains are just a bunch of colors as you can see in this color.kt file i don't think i need to show that here on youtube how i constructed these colors which i think just fit to the different types for the pokemon and the different stats then we have our standard type file where i just added a font family i will use roboto and roboto condensed these two font families um here we can just create a typography with that this is actually nothing special here and you also learnt that in my basics playlist so in the end we can then construct our theme for the application we can construct a dark color palette and a light color palette to just have different colors for dark and light mode so here in this jetpack composed pokedex theme we just get a variable whether the current app is in dark theme or not if so we will use the dark color palette and else the light color palette and then we will construct the theme and then i added some vector graphics here in our drawable folder which we will use i added the font roboto here in our font folder and that is actually it um yeah so that is basically just what you get with this initial project of course the dependencies here in our build.gradle module app file we just have some basic jetpack compose dependencies here on the one hand for all the icons we can access with jetpack compose we have a dependency for jetpack compose together with view models we have one for navigation compose so just to be able to set up a navigation graph in jpeg compose basically the jpcomposed version of navigation component and that is also what we will start to implement in this video constraint layout i'm not sure we actually don't need this um i'll still leave it in we have retrofit for making network requests to our api timber which we will also probably not use just for logging um crew teams to just well make asynchronous network requests we have coil for loading the images from the network and it's also not that trivial to load images from the network in jetpack compose that is why i included this google accomplish library which just comes with a composable that makes use of coil and loads an image from the network into our composable and finally dagger hilt for dependency injection you already know that if you know the playlist from my channel if not then it will get clear in this playlist and finally we have the palette library which is used to just determine the dominant colors of an image which we will just use to choose a well fitting background color for a pokemon and i can really only suggest you to use the same versions of the dependencies that i use especially those that want to be updated here don't update those because right now this wouldn't work of course depending on when you watch this video there will be newer jetpack composed versions newer versions of all these dependencies but if you like to finish this playlist without crashes and without frustration i really recommend you to just get this project from my github and don't change the dependencies but that is actually it for the intro here now we can finally start to build our app i will start in our main activity because here is the entry point for our application you can see this is already here wrapped into this jetpack compose pokedex theme which just makes sure that everybo everything that comes in here uses our theme colors if we specify that way of course and all we want to do here in main activity is we want to set up navigation so we want to have a nav host here which is just the container which contains our different screens and is basically responsible for replacing these when we navigate to another screen so before when we use navigation component for android using xml layouts we needed to define a nav graph we needed to define from which fragment we can def we can transition to which other fragment all that is not needed anymore instead we just defined this nav host once and every single screen of our app will be a composable and we just tell this nav graph that we define here which different screens we have and then later in our app we can just transition to these screens that's super simple so let's actually get started we want to first get a reference to our nav controller you will know that from navigation component we also had that here in compose we can get this with remember nav controller so this will just give us an instance to this nav controller and with that we can later then perform the actual navigation we will pass that nav controller to all of our screens so we can also access it from there and then as i said we will have a nav host here that nav was composable which will take our nav controller instance and it also wants a graph from us but we won't give it a graph instead we also have a second option of passing the start destination which is a string here so in xml layouts we had to pass ids for a specific destination and navigation component now in jpeg compose we just have strings so we can just give our single screens our own names and then say okay we want to transition to the pokemon list screen or we want to transition to the pokemon details screen those are the two screens we will have here another start destination the first screen that will show up in our app is our pokemon list screen and then we can open curly braces here and i will actually move that into the next lines to format that a little bit so you can also see that better now in this nav host block we have the option to specify so-called composables here so that is just a composable as a normal function that is not really composable but with that we can define our single screens basically in our app so now we just give the screen a route so we say okay that is our pokemon list screen we could also pass arguments here for that screen deep links and so on but our very first screen does not need that and then now inside of this block we just put all the composables that we want to have on our first screen on our pokemon list screen and you can see that it's super simple now with compose we don't need to create any xml files anymore instead we can just say okay composable and inside of that we will have composables that describe our actual screen and because we don't have our pokemon list screen composable yet i will leave that empty for now but i will create another composable here which will be our pokemon underscore and detail screen so that will be the screen when we click on a specific pokemon to see its details and for that screen we actually need arguments so you will also learn how we can do that because when we click on a pokemon then we need to pass the name of the pokemon we clicked on to the detail screen so we can actually make the api request in the detail screen um to actually know which pokemon we want to request data for and we also want to pass the dominant color of the pokemon so we can also assign that in our pokemon detail screen and we don't need to calculate that again so we can specify a list of arguments here you can see arguments is equal to a list of named nav argument and that is what we want to do and here we can now specify a list of such arguments so on the one hand we have a nav argument which is called dominant color you can see then we have access to a builder in which we can configure that argument and here i just want to set the type of that argument to nav type dot int type so we just say okay the type of the domain color we pass is just an integer here you could specify even more here if you just type this start you can see a default value you can make it nullable but we are just fine with using this type here and then we will have another nav argument which will be called pokemon name and that will have the type nav type dot string type because the name is of course of tab string and now you might also wonder how we can actually pass these arguments on navigation because we cannot simply pass these as arguments for a function instead what we need to do is we need to treat this route similar to a url so we can also give this route just path parameters just as a url using a slash curly braces and in here we specify the name of the parameter so dominant color another slash and curly braces and here we specify pokemon name and then later when we navigate to that route we can simply say okay our navcontroller.navigate and then we pass this string and we just replace this dominant color with our color and our pokemon name with our actual name and our navigation library will then just extract these arguments here inside of our composable block and we can get these using val dominant color for the color is equal to remember here we can get the color by using it dot so it is this nav backstack entry here with which we get access to the arguments so it.arguments meganellitech.getins because our color is of type integer and here we specify the name of the key which is dominantcolor and because right now that is just an integer and not in form of a compose color we want to also wrap that into such a color object so all we return here is if the color is not equal to null so we use a lot block and then we want to return this compose color so color class from android x compose and here we can pass our color as integer where we can pass it and if it is equal to null we just want to use white as default so just color we can just use color.white i think yes and we can do the same for our pokemon name it's equal to remember i don't think we even need to remember for this one um for the dominant color we had quite some checks here so we can save the result of that with remember so we don't compute that every time on recomposition but for the pokemon name we don't have that i will still use it it's definitely not bad so in here we can just say backstack we don't gave that a name it dot arguments dot get string this time and the string is pokemon name and then down here we would just put our composable for a pokemon detail screen we would pass those two arguments and then we would have have access to that in our composable actually and that is already everything for navigation here that is super simple now so even though i explained quite a lot here we didn't take that much time to actually implement that it's really just this nav host and these composer composables which just define our single screens the second thing i want to implement in this video is our dagger hill setup just a basic setup to be able to inject dependencies on the one hand before i forget it i will annotate this main activity with add android entry point which is just a dagger hilt annotation to tell this activity okay we want to be able to inject something into this activity and then we need to create an application class next in our root package new kotlin class of file called pokey dx application yes i want to add that to git we inherit from every click application and annotate this with health android app so this basically just marks this as our application class for dagger healed so that your health has access to our application context and things like that then in case you want to use timber here you can override oncreate and just use timber dot plant we want to plant a debug tree which just initializes timber here nothing more nothing less then we need to remember that we need to add this application class to our manifest file so let's switch to that go inside of our application tag and write a name and pass our pokedex application and finally i will create a di folder for dependency injections so in our root package new package di and in that package i will create a class or an object rather called app module when using dagger for dependency injection we need to define such modules in which we just define how we construct our dependencies so that dagger is actually able to inject these into our classes if you want to know how dagger hilt works in detail then i can only recommend to watch my full dagger hilt course here on youtube but other than that all we need to do here for this app module is we want to annotate this with module to just tell daggerfield hey that's a module and we have to install that module into the so-called singleton component double colon class so singleton component means that the dependencies that we have in our app module will live as long as our application does so all these dependencies in our app module will be singletons so here in our project that will just be our repository and our api instance we don't have that many dependencies here in this project but other than that that is it for this first part of this playlist i hope you liked it if so please give it a like leave a comment below if you want to see more advanced android currencies check out the first link in this video's description that you will find premium courses from me and those are also a way to support me and my work i wish you an excellent day and i will hope that i will see you in the next video again bye bye

Channel: Philipp Lackner

Views: 67,405

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, pokedex, jetpack compose, compose, android studio, ui, ux, design

Id: v0of23TxIKc

Length: 18min 50sec (1130 seconds)

Published: Sun Apr 25 2021