Education App UI - Android Jetpack Compose Tutorial

hello and welcome we are back again with another Japan compost tutorial video this time we'll be implementing the BrainPOP mobile app UI ux design by taras mugiku I think this is the third time we are featuring one of his designs on this channel and on this design we'll be implementing this screen this one so we have to choose what we learned today you have this lazy hole dizzy column and some other texts so like always if you want to follow along with this tutorial heading to the repository link found in the description section below and you click the link to the GitHub repository when you are here you come to code you copy the link this link will be used to clone the project and in Android Studio you head into file new and project from Version Control we will presented with this screen and you just paste in the URL you just go then select clone after you're done cloning make sure you are on the start branch you come to the start branch and you select checkout like you see here I don't have the checkout option here because I've already checked out today start bunch and when you're in the startup Branch you are set to follow along this tutorial video so first things first before we start writing any code it's very important for us to have an overview of the layout to be implementing so let's come back to the dribble page and let's have an overview of this layout we know we'll be using a scaffold but this time around we don't have a top upper and a bottom navigation bar so we just have the body even though you don't have the top about the bottom navigation bar sorry you can simply the scaffold and leave your top up and bottom up optional those are optional those are not mandatory to implement so we just have the body in the body wave text after the text will have a lazy hole of items will be selectable with the different background when selected you have a dark program with selected and the text color will be white then after that we have a box which will contain a row with two items the first item will be a color one the next will be an image then after the box we have a text after the text will have a lazy color of an item with the this so let's head into Android studio and actually start writing the code into our Android Studio project we'll come here in the green Bob app team and we'll create a scaffold inner scaffolds since we'll be using the top upper and the board navigation bar we're just moving to the body and we'll and as a root element or composable however you call it as a wood composable will have a colon since all our items will be stuck vertically we want to give it a multiplier and Wi-Fi background of white pattern will give you the patent value context cutting from the scar foot which will be it and as a custom padding we want to have a horizontal padding so the items are pushed away from the edges I'll give the horizontal passive of 20 DB so after that we're moving to the body of the column and in the body of the column we will first start with the text so the method we'll be using for this this will be a text view we'll use a build annotated string and this all of these have the same font size so we'll give them a global font size of let's say 30 to 40 then who append the first text which will just be a normal text then we'll append a second text with a different style we use a span style for this and we'll make it dark and bold so let's head into the code in our column okay it takes composable we first want to give you General values like font size with a font size of 40 SP we'll give it a modifier and this modifier will give it a padding button since we need some space in the bottom for the next upcoming items of 25 DB now we can use the text composable compute the text and this text will be a build annotated string and in this body will first append the first text which is choose what and after this one thing new line then with style since uh to learn today has a different style so give it with a style of we'll give it a style of sponge Style and this pan style will give it a font width of Bolt and the color of black then in a body of the style will append the deck switches to learn today you can see to learn all day so it's today might have just been a typo question mark perfect so yes we arrange our code and have a preview of this as you can see after doing this this is what we are presented with choose what to learn today just passing the design now let's move on to the lazy role so after the text composable let's make sure after this it will create a lazy one and as properties we'll give it a horizontal arrangement of I will see all the items before all the items will be spaced by 10 GP don't want to give it a modifier and we'll see the laser Wi-Fi bottom padding of 25 GP bottom passing of 2580p to the next element so See Fire button bottom 125 zipper and here is spaced by in the lazy row we want to look through the jars list of elements this while we are both we just say list of text and for each element found in this list will create uh an item this is what I call items so they will proceed this you see items and in here it takes in a list with jazz and for injure this orange circle and for initial I want to create a jar composable it takes in ninja now move to the bottom to create an Azure composable and composable annotation a text which is the string so uh we will have a box we'll run the corners with a background which will vary depending on the selection state so what we select state and in the Box we just have a text Center to the Middle with pattern around the text so give this space so firstly waffle box modifier we want to give it 100 Corner ship so use from that going on ship of 30 percent haunted Corner ship 20 percent want to program wanted background color and the color will vary so we need to communicate a variable to all the acceleration state of the composable so however is selected with by remember and in here we want immutable state of false so by going to be by default it will be false so come in a background if is selected the color to be black else the color will be trans pounds why are you transparent I know the color can really be transparent it will be discovered uh let's say you'll be light green I thought it would be it was white and how do we know an airtime is insulated regarding order by giving a clickable modifier and when it's clicked you select will be equals to the inverse of the current you select test it grid so to make the content alignments and you'll be aligned to this items in your box will aligned to the center now in the body of the box we have a text and first you will give it a modifier what you want to modify I want to give it the padding all around the text of at least 10 GP to create an internal space I want to give you the text will be equal to the text you get here the colors will vary if it's selected the color is white if it's not selected the color is dark so if you can just copy this save us some time if you say take this white there's no selected this block the text will have a font size and it font with of boots perfect so let's view this on our preview so the the logic is right but our colors are not that good uh let's go to the product resource source file and see if I added the color for the light green seal and we will seal instead of the light green background you know is it like clear I'll use a color resource one was ID Le and check how it looks like the seal color looks better let's start interactive mode Wi-Fi to put okay let's put it Let's test the solution State I'll be clicking this okay duck and white dicks okay goes back on this course perfect let's stop this let's now move on to the next section which will be this waffle boxes then in the box we have some pattern all around I'll give the items in here some padding then we make a wall since we have two blocks of composable items stack horizontally then the first item will be a column text text button with an icon and the next item will just be an image and let's not forget to have to give it a background color this nail color is also fine let's just say pop I think this is dark purple so let's give her some space let's just let me show you the code tab so after the let's go make sure after release go we want to create the Box everything was your file and what you want to modify we first want to modify the padding we want to give it a body end so it does not touch the end of the screen I'll give it a body I know 20 DB then I want to give it a rounded Corner ship using clip on the corner ship and we'll give it the radius of 10 percent no forget in the background will give it a color resource with ID I want to color dot mean kind of your name into it was fine this in the box we have Arrow has promised and want to align the items vertically to the center so vertical alignment Center vertical our first item in the Ruby column column um to modify the padding won't give it a vertical button top and bottom of 10 cgp critical pattern 13 GP 30 GP also want to give it a pattern start of 20 GB thank you in the column will first have to text me vocabulary and in second text will be listing 20 new words but listen to 20 new words and first will be a bit bored with the color of white and the next text will be like a normal text so a face text Ure the color across your white the font size it will be B 42 SP awn to it of boards it's good and some space after the text you want a spacer you can also use to inject a modifier into this first text View and give it a buzzing off a bottom pattern of 10 GP maybe with the size of density after this pizza of our second text I'll give it a text the text will be probably text me listing 20 new words listing to 20 new words preferable products it will be a color of white and you have a little font size so compared to the first text I want to give it a font size of 20 asp foreign I also modifier want to give a button a size one two give this size so for Heights you have a height of 60 GP and a bit of 120 where I got these values by using a measuring widget you can find here I use temperature in widget to measure the to measure this basically so one for your height of 60 GP I don't know wheat of 120 GB then the voters around the corners obviously so we'll clip it oh okay on images of 20 on all edges my defaulty button has on click action which was implement the ass would be you know and to change the color of the button we'll give it the color of button default dot bottom colors and in here I want to give a background color of white now in the button where we take hold by a circular shape with a box and in there will be an icon which will be a play button so this button will first have a text composable instance dots another color of blood an iPhone size of 18 SP after this work is pizza moving the species size of 10 GP after that one of the box with the Box effect size of 30. zippy want to make it brown so use a circle shape and a background color of black I want to align the content of this box to the center in the box now Whopper icon want to give it a size now I want to give icon some pattern so you won't touch the edges the full size of the icon I think is 16 GB it always starts at 16. so that'll be small enough for us to using this tutorial I want to give you a pattern all around or 5cp image filter to say the image of the icon I use a default compose icons icons field click oh of course we have a content in the description to have the disabled and we'll save the arrow icon or play icon and change the color for icon to White now let's review it and see how it looks like so as once you are right on the design we have a button with a play icon the icon I'll put two texts the distance to 20 new words you can't really match the fonts sizes because obviously we don't have the design file to know the right font size is using but at least we can have something almost similar to that so all we have left here is the image so to start Personal Image in a let's go back to our hotel after the column now we can create the image composible folder and we'll view the 90 closes the azure horrible but green so I use some mode concise name there content description or we'll call it Avatar image this is our damage time contributive modifier now give it a width of one f and fill uh let's see false and I'll do it for image so after this section we have a text so let's find our box of this water and let's collapse this so after a box we'll have a text composable we'll give it a text we commented in color what color is it is a black with a black color black foreign the default size we wanted to rather be tiny so create a 428sp tiny heading and as fortifier want to give it a vertical pattern both top and bottom of 32 so after this we're going to Vertical pattern so so we can still create these items without worrying after this we have a famous lazy colon Japanese the items don't touch the end of the screen I'll give you the past the end of 20 CP sorry you can well as use SP but SP is a conversion better use for text composables we want a physical Arrangements oh punishment dots beasts bye 10 GP and this lazy column we want let's just say one two three items we just create this composable item on repeat duplicate it three times since you don't have any real data but in a production application I think all this information you get this information from the server and from the information I can look through each information and set the parameters accordingly before this tutorial will just create this composable and just repeat it like duplicate it so yeah we'll see items we want three items now for each of these we'll create a composable code just call them recommend it and it takes you nothing we'll come to the bottom and Honda Jazz and just collapse this I'll create a new composable or composable function call it commented thank you so let's have another view of our recommended composing we have a box will run the corner shape this background the background seal the same as this one and in here we have three blocks of items to have another balls which contains an icon on the corner shape or if we call them contain two texts won't be bold and the other will be Gray and our last block will just be on in an icon button what's in this bookmark so let's head back to Android studio and start building the recommended composition we'll scroll up and we want to create a box first obviously we'll give it modifiers and the first we want to fill the max width then 100 Corner ship one around the corner edges so use it to clip it and give it on the corner ship and one the corner swap will reduce of 20 percent then we'll give it a background color of seal so with the color of the sauce and now open igr.com Dot C you want the contents to be aligned so content alignment of Center and in the body of the box we want to go things are items will be stacked vertically no sorry items with stack horizontally one thing oh and has a modifier I want to make it to fill the max width obviously and want to align the items Center vertically ethical alignment center critical Universe block worthy box as well I want to make it on the edges foreign to the center and your boss will just have an icon image vector icons to a few dot email of the content description for the disabled and it shows the icon when the icons will be white so build it into white foreign so we'll give it a modifier first greet the size of the two zippy ten percent of 10 zipping just a Segway if you enjoy this tutorials please don't forget to subscribe to the channel and activate your notification Bell so you always so always be notified for any latest video uploads so let's continue after I've put the icon out of this box especially Adventure code onto this box let's collapse box after the box we have a column we should container two texts want to arrange them vertically to space between horizontally to Center horizontally on the column affects text of the texture subtracting of your color block only font size this one we font with wood our next text it takes will be five minutes okay it's got a design what chatting up here black color Bolt font size of 20. and next takes is five minutes a color of dark gray on a smaller font size will give you a font size of 18 HP 5 minutes one of the color of dark gray in the font size of 18 inch screen after this one to have his pizza will give it a weight of one social papers motion such as gun before we can now create a icon button since class is selected and is unselected so let's get this pizza with the modifier giving a width of one so after this column let's grab this 112 is pizza fire will give it a width of 1f small foot after this we have a icon button action it should be empty for now and the body of the icon button you have an icon image vector icons field bookmark where are you the star can't find the mark icon here the content description so now for I'll have to give it into the icon but the icon will have a second I also exited so firstly how to create the a variable to hold the selection state so call it is selected by email whatever did of false so by default is not selected so in the things if is selected color.0 like a star one star settings here color would be 93 we could not get a bookmark we could not get this specific bookmark icon but you could put the Boomer icon if you want to we are not specifically using this but my icon but you could what let's move to the code and lastly you want to give an icon in multiplayer I want to give it a fixed size which will be a 2GB now with this you are down to design let's preview it on uh in little video so as you can see we are done with that design and we could replicate up to 90 percent of this design of the boom boom mobile app so to create this space all you have to do is just to add a padding stats to the column that contains the text composables so don't forget to add that you can also run this on your mobile phone or emulator to see the end result so if you follow this video to the end once my thank you for following this video and I hope you appreciated the video if you want to have more of this kind of content what we first have to do is subscribe to the channel and then switch on your notification icon to receive latest updates about every video puts and also don't forget to check our community as I'll be releasing teasers of our upcoming videos and a little bit of tutorials and posts don't also forget to share this video with your friends and also like the video as you help me to hang higher in the YouTube algorithm so without wasting much of your time goodbye and see you in another video

Channel: DevWithGeraud

Views: 8,637

Keywords: android studio, jetpack compose, jetpack compose tutorial, android, kotlin, jetpack, compose, tutorial, how to, ui ux design, figma, dribble, mvvm, android studio tutorial for beginners, android studio tutorial, leckner, filipp, philipp, fillipp, phillipp, filip, philip, fillip, phillip, ui design, android developer, android development, programming, developer, programmer, java, mobile developer, mobile programming, android programming, android studio plugin, kotlin programming, android ui

Id: npE0BkYWTbU

Length: 40min 29sec (2429 seconds)

Published: Mon Apr 24 2023