Mvvm Movie App in Android Jetpack Compose part#2 Navigation and home screen.

hello my friends and welcome back to the second part of the movia uh in the last video we buil together the retrofit setup and view model and this is the receed data now in this video as I said we are going to uh build the navigation uh structure and the home screen and the banner screen and will display this received data in the home screen let's get [Music] start here in the root package I'm going to create a new package and calling it navigation or screens or something like that inside it we need a new file and let's call it nav host and inside of the knv house we need a composable uh we can name it my nav navigation nav host whatever you want okay uh variable calling it nav controller equals to remember now control then enough h the controller will be passed here and the graph we don't need it we need to start destination uh here for the start destination I'm going to use the banner screen unfortunately I've chosen the wrong one this one has a start destination okay let's use this and delete this so now it will work uh okay um in the banner screen we need composes and two of them we need in this stage uh one of them for the banner screen and the other one for the uh home screen so let me copy and paste this okay uh now here we need to call uh the screen files and passing the enough controller here okay not here uh let's create uh here a new file F and calling it Banner screen and here let's cut this and paste it here okay the same for the home screen here new file and cut this and paste it here okay let's go to the banner screen and start creating the design but before that in the uh main activity I'm going to call this navigation so when I'm calling this navigation uh simply we will be redirected to this function and it says that the start destination is Banner screen so after opening the activity we will see this Banner screen now let's create the banner screen let's see what we had here we have a background picture here and on top of it we have a column in the column we have a text and a button but as you see we have this Shadow color uh down below this uh text and the phone f is not the default font and here we have a border all around this button and you can see it has gradient color so part by part we will implement it let's start with the background so now we have this uh background image on top of it we need this color okay here we have the Aline because we want this column to be down below of the screen and as you can see it has a transparent back ground so here uh I set color white and the alpha uh 40% so the result will be this and uh we need to make it rounded corner [Music] shap okay in this column we need one text and one button let's start with the text okay then the font family we need to add this font family and let's go there to the resource manager font plus more fs and here I'm going to search for it this one uh uh to the project okay this is the phont here uh let's call it okay that's was everything for the text and now down below the text let's have the button un click should redirect the user to the home screen so nav controller dot navigate to the uh home es okay uh then let's customize the button after on click comea modifier [Music] a padding uh around the [Music] bottom 55 dot DP left or maybe start uh 20. DP and from the and 20. D then we need uh F Max w we need a background color uh the same as here in the back just like this but we can choose different colors for example and in this case let's have gray for example and here8 F and 16 okay then we need the border the Border let me create for the Border we need uh the thickness 3 do DP and uh here we can have now uh this truck and the shape and the color as well we can have in the middle of it so uh sorry I for good border struck and inside of it we can have a border struck and a color so here uh 3. DP and now we need a either brush or a color so let's have brush here I'm going to create a variable containing four colors to use it for the border of this button like here the colors that we have in this photo uh a value calling it linear gradient brush equals [Music] to brush dot linear gradient and four color let me add them uh what else we need we need a start offset and end offset so here uh the start equals to again offet we need so flot positive uh infinity to 0 f from the infinity positive to 0 f and the end will be from 0 f to uh negative Infinity reverse of this then the end offet uh z f [Music] to plot negative Infinity okay let's have the comma here and delete it from here and it will make it beautiful and now here I as the uh brush of the button I'm going to add uh this uh linear gradient brush so we have the border stru now and the shape of it will be rounded Corner shape and 16. D okay here everything is done and uh uh we should change the color of this button because we are giving a background here and we don't want the default blue color so let's change it to uh transparent okay so here colors button default dot button colors container color will be equal to color do transfer and that's it okay inside of it we need a text and uh that's it let me copy and paste the text and I think we are done here let's check what do we have uhhuh no value password the modifier what there let's have it here okay here we have it uh the font is a bit tiny so let's change these two B and down below for the button there is no font weight let's add it now let's Che it again okay it's good now and clicking on the get in uh now we are in the hom okay and everything is done uh we need just to uh make this status bar hidden later we are going to let's go to the home screen and uh see the details okay let's check the test app here we have a top bar so we need a scaffold and here we have the cards and that's it let's create a scaffold and okay uh here we have a scaffold inside of the scaold we have a top bar and we have a composable for a top bar and here I'm going to to add the uh top [Music] up uh we just need a text here you can customize it uh I just wanted to have a name of that application or something like that like a label on top and that's it uh we don't need anything else here uh now we want to display the data on this lazy vertical grid so uh let's have it actually feel Max size and the backround color will be transparent okay the lazy vertical grid uh uh for the content uh we need to uh do whatever we have done here there as so let me copy them and paste them here so uh you have items and state DOT movies dot size and the composable uh we need to pass uh the list this estate. movies into it and the index so uh equals to it then and finally enough controller to navigate to the next screen which will be the details the screen and later we need it okay we have everything here and uh let's create this card we need a card inside the card we need a box uh background of the Box will be this uh image and in the foreground we will have a column a text on the top a row on the botton and in the row we will have icon and [Music] the IMDB rating if you can find uh anything any Vector regarding to uh IMDb rating you can uh change it with this store and we need the same style that we had uh in the banner uh the text style we have created here uh this one with the Shadow and everything and uh let me copy and paste this okay the text Style with Shadow the color orange offset will be 1 F and onef the radius below 3 and uh this then here we need a spacer modify height will be eight DPS and yeah this we need a row is modify align uh [Music] alignment dot end okay here we need icon icons dot rounded dot the star image Vector okay and down below we need a text uh to have the IMDB rating let me copy and paste this text because it's not such important thing uh the only thing that we need is uh estate mov list do item index IMDb rating text align the start and you can see the rest okay I think we are done here let me check it on the emulator get in movie up and uh 10 uh movies okay so this is only the first page uh and we have 10 moves uh you can customize the color of the icon and you can see the mark text is here and it works and the shadow orange color around the text and that's it we just need a background here and we have to implement it on the uh on the navigation it should be inside the main activity because in the test app let me show you here we have this gradient color back okay let's go to the banner screen where we had this copy this and let's go to the main activity in the main activity here let me paste it uh and let's have a box here F Max size dot background and linear gradient brush as the background here uh [Music] finally we are going to take this navigation inside this box okay now let's go to the uh home screen again here uh we had this scaffold where is the scaffold here okay let's check the content after the content here uh comma and uh container color will be transparent so col do transparent the same and uh let's Che it okay we have this uh background but uh on the top uh the background of this top bar should be transparent as well uh let's do it where is this STP bar here uh colors uh top up or default dot top up our colors container color uh we don't need it fully transparent so uh let me add the color maybe white to it and do copy uh 70% let's check [Music] it okay uh it works and if you want you can make it maybe for uh later we'll uh check it again okay here we just need to remove the status bar and uh everything will be done for this video uh here in the main activity on the top uh we need to add uh window comat compad and uh sorry dot Set uh Decor FS system window and window dot uh not fora FSE okay and window. set Flags Window Manager do uh layout pons do lag underscore layout and no limit comma let duplicate contr D and that's it uh buy this four lines of code you can uh remove the status but let's check it now okay there there is no status for and uh this background is okay that was everything about this part of the movie app and if you like it please give me a thumbs up if you have any uh comment write down below in the comment box I will be so happy to read and answer if you are new in the Channel please hit the Subscribe button and the bell button to be aware about the new video and thank you for your time thank you for your support have a good day byebye

Channel: MkrDeveloper

Views: 858

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: pzSWTNK9h7M

Length: 41min 29sec (2489 seconds)

Published: Fri Mar 08 2024