Design to Code: Scrollable Cards in Jetpack Compose | Android App Development Tutorial

hey coders welcome back to coding Hub and in this video we'll be creating this cool looking application where we are basically having multiple cards and this card is completely scrollable after this in each of this card we are basically having this episode button a Netflix icon button a watch again button with this we are also having an image towards the right side now after that we are basically having this two text which are you know a title text and a description text and then we are basically having this card which is of color black right so we'll be learning how to create this cool looking UI using the things which we have covered till long which is basically text composable button composable and in this video we'll be covering card composable and we'll be trying to implement this cool looking application so let us code okay so what I have done is I have basically created a new empty activity compost project after this I will be basically removing this to you know composable I'll be also removing this greeting composable from here now what I have done is that I have basically you know taken a screenshot of the card and I have dragged it into paint so we can understand the structure now we'll be also keeping a note over here okay so the first thing was that we were basically having multiple cards right so one card after another card but uh we will be looking into that later uh let us focus into just a single card okay so if we look clearly you know we'll be finding out that you know we are basically having a card firstly you know this is our card let us suppose and in this card you know this card basically so we can directly say that we are you know having a card at start right and then we can see what we are basically having in this card now what I can do is I can split this card content into two parts so let us suppose we say the first part you know uh the first part is basically from you know this this part we can say so we can say this is our first part which is basically having you know this image this two buttons and this episode one button and then we can have another part which will be basically this one which is basically having this text you know now if we look into this two elements we can find out that they are basically you know uh represented in a vertical fashion right so we can easily say that we can store them in column right so after this what we will be requiring is that let us see each of this elements now of this column you know the first element which we can see is that we can you know separate this two things okay so let us separate this three button and this image separately okay so what we can do is we can simply say this three buts are inside one block and this image is in the other block right now if we see these two blocks you know they are basically aligned horizontally so we can directly say that we can store them in a rope right and in this row let us see what we'll be having as our you know uh as our first element so if we look clearly we can see that you know we can split this one also so we can say let us suppose this episode one button is in this box and then we can have another box which is basically having this two right and if we look into this we can clearly understand that they are in again in a vertical fashion so we can easily say that they will be in a column right and in this column we can simply say that we'll be having this button which is basically the episode button right and after this let us split this these two buttons also so we can easily you know we can easily say that uh this two buttons are basically you know uh we can say that that they are also in a row fashion right because they are arranged one after another in a horizontal fashion right so like this so what we can say is that uh in this episode button after this episode button the next thing will be basically our row and in this row we'll be having these two buttons which are basically you know the Netflix button we can say Netflix button and then we can also have you know another button which is basically the watch button right okay perfect now let us see what is remaining so you know in this row the second element you know which we were having was basically you know in this row the second element which we were having was the image so let us also you know uh align that one over here so we can say image right and then in this column the first element was a row right so in the whole whole thing so the first element which we have you know covered which was basically the ru and the next element you know we can easily see that they are arranged one after another in a vertical fashion right so we can say that this two texts can be stored inside a column so let us focus on this so we can simply say it will be basically a column and in this column we'll be basically having two text the first text will be a heading and the next text will be if you can see it will be basically a description okay so this are you know this is the structure which we will be basically having and then we can say that there are multiple cards so we consider this card as a you know as a parent so if we want you know multiple cards in a vertical fashion we can keep all of these cards in a column right so let us code right now okay so the first thing which we will be basically doing is that we'll be you know creating uh we can say a simple column okay okay so we can simply say column you know and in this column we can basically specify a modifier the modifier will basically you know help us with few things which we are currently wanting so we can save modifier dot we can say that you know take the maximum size so we can say fill Max size then we can give a padding you know a padding of maybe 5 DP with this we be also you know uh you know add the word vertical scroll effect because we are basically wanting that scroll effect right so we can simply say you know uh remember SC State uh so we can say that remember uh remember we can say SC State right and it will basically remember the scroll State now we can add this DP so we have to import this now we are ready with our column okay we can also do few more things uh like we can have the vertical Arrangement and we can say Arrangement or spaced uh you know we can have basically spaced around or spaced evenly as per your requirement we'll be using the space around for now let us bring them down so you know the readability can be increased okay so we are now having this things and let us create you know let us start by creating our you know the first thing which will be basically creating uh a function so let us create a function and let us say it is basically a composable function and we can simply say fun my card okay so let us say that and inside this what we will be doing is that we'll be calling this my card from here so we can simply say my card and inside this we'll be basically creating our card okay so when we look into the things right we find out that the first thing which we require is a card so let us create that card okay okay so we can simply say card and in this card we'll be basically using few of the things like we'll be using a modifier and we'll be defining shape and all of that so we can have a circular bracket come down and let us say we say modifier equals modifier and in this modifier we'll be basically giving it you know the maximum width we can say and with this we'll be specifying a height to each of this card so we can simply say something like you can say 300 DP I am randomly taking it it is completely up you now padding I can give it 5 DP let us suppose let them let us bring this down you know so the readability can be increased now after this what we can have we can basically have this comma Now in this you know the thing which we have created uh if we look into this card right so this card was basically having that rounded Corners right so let us let us do that so so for this we can simply do is we can simply say shape equals we can simply say something like rounded Corner shape and in this shape we can let us say the corner is of 15. TP okay now after this shape let us specify the color of this card because it was basically having that blackish color right so of which we have seen so it was basically having that blackish tint color let us do that so we can simply say color or we can simply say card default you know so we can say card default dot we can simply say card color and in this card color let us pass the container color and the container color will be basically color and I am having this hex code so it is basically 0x FF and the code will be basically 09 2635 okay and let us see what it is saying so it is saying import it let us import this and we importing this one and we are having this okay now let us you know let us run this code and let us see whether we are able to see the card okay so it will take some time for the grle build to finish till that time let us see what we'll be creating in the card okay so in this card you know we we can see that we require our column right and this column will be having two elements which is our row and then we'll be having another column right so let us do that so we have to create a column and then inside this column we'll be creating a row and a column okay so let us do that part so now it is installed and okay so now we can see this card right and it is looking exactly the same card which we have seen in the preview right so let us focus on the next thing uh till now what I will be doing is let us split this into a window minimize this okay now in this you know in this card what we were basically requiring we were basically requiring a you know our column right so we were basically requiring a column now the thing is that because this card scope is by default having a column we can directly write this row code and then we can write this column okay because we can see this is a column scope right so we can directly specify the row and then we can directly specify the column okay so let us specify the row and in this row we'll be basically using few of the things and it is basically that we'll be requiring a modifier we can simply say modify you know equals modifier you know and in this modifier what we'll be doing is we'll be specifying the height of the card or we can say you know the first thing which was basically having the three buttons on the image we can say 200. DP and after this what we can do is we can also have the remaining things like we can say take the maximum width you know with this okay now let us bring this down uh to increase the readability it is just upon you whether you you you want to do it or not now in this you know in this row we were basically you know having uh different things but for now let us not focus on this row and let us focus on the text part okay which was uh basically having inside a column so let us do that so we can simply say column and we are basically talking about this column okay over here this column which is basically having this two text okay so in this column what we can do is we can simply say vertical Arrangement and we can say Arrangement do Center and after this inside this column let us have a text which will be basically my heading uh text right so we can have a text any text let us suppose you know uh this is uh demo we can say demo heading right so we can say this is a demo heading and in this we can have multiple different things like we can specify uh color so we can simply say comma enter and let us say color and in this color we can simply say color. white so I want the text color to be white then we can simply say text align I want to align the text in the start towards the start so we can say text align do start you know and we can do all of these things now you will be knowing about this things because I have covered you know the entire text composable in a diff or we can say in a separate video so you can look into that part or you can look into that video if you don't know much about this uh you know text composable I have discussed all the basics now we can simply say modifier dot you know padding so let us give a padding and the padding which I'll be providing is basically toward the start and we can say start equals let us give it a padding of maybe 15. TP okay and then what we can do is let us say font size you know so we have to have a comma over here then we can say font size let us specify the font size I will be saying it will be 24. we have to import this SP okay after this we can simply say font weight then we can say fault weight do W okay and after this we can also give it a letter spacing and the letter spacing will be of 0. you 1 M unit we have to also import this one okay so you know let us come down uh we be requiring a comma over here so we have to come down okay now we can simply say font family let us use a custom font family which is by default provided like you know stive okay so we can use the S sa okay so we are done with this and let us see whether we are able to see this text okay so let us reun apply the changes okay so it has been launched into our device let us see yeah so we are able to see this text which is this is a demo heading right okay now let us create the next text which was basically uh you know the text which is basically having the description right so let us do that okay so we can simply say text and in this text let us say we can say you know it is a demo you know uh demo description something like that okay and after this what we can do is we can have a comma come down so we can have a comma and then we can come down let us specify the color the color will be again white so we are specifying the color which will be again the white color then we can say text align let us make the text align to start we can simply say text do align start now after this we'll be basically having the modifier for the padding so we can Simply Save modifier do padding and we can simply say start and let us give it a padding of 15 DP and then towards the end we can also say 15. DP okay we can do the same thing over here also if we want to so we can even say and equals 15 DP so it looks much you know better in in perspective of design it is completely upon you upon your preference then we can have a text overflow condition and this is you know something which I am providing because let us suppose the description is too long that we don't want the text to be overlap right so it'll be basically you know overflowing the condition which will basically you know give it give a dot dot dot at the end if the entire text cannot be shown okay so we can simply say ellipses now after this we can simply say font size and let us give it a font size of 12. SP and after this what we can do is we we can simply say font fate and let us give a font F of maybe normal so we can simply say font fate you know dot normal and after this we can simply have a font family and we can use the font family s serif you know which is by default provided after this we can simply say the line height let us specify the line height to be 15. S okay and let us rerun this let us see we can whether we can see that description okay so let us come over here yeah so we can see this text right it is a demo description perfect now the main thing which we have to you know uh do is that let us focus on this row okay let us try to code this one okay so in this row what we can do is we can basically have few of the things okay so in this row what we'll be doing is that we'll be basically saying you know uh so you know in this card if we come over here we are basically having few of the things like modifier all of this okay now let us focus on this row so in this row we can simply say we will be requiring a column and this column you know we have discussed it earlier right so we have discussed it earlier that we'll be requiring this column and inside this we'll be basically creating this episode button right and then we'll be creating this row which will be basically having this two buttons okay and with this column we'll be also having a image right so let us create this column first so in this column we can you know simply specify few of the things like we can say modifier equals modifier uh okay and in this modifier we can simply say that will be you know giving few of the things like the height and okay so you know this is basically the column so we'll be not requiring the height we going simply speci specify the width only and let us suppose the width uh which I want to provide over here is of 230 DP and then we can basically have the fill wax Heights okay so we'll be giving it the entire height after this we will be creating the things okay with this we have to also specify one more thing below this column which will be basically our image right so let us try to you know put that image now before this image we will be requiring to bring that images in drawable so what I will put doing is I will be simply coming over here copying this images so you can select all of this images copy them now I'll be providing this images in the description section you can you know click on the link and you can download all of this images resources if you want now let us come to this you know uh Netflix demo and then we can come to the stable and just click control V okay and it will basically uh you know basically paste all these images in this dyable okay so let us do that after this you know so after this what we can do is after this we can simply you know come out to this column and we can simply say image and we can simply say painter resource let us say r. dble Dot and we can say simply that we want this image rest one okay so we can have this image as our first image let us provide a description uh I will keep it keep it as an empty description okay now we can also specify a few more things like we can specify the alignment on all of this let us do that okay so we can say alignment and in this alignment we can simply say alignment. Center end because we want the image to be centered and towards the end side then we can have this modifier and I will be using this modifier to give it a Max height so we can simply say modifier dot fill Max height with this we'll be also providing the content scale which will be basically you know content scale. fit and let us see onun this okay let us see whether we are able to see that image so we have to retry this okay so it is installed successfully and see now we are able to see this image right now we are slowly slowly getting to that point right now we are having this image now the remaining things are this three buttons let us create the three buttons okay so let us do that okay so the thing will be that we'll be requiring you know this uh three image three buttons and this buttons were currently you know stored in this column okay so if we see this column right if we see this column this column was having this episode button right so let us create this episode button and then we can create this Rule and then we will be basically creating the remaining two buttons okay so let us create this episode button so so we can come over here and then we can simply you know simply we can say that we will be basically requiring a button okay so let us say we'll be basically requiring a button and in this button there will be a thing right uh so what we can do is we can have this we can have a comma come down so we are not specifying the on click uh function now but you can specify it if you want uh okay so now we'll be having a shape now this shape you know I will be having this rounded Corner shape now I have shown you how to create this button earlier also in our previous video where we have you know created a like 10 20 buttons so you can navigate to that video If you haven't covered that I will be suggesting you to cover that because it will you know clear all of your doubts regarding creating buttons okay so I'll will be saying top start and I am doing it because we don't want the roundness all around but we want the roundness to be in a specific place so it will be you know in the top start and then we can say bottom end okay okay so it will be basically 8 DP and for the remaining things we can simply say top end and let us give it off 2dp and then bottom start you know we can give it also 2dp okay now what we'll be doing next is that uh let us provide elevation to this button so we can say elevation we can say button default dot you know uh so we can even come after this and we can simply say button elevation okay let us bring this down okay now over here we can simply say default elevation and let us override the value to be 5 DP okay okay now we can simply say modifier modifier and we will basically specifying the height of this button so we can say 35. DP and after this what we'll be doing is we'll be basically specifying the color of this button so we can simply say button default dot or we can say button defaults dot button color and in this we can simply say container color and in this we can specify the color so I am already having the color I will be specifying it it is 0x FF 86 okay 5 dfff okay so this is our color code now after this what we'll be doing is we'll be basically providing the text which we want to show over this button okay so we can come down and let us say we say text and the text which I want to show is you know it will be basically something like episode one right this is the text which we were wanting to show right okay so I can have a com come over here come down and let us say we want a font size a fault size of maybe 13sp and then we can basically have a font weit and then we can simply say font weight do bold okay and then we can basically say a letter spacing let us take a letter spacing of 0.1m unit okay so we are done with this also so now we are basically having this text right and let us try to rerun this code okay reinstall and restart the application okay so let us SC over here and see now we are having this episode one button right now the remaining thing is that we have to create the remaining two buttons now if we come after this you know we can and create that two remaining buttons now if we come over here you know which uh the structure which we have created earlier we can see that we'll be requiring a rule and inside this rule we'll be keeping this two buttons right and we'll be also requiring a spacer because we want to give a space between the episode button and this so we can also say that will be basically requiring a spacer okay so let us provide a spacer after this okay so for this what we can do is let us say you know we'll be basically requiring spacer right so let us do that okay okay so what we can do is we can simply come over here we can say spacer and then we can simply give it a height so we can say modifier do height so the spacer will occupy some height maybe 15. TP okay that is enough okay now let us create the row and in this row we have to specify few things like vertical alignment uh let us say alignment do Center vertically okay and after this uh in this you know we can also have this two buttons right so the first thing was that we will be requiring a icon button and then we'll be basically requiring the uh another button right now the main thing over here is that we'll be basically requiring a space toward the left side so we can again create a spacer you know it is completely upon you you you can create a spacer or you can give a padding toward the left side okay it is completely upon you uh I prefer giving a spacer so we can say with and let us say I want this spacer to take 10 you know 10. DP withd okay now we can simply say icon button icon button and after this icon button we be basically requiring few of the things okay so we can simply say modifier modifier so we'll be specifying the size and let us give it a size of 30 DP maybe okay let us bring this down let us bring this down also okay bring this down okay now after this we can have a comma and after this modifier what we can do is we can basically have this image okay so over here we can basically have this image now I'll be requiring that image so you know I can come over here let me copy this image image which we were basically having okay so this is the Netflix icon which we were wanting and after this what we can do is we can come over to this Netflix demo come over to this triable paste this I'll be also linking this image in the you know in the description you can download it from there now we can simply say painter okay so we can simply come over here and we can simply say we enter resource and then you know we can simply say r dot dble dot we can simply say Netflix icon okay so we are having that Netflix cycle now let us give a Content description I will keep it empty now the next thing which we'll be basically requiring is that we'll be uh requiring few of the things like we can have a you know content scale all of that okay so let us bring this down and what we can do is after this and have a comma come down and let us specify the remaining things right so we can simply say modifier equals modifier and we can simply say do fill Max size so I want the image to fill the entire size and then we can basically have a Content scale uh and this content scale you know I can keep it you know content scale. crop okay so it will fill the entire space okay so we can simply say content scale okay so it will be basically you know content scale equals Capital C and I can simply say crop okay so let us rerun this and let us see whether we can see that you know Netflix icon button okay so it is saying retry let us retry okay now we should be able to see this see now we can see this Netflix button right and there is only one button which is remaining which is basically the watch again button so let us create that also so after this we can also have a spacer you know so both the buttons are not you know aligned together so we can simply say uh let us give a spacer maybe okay so we can come down and then we can say spacer let us give it a width and let us give it a width of maybe 8tp okay now after this we can basically create that button also so we can simply say button okay so we can simply say button and in this button we'll be basically having this uh have a comma come down have a comma come down okay and then we can basically say the color uh now the color which we can do is we can simply say button default button color let us specify the content color and container color so container color was red so we can simply say color do red and the content color will be white okay so we can say color do white so in this content container color uh it is basically the color which will be you know provided to the button so button color will be red while the content is basically the text which is you know will be providing in this button so its color will be basically white okay now we can have this text you can simply come down and let us say we say button text or we can you know what text like watch again okay something like that and after this text what we can do is we can also provide the remaining things like the font weight and all of that so we can have a comma come down uh let us specify the font fate so we can simply say font fate you know dot we can say extra bold and then we can basically specify the size we can say something like 15sp and let us thumb down and let us say letter spacing and we can say 0. do do M unit this is the letter spacing which we are wanting and then let's specify the font family I will be also giving it s do sens Saif okay so let us try to rerun this so let us reinstall and restart the application okay now let us see the application see now we are having this butter and this is the same thing which we decided right so this the same thing which we wanted to create now the uh main thing is that we'll be wanting multiple cards of like this right so what we can do is we can come over here and let us copy this my card you know let us copy this my card come over here paste this two three times like five times we can do it let us rerun this right and now if we come to this now see it is completely scrollable but the thing is that you know we were having separate image for each of this card we were having separate text for each of this so what we can do is we can basically pass the values over here and then we can receive that values over there and you know accordingly we can you know you know decide or we can say simply replace the values okay so let us do that what we can do is we can come to this my card and let us suppose we basically have a button text uh which will be basically the text you know which we'll be basically keeping uh in the button so we can simply say button text so this is the same text you know which will be shown on the red button okay like the watch now or play now something like that okay so we can simply say watch button text okay so we can say that it is completely upon you uh how you want to rename this variables now it will be basically a string then it will be basically having a image right so uh we can have that also but we can also have the remaining things like we can have the text for the top button so we can say top button text and let us say it is also uh string string and then we can also have your you know uh the image so we can say dyable ID and then we can say it is basically our in and then we can also have like the episode title episode title it will be also a string and then we can basically have t i n g and then we can basically have the episode uh we can say description right so we can say episode description description and it will be also a string okay now it it has to be episode let us make it episode okay so we have to remove this one and we can say description sure it will be Di okay now what we can do is we can pass this values before that we have to make sure that we use this text uh in the below you know things okay so the first thing was this watch button text right so let us do that where we are basically having this so instead of this episode one we can directly replace it with this top button text right so because it was the top button so you can simply say top button text we have done that now now there are few more things like this button you know we have done this let us focus on the remaining but buttons like this icon button you know it was basically having the Netflix and we can remove this uh by simply saying you know dyable ID so it will basically have that thing okay let me okay no it was basically for the Netflix button feel will leave it as it is and it was basically the watch again right so we can uh simply remove this and we can keep the first one which was basically this one this watch button text right so this is the watch button text so we can simply say watch button text and then we are having this image so we can replace this with the painter ID or we can say dyable ID and then we are having this two text which is basically the heading text and you know the description text so we can simply say you know uh it was let us see what the name was the name was episode title episode description right so let us use that so we can come down over here to this text go below this and it was basically episode title and it will be episode description okay so we can say episode description okay now let us provide the title description and all of this we can come over here and let us try to provide it so we can simply say something like you know so the first thing will be basically uh watch again watch again let us say for the you know for that red button then what we can do is we can have this which is basically asking us the top button text uh we can simply say episode one for the first one sord one then it is basically asking for the DBL so we can simply say r. Trel dot we can say you know image t one and then we can have the remaining things like you know the uh episode title so we can simply say red light you know comma green light okay so it will basically green light right after this what we will be basically having is we'll be having another comma over here and then we can basically specify the you know uh the description of this episode so we can directly say layer you know so we can simply say player uh player's face gly consquences in a children children's came turned dly okay so this is few of the text which I have by default generated now what we can do is we can have a DOT over here now let us copy this one okay let us copy this one only so let us copy this one this entire thing and let us replace this this once okay so what we can do is we can make it more readable by bringing this you know down let us bring them down something like that now it is much more readable than what it was previously let us copy this again and let us create cards like this like one more card then we can create one more card one more card and let us create one more card okay and let us change this images so we can have this two let us make this three let us make this four and let us make this this five because we are having this five images right so it will be episode 5 let us make it episode 4 let us make it episode 3 let us make it episode 2 let us make it episode 1 so it is by default F okay now we can say they now over here let us say the user has only watched the first episode so we want the others to have displ now right so so we can basically copy this for the remaining ones so we can replace this with play of replace this with play again and replace this with play now again also okay now let us reapply the changes and let us reinstall and restart the app okay now if we come over here see now we can see this watch again play now and we can also see see this imag is changing and now you know we are having this red light green light for each of this card now you can simply you know do that by yourself you know you can basically assign this you know this uh Red Light Green Light you can change this for the episode 2 you may you can also say that you know you want the something like the the front man's invitation okay so it it can be hiding again then you can have another heading for this like too for you know so it it is something which you can do by yourself I'll be providing you uh the episode title description in the uh description box if you want to copy that you can also do that okay if you want to create the similar thing see now we are having that text right so we are having red light green light for this the front me uh invitation for this and then we are having this red light green light okay uh so you can do the remaining things uh like this by yourself okay okay so now we have basically created the application which we have seen in the starting and in our upcoming videos we'll be discussing more things like we'll be discussing the other you know jetpack components like cards you know then there are chips and all of that so we'll be trying to cover all of this and you know after covering few of the topics we'll be trying to create something like this so you know we can have a brief understanding about all the top topics so till now what you have to do you have to Simply subscribe to the channel hit the Bell icon share this video with your lovely ones or your friends who are currently struggling with Android development till then have a great coding Journey this is coding up signing off for this video and we'll be meeting [Music] soon

Channel: Coding Hub

Views: 117

Keywords: Jetpack Compose, UI Design, Dynamic Layouts, Scrollable Cards, Android Development, Kotlin, Interactive Buttons, Netflix-inspired, Mobile App Development, Software Development, Android UI, App Design Tutorial, Coding Tutorial, Design to Code, Android App Development, Android UI Design, UI Development, Android Studio, App Development Tutorial, Android Layouts, Android Widgets, Material Design

Id: CLNH54ooQMw

Length: 43min 25sec (2605 seconds)

Published: Mon Feb 12 2024