Mvvm Movie App in Android Jetpack Compose part#3 GET Movie Details.

hello my friends and welcome back to the third part of the movie app I'm sorry because of the interrupt that we had between the second part and the third part but I should say as you know I'm Iranian I'm Persian and the 21st of March is Persian new year so it was our new year holidays and I had one week off and uh I had a short vacation and now I'm back to you to continue our work on this uh project and let's get started okay in the second episode we build this screen and by clicking on this button uh we can see the list of movies 10 movies should be available here in the uh home screen and now we want to manage the click event listener and by clicking on each image uh we want to uh be navigated to the details screen making a network call receiving data about the detail of the movie and display them in the details screen okay here I have the details screen uh file and inside of this file I have this composable and uh the whole uh codes regarding to design of this layout are here available and today I'm going to publish the source code because you were asking I wanted to publish it uh at the end when the whole application uh was done completed uh but today I will uh publish it in my GitHub and I will add the source code Link in the description of this video as well and the previous episodes don't worry you will have this uh totally inside the GitHub Source but at the end I'm going to show you how to set the data on the elements and I will uh let's say explain line by line or function by function here uh this uh screen uh I don't want to write the codes regarding to layout design because it's waste of the time uh we had a lot of different uh videos about uh making uh layouts using jetpack compos in my channel and you can watch them okay and also if you had any question about this you can write them down below in the comments and I will answer you don't worry okay so here we have this uh uh composable the details screen and let's go to the nav house and start with adding this composable here uh in the nav host okay here is the home screen I'm going to change it to details screen and uh the details the screen doesn't need this nav controller and totally let's delete this and details SC screen sorry details SC screen okay but here we need an ID uh each movie that we are receiving in the home screen has an ID and when we are clicking on specific uh poster of the movie we know already what is the ID of that movie we received it so we will pass it to the details and by using this ID we will manage a new network call so uh here we have to uh pass this it let's go to the home screen and manage the uh click even listener okay here is the home screen and lazy vertical grid and as you can see we have this composable for a single item of this lazy vertical G control and click on it and here we have uh item UI so as you can see here on the card we have a clickable and it's empty so we have to write the codes uh to use the navigation to go to the next screen so I'm going to use this SV controller here do navigate and we need the road so we had the Tails screen we had a space here or not let's check the nav host yeah we had aace here and it should be like that it's okay and at the and a slash a dollar sign bracket and uh here we had this list so we should take the ID from this list so um movie list dot not do the item index should be passed here item index and now do ID the first thing that we had here okay so we extracted the it and passed it to the uh Road in the nav host and now in the nav house we have to extract it and transfer it to the details screen uh you remember how we did it in the previous videos that we use this function so here a bracket and here ID and then here a comma in the next line uh [Music] argument what's wrong today arguments list of and now argument we need a name and the name is ID and here type equals to nav type integer type this ID is integer number let's line up everything okay so we extracted the data put it inside it and now we can use it here uh okay so it dot arguments this it is this uh return function of this block and this block belongs to this composable so the ID through this variable goes here and uh you can change it to whatever you want for example ID yeah and inside of it you can use ID okay ID argument dot get integer and passing the key the key is ID again n check and Dot let so if we had a data we are going to use it here so uh again ID maybe one which is the return function of this let block and if we have any value Val inside this ID this value will be passing to this bracket and sitting inside this variable and now we can cut this and paste it here and ID one we'll go to the details screen okay so inside of this details screen now here we have a value for this uh ID and we can use it let's go to the API interface to manage our Network car okay here inside the interface we had this suspend function for the next uh network uh sorry for the first uh Network call and we need another suspend function again with uh get annotation for the second call which is the uh details Network so here we can use the end point regarding to the details movies and here we should pass the ID so movie underscore ID uh okay we have it here so suspend function uh get Det details by ID that's a good name for this and here we should pass this ID to the end point so we need a path and the same name that we have here we can copy this and paste it here and outside of it we need to pass the ID which is integer type and finally we will get a response and this response goes to the details what is this details this is this data class and we had it uh in the first video I showed you uh the all of the data classes that we need for this video it's here okay now let's go one level higher than this API interface which is the repository and this repository is connected to the uh view model so the same here we had one suspen function for the first Network call and we need another sus function and for the second network card get details by ID and inside of this bracket we should pass the ID here so ID integer integer and response goes to details like here we have a Lambda and inside it we will receive a return soit instance do API dot get details by ID and the ID equals to this ID okay here everything is done and uh let's go to the movie view model here we have our view model down below we had a data class and here we had in like to manage the first Network call we can cannot use this uh block because it's not uh something like opening in the startup and uh we want to have it based on click of the user clicking on the item so let's create a function again get details by ID [Music] and V model escope dot launch because we want to call um susp functions and we need to use the Cod so you can use TR cat and here catch exception let's leave it empty for now in the next video we will manage the error handling here equal to repository. get details by ID and we have to pass the ID here uh we need a variable for this to uh store the ID inside it and let's create it here a variable ID by mutable integer state of zero it never stays uh constantly at zero but it's uh like uh a default value that we had to we have to set on this um anytime that we need this ID and we are uh using this ID it has a new value that user sends to it by clicking on one of the movies so we will never get error by this and ID equals to ID okay now we passed the ID to the repository and the network call will happen the response will sit in this response and we have to righted so here if response. is successful we are going to extract the date here inside this data class we need another variable uh let's call it details data and [Music] just like this this is our data class and uh we are passing this receip data to this data class okay uh finally here the data class State equals to state do copy and inside of this copy details data equals to response. body with n check Control Alt L line up everything and simply we receive the data in this response and we pass it to this details data here and we can use it now through the data class wherever we want we just need to call this function to launch the process and we are doing it inside the details screen let's go to the details screen and here on the top you need some variables uh okay one of them is the view model view model equals to V model not this but [Music] this and parth that's it here in the next line uh let's uh pass the ID into this view model so movie view model dot ID equals to ID and in the next line let's uh call the function to launch the networker so movie view model. get dot get details by ID and uh let's tell you something you can also pass the ID here as well and uh inside of the movie view model here add a variable like ID integer and use this ID here simply but I prefer to have separated uh variable here let's click contrl Z to have the thing that we had okay so the network call is done now and we should extract the data so we need another variable for the state equals to movie view model do estate and last but not least value calling it details equals to state do details date okay all of the data that we received is inside this details now let's check it okay here is the banner screen clicking on the get in we have the movies let's click on one of them and here we have the details and everything works like a CH now let's uh see what do we have inside this details screen uh we are using the PO of the movie uh has the background and as you can see on the top it's shiny on the bottom is uh like darker and in the very bottom back side of this images we have a box uh with dark gray color and in the foreground we have another image the same of the image on the bottom it's uh a box with dark color and on the top is light color so we have a gradient vertical gradient uh let's start with with these two images let's see what do we have totally we have a box and the the alignment of the objects inside the box is top center field Max size inside of this box we have some functions and finally a column a text and some more functions are here we have two functions for background poster and foreground poster let's go to the background poster here down below we have it we pass the details data inside it we have a box here inside it and the box is fil Max size the background color of the box is arur because here uh the image occupies the part of screen depends on the size of the image and down below the rest of the screen should be a color compatible to the images so I choose the dark gray then we have the async image normal image uh this is the variable inside the data class the poster that holding the uh image so it is do that poster and here as the content description I use the title of the movie because we need a string value only in a modifier fi Max withd and the Alpha V is uh 60% we don't want it to be shiny like this foreground image then on top of it we have a box the box has a vertical gradient I use the brush and two colors on the top transparent on the bottom dark gray so from the top to the bottom it goes from transparent to dark gray and the shape of it is rounded Corner shape and that's it for this uh background post then here we have the foreground poster we use everything almost the same we have a box for the whole image with this sizing and with the rounded Corner shape and inside of the box we have a sync image again we use the poster and the details and the sizing is like this now on top of this we have a box and the same brush for the background color and vertical gradient but here I used two times transparent and one time this color let's click on it and see it it doesn't open I don't know why as you can see it here it's a let's say something like here a very very dark gray so down below is dark gray in the middle it's transparent on the top it's transparent and it goes from bottom to the top from this dark gray to the transparent and the result will be this image let's go to another movie with uh like white background now you can see it here clearly on the top is totally white on the bottom is dark gray and goes to the top something like that and here is like this okay let's go back to the first example uh that was everything about these images and now on the top we have a text let's go to the top again okay background and foreground is checked and we have a column now and this is the sizing of the column and the arrangement of the items then we have a text this text belongs to this Title Here the Sha Shang Redemption for this movie and down below of this we have a row and for this I've uh created a composable called it rating I passed the details and a mod to it let's go to the rating in the rating I have a row inside of the row I have icon text a spacer icon text a spacer icon text so simple icon text icon text icon text and between them we have a space then down below we have uh something similar to this so here we have icon we have a text and we have another text icon text another text so I use uh another composable for hold this let's go to the top I've created a composable called the text Builder I passed one icon to it one title and the uh data from the uh website from the API provider and again here I've repeated this uh function I passed another uh icon another title and here the actors and let's see what do we have inside we have a row inside of the row we have the icon and we have a text for the title and down below of this row we have another text for the body of the [Music] [Music] [Music] l z row and pass the data into it and display and that's everything for the detail screen and totally everything about this uh part of the movie app and in the next video uh we are going to manage the pagination and the error handling I hope you like this video and that was useful for you if you are new in the Channel please hit the subscribe button and the bell button to be aware about the new videos If you like this video give it a thumbs up and if you have any question please write them down in the comment box and I will be so happy to read and answer thank you very much have a good time bye-bye

Channel: MkrDeveloper

Views: 372

Keywords: Mkr Developer, jetpack compose Mvvm Movie App, Mvvm Movie App in jetpack compose. Android studio | Kotlin, Mvvm Movie App - jetpack compose, android jetpack compose Mvvm Movie App, Mohsen mashkour, android jetpack compose, jetpack compose, Jetpack compose in android kotlin, jetpack compose mohsen mashkour, clean architecture, jetpack compose tutorials for beginners, android studio, pagination, pagination in compose, Mvvm Movie App, paging3 jetpack compose, android movie app, mvvm

Id: FxB2dZMUKco

Length: 30min 17sec (1817 seconds)

Published: Fri Mar 29 2024