How to Build Stunning Material 3 Apps with Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to part two of our material three course here in which we're going to build this simple demo ui app that just loads some sample images and you'll also notice that they will actually reload when we scroll because i just initialized the new image loader for each card here doesn't matter it's just a demo so what we will actually do is we will switch into android studio and you have to make sure that you have the right dependencies because material 3 requires an additional dependency if you are all using i think android studio dolphin or onwards um correct me if i'm wrong but in some future version of android studio there will be like a new option here if you create a project you will have an option here under these other options that you can directly create a material 3 jetpack compose project right now i'm using i think bumblebee um so this option does not exist yet and we need to manually migrate from material to to material three because material two is the default and compose currently and the material three composed version is also of course currently in alpha so some things will probably change or improve in future but i hope nothing that affects this tutorial because the the basics will stay the same so that is the most important dependency you need to have material three this one here is optional if you want to use windows size classes um which is kind of yeah which are different classes you can use to determine are you currently on a phone on a tablet on a large phone to um yeah to just make sure that you show the right ui for the right kind of layout i also included the flow layout here because we have some chips in our ui and flow layout just means we put all of these in the single row unless they um overflow here so if we would add another chip it would simply be put in the next row that is a flow layout and we use coil compose here just to load some random images from the pixelm api so the next step we want what we actually want to make sure is we want to remove this material dependency here just to make sure that we don't accidentally use the wrong material components here um because we will essentially have yeah like two different types of material components for each ui component like if we if we have a floating action button and there will be one floating action button for material two and one from material three and that is what we want to avoid that is why we remove material two here and we can then click synchronize now if we then take a look in our ui theme um theme folder here you will see we get some errors here because in material three there are some things that are called differently first of all you want to remove our imports here that are invalid and then we will notice okay dark colors is actually not recognized and that is because it is now called dark color scheme and also of course the light color scheme and here you see we don't have a primary variant color anymore so we can remove that here as well for the light colors we'll of course extend this here in just a moment we want to scroll down to our material theme here and import that and it is also called color scheme here so we simply replace this with color scheme and that is the first step of migration that you need to do if you want to switch from material 2 to material 3. however there are some more differences because if you hopefully watch the previous video then you know that we now have dynamic colors and by default dynamic colors are not kind of activated if we actually take a look here we have dark color scheme but we also have dynamic dark color scheme and that only requires the context so we don't need to specify our own colors because these colors for the dynamic scheme of course come from the android system so how do we now make sure whether we want to show the dynamic scheme or the dark theme or the light theme to the user we want to determine that right in here where we say colors and we set that equal to when because we now have four different types of schemes we would want to apply depending on what kind of device the user has so if we if the user has a device running on android 12 or later then we want to show dynamic colors and then we also want to check if the user is currently in dark theme then we want to show dynamic dark theme colors if the user's on live theme we want to show dynamic live theme colors and if the user is on a device uh running lower than android 12 we want to show either dark theme or live theme depending on what the user is in so just using our own apps theme colors so let's first of all have a boolean here a val let's call it use dynamic colors and that is just equal to build dot actually version sdk end and if that's greater or equal than build version codes s which is android 12 and then we want to use dynamic colors so if that's true use dynamic colors and we're in dark theme then we want to use dynamic dark color scheme and we pass our local context current we duplicate this and we can change this to not in dark theme then we want to change this to dynamic light color scheme and if that's also not the case we know we're we're running on an android version lower than android 12. so if then dark theme is true we want to use our dark color palette and else oops not a comment there and else so we know we're not in dirk theme and we're also not running on android 12 and then we want to use our light color palette so that is now how we distinguish between the different types of themes for our material 3 app the next step is to actually think of the colors you want to use for your app i will go to color here our color file and i will remove all of these and what i will instead do is i will paste quite some colors and don't worry i will go through why i chose these colors so in the previous video i already mentioned that we have these um kind of color values here like we have green 10 green 20 30 40 80 90 which are just different tones of a specific green color and i've also showed you that html color picker which helps you a lot to kind of generate these different tones of a specific color if you pick that and again what i will use here for the colors is just what google also uses so they use kind of one main color which would be the green here then that would be our primary color scheme so just different variations of the primary color then we have a kind of darker variation of that so dark green which is very similar to these just a little bit darker which would be our secondary color so just a little variation of the primary color and we have a cherchery color which is violet so that could be anything that is not your primary color so it could be something completely different what i showed you basically in the calculator for the ac button to clear the calculator the calculation we're not going to use this chargery color here in this app but just that you see um that you can also define these and which values you should actually choose for that and these specific values that i actually choose here like you have um four values from um brightness 10 20 30 40 and then you have 80 and 90. that is something i would always leave the same at least if we want to follow what google chooses for their apps so only the color would actually change so let's say you would not want to use a green color here let's say you want to use an orange color here as your primary color then we want to switch to this html color picker which you will again find in this description and you want to kind of pick an orange color here or you paste your your color code let's say yeah i kind of like this one here and then you get all these different orange color tones and now we want to choose the same types of brightness for this orange color tone like we have the 10 so we would use this for orange 10 we would use this for orange 20 orange 30 orange 40 and then we use orange 80 and orange 90. so if we change our color only the type of color changes not the levels of luminosity and the same way we just have some error colors i actually just copied these um from google's project because i kind of like these and error colors are usually colors that don't change depending on your project because those should actually always be rad we have some neutral colors here which are just different tones of gray you can also notice that here we use different um kinds of luminosity so we use 10 20 90 95 and um you could also probably use these for most products but unless you want to have some other neutral colors and we have some kind of color variations of our primary color with a yeah like a grayish tone which is also what google does so if we take a look here it's kind of going towards the the gray tone here which i will call green gray if you have a blue color i would call it blue gray or whatever you have here for your primary color so now all of these colors are of course unused we need to now specify um which color we want to use for what kind of theme color so if we take a look at our theme you've noticed that we have our dark color palette and light color palette so we now need to tell android which which color we have for a bunch of other colors here for example um primary on primary like primary container all these different colors we can now specify here we now start with our dark color palette and let's start with our primary color which is essentially our green 80. so that is a kind of a very bright green because of course if we are in dark theme we want to have a contrasting color to our background so green 80 would mean we have 80 of luminosity so very bright green and again if you just have a different kind of primary color you would simply write orange ad or violet adr whatever you have um the just the level of luminosity does not change here if you want to follow the guidelines from google then we're going to specify our on primary color which is not on primary container just on primary which is the color yeah that is on our primary color so if we have that as a background and we want to have some text on that then we should use on primary which would be green 20 here we have primary container which is um green 30 so a little bit darker than our actual primary color and we have on primary container which is green 90. and our inverse primary which also talked about in the previous video that would simply be our green 40. so i think that's the most the brightest version of it here this one cool and that is already it for the primary color we now do the same for the secondary color and the secondary color is as i said the darker variation of our primary color so we now actually do exactly the same just that we use our dark green color so we say dark green 80 for actual secondary color because here we have green 80 here we use dark green 80 on primary hello oh actually on secondary of course would be dark green 20. secondary container would be green dark green 30. then we have on secondary container is dark green 90 and we don't have an inverse secondary color but we also have a tertiary color which is our violet here as i said we won't use this in this app but just that you also see how you would use a tertiary color which is again the same so we have our 80 color tone here we have on church theory is violet 20 we have um chaturi container which is violet 30 and on tertiary container which is a violet 90. then we can define some error colors like the normal error color would be in this case rad 80 and you again notice the same pattern we use our 80 color for the yeah kind of the most prominent color of most of these different types of colors like primary secondary tertiary then we do have an error container color actually on error color first which would be red 20 so again just like here we have our 80 color as a main color and on that we use the 20 toned color we then have our error container which is red 30 on our container red 90. then what next we also need a background color which is often used which is of course the background of your screens which is um which uses the neutral colors here so all the these types of gray here this would be gray 10 which is very dark because we are in dark theme we have on background which would be gray 90 which is very bright because it is on our background we do have a surface color which um yeah you now need to think about what you want to choose for that google users often uses the same color as for background and on background but if you actually want a different surface color like we want here for these cards that should be a different color than the background color we want to use something like our variation of the grace so a green gray something like green gray 30 on surface could be green gray eddie inverse surface here we could use our normal gray for example gray 90 and we have inverse on surface a lot of new colors here we use grade 10 and there are two smaller types of colors that we don't have yet which is surface variant on the one hand which is green gray here so we again use our green gray for that in this case i will actually use oops green gray 30. i will use the same color as for actual surface um because the dynamic colors kind of mess that up a little bit because they um i think they actually use the same surface color as our background color is and that would lead to the issue that if we use dynamic colors these cards would have the same background color as our actual background making them not visible and that is why we want to use the surface variant color for these cards since that's a different color and will also be a different color when using dynamic colors i hope that makes sense that's why i choose the same one here for surface variant and on surface variant as for surface and on surface so green gray 80. and we have our outline color which is missing here and that is green gray 80. so now that was a lot of color code here and we have to do the same for the light colors but that's actually something i will simply paste here that will differ a little bit of course because we have different colors for our lat theme but just the tones of the colors here differ so we of course again have a green type for the primary color i'm just a different type of gr of green as here for the dark colors of course you will find all the code in this video's description and my github repositories you can also just copy paste this and i would say we now go on with actually taking a look in the shape folder here the shape file we want to get rid of this of all imports and we probably want to replace this with shapes from material 3 and input rounded corner shape import dp and we can probably also get rid of this now i'm not sure why i can't yeah whatever let's leave it at that specifying the package name looks like we can't import this here oh we can hit here at import and then it looks just like before with the right imports let's take a look in type so here we can remove this typography import and we can then re-import it from material three this one here then it's not called body one anymore as i mentioned in the previous video instead it's called um body medium body small for example body medium and then we could specify that just as a textile that's the same as it was with material 2 in jetpack compose so nothing changed here just the imports and the names for the different font styles so i'll leave this here as it is and leave it at the default styles and i think that's it for the migration we now want to jump into [Music] main activity and here we also need to fix some imports we have this default surface which you can re-import because that now comes from material 3. use this first one here and the color would be material material theme import that and we need to refer to color scheme now instead and the rest we also need to fix the import control alt o and the rest will now be pretty simple compose implementation here so let's actually start to implement our cart composable such as the composable that contains this image this title this body here and these two chips by going to our main package creating a file called image cart selecting file and creating a composable here called image cart let's give it a title let's give it a description and let's be able to pass the modifier here that we set to the default one so and as i said that will simply be a card which we can get with the card composable and here we want to perform some modifications to this cart first of all we want to set the modifier to the modifier we passed modifier come on modify here then we want to change the colors of this car to yeah to make them fit our theme because i think by default cards in material design have the surface color and because of the issue i mentioned that the surface and background seems to be the same for dynamic colors we want to assign the surface variant color here so we can use colors and we assign card defaults dot card colors to this you see we have a bunch of different colors here and you will see this way of specifying colors quite often for material components because a single component often has different different types of colors so if you have a button you might have a color for the button when it's disabled you might have a button a color for the button when it's enabled when it's pressed so different states for colors and the same is true for cards so we might have some elevated cards we have outlined cards we have normal cards without any elevation or outline and for these different types of cards we have different types of colors as well we want to use normal card colors here and for some reason android studio never gets that right and that it it always imports this weird stuff here which we want to remove and here we want to first of all specify the container color for our card which is material theme color scheme um and that is actually surface variant as i said and that now refers to what we specified in the corresponding theme for the surface variant color then you will also see that we have a content color in the material theme the material design the cotton color always specifies the color that should be displayed on top of this container color so if we have surface variant the content color for surface variant would always be on surface variant the content color for tertiary would be on tertiary and if you want to find out a color for a specific other color in your theme you can use content color for and pass your container color that is the default so by default it will take a look what is the container color in this case surface variant and it will pick the content color for that so it will pick green gray 30 in light theme so we don't need to specify that we also get an error here because of an annotation we miss let's add that to our composable and then i also want to attach a shape here to this card which we can also get from our theme that shapes and i'll say that as a large shape then we want to start to create our image here in this card so we have a column scope here so first of all we have an image then we simply have a title description and a flow layout with our chips so nothing really special as i said we will load the image from from the pixelm api which just returns a random image the painter will be remember async image painter that comes from coil so just a remote image loader and the model will simply be the url and i will paste this in here so that is the url where we can get a random pixel image here from that api in these dimensions here so 300 by 200 pixels and we need to specify content description which i will just set to null here we also want to specify a modifier for that image which we want to clip to our to the same shape we use for the cart which is large we want to make it fill the max width and we want to make sure that it actually has an aspect ratio of 3f divided by 2f which is exactly this aspect ratio we chose for the image then next we want to have a little column here just to be able to apply some padding only to this part of our cart so we say modifier is modifier padding 16 dp let's say and in here we will now have our text want one for the title which will be our title we can apply our text style so with the font style now it's actually just style material theme dot typography and we can assign title large for example here for these types of titles then i like to have a little bit of spacing atp and we have another text which is of course for our description so description and the style of this one will be a simple body text so material theme typography body medium and then let's have another spacer here before we will um put in our chips here and we will put our chips into a flow row which i mentioned before so if if the width of the items gets too white then it will simply take the item and put it on the next row so we will use that here flow row we say modifier is modifier fill max width and to set main axis spacing to 8 dp or not 9 just 80p that will make sure that we have 80p of space between each chip we set the main axis size to [Music] size mode wrap so it will simply wrap the content if it exceeds the width and then here we now have different types of chips we could use so if we just type chip you will see we have an assist chip we have an elevated assist chip we have suggestion chips filter chips input chips like input chip would for example be if you have an email and you want to um enter some recipients of that email then you very often see these chips there once you entered an email for reshippent and that that appears as a chip or for different tags you might be able to enter or so filter chip would be pretty much the chip version of radio buttons and a radio group so you can use these to filter specific items suggestionship is basically just a hint so if you just want to have different hints for specific topic use a suggestion tip and an assist chip is something that is that represents a little action like an action that is not prominent enough to to become a button but also something the user might should notice actually and that is what we will use here because i just have yeah mark as a favorite as example or share with others like buttons would be way overkill here to have two buttons for each card but a chip is something that is less prominent and still kind of stands out a little bit when we click on this nothing should happen because we don't implement any functionality we want to remove this as well if we don't want to use elevated assist chip just normal assist chip and for this assist chip we want to also make sure that we assign a different color because the color should now be the color we want to have on our surface variant color because we use the surface variant color for our cart and since our chip is on that card we want to use that we can use chip defaults for that assist chip defaults actually and assist chip colors and it will again come with this weird package name which one to remove and in here i want to simply assign a container not a container color actually just a label color i think we don't even need that we just need to specify the leading icon color because that was always different in my case i want to also use the same color as we use for the text so material theme color scheme on surface variant we need to specify a leading icon just as a composable you can use an icon image vector what you're going to use here we want to use icons outlined favorite border so just the favorite icon the heart icon and i don't pass the card description here as well and we have a label so the text of the chip which is a simple text mark as favorite and that's it for the chip we cannot copy this to have one more chip here that's fine just the icon changes and that would be share icon and we can say share with others cool and that's our image card already the biggest part of our code now let's go to main activity and actually set up our layout and since we also have things like floating action button we have a little toolbar just for demo i'll see how that would work for these things we typically use something like a scaffold which easily allows us to to place these common ui elements in their right spots so first of all in the scaffold the content we want to have on our page will be simply a lazy column with um yeah with our content so we have let's say 20 items of image cards and i just pasted some sample bacon dip some text here which you can also find below but you can enter any any type of text here that really doesn't matter let's also get rid of this error by pressing alt plus enter and adding this annotation to main activity and we still get an error here because the content padding parameter is not used that is actually something new of the scaffold so we get some values here which is content padding so that will actually change depending on specific types of animations that might um play a role with a scaffold like if your floating action button needs to move up or so then it will pass down these padding values which we can i think um apply to our lazy column like content padding and we assign values just like that yeah and then we get rid of this error and inside of the scaffold we can specify things like the floating action button which you can create here floating action button doesn't have any type of action but it has an icon which is icons default at or anything else you like no content description i'm not sure if we need the tint here if you need to specify this but let's specify it as um on primary container because the floating action button will have the primary container color and if we have an icon on top of that it should have the on primary container color not sure if it tells us that here the content color probably it's probably that but we can also specify it like that and one more thing is missing that is our top app bar our top bar actually top bar come on just like this here we have a top app bar and we now also have different types of a top app bar we have a small one a center aligned large medium so depending on how much information you want to show on that top app bar you can choose different variations of this i will simply choose a small top app bar or you could use a center one then it would simply have the title in it centered let's choose small one and let's make sure that the title is not nothing text would be material three for example and we want to specify colors again with top app bar defaults this time small app small top bar colors and again get rid of this trash and what do we want to specify here well for this top apple i will choose the same color as for our cards so the surface variant because i think that looks quite good so we have the container color being equal to material theme color scheme surface variant and the title content color would be material theme color scheme so on surface variant and i think that's it that's it for our app and make sure you actually have the internet permission for coil otherwise it might crash but i think we're ready to try this out and i will run it on my pixel let's hope it will actually look the same when i switch here it's now launching let's see we also have a very nice comparison and that looks similar um it looks like we didn't specify the shape the large shape so let's change that or it's very very minor i don't know um let's go to shape and yeah you see large shape is set to a rounded corner shape zero dp we actually want to set that to something like 20 sp dp relaunch this and there we go that looks a lot better and if we now actually switch to let's say let theme then we have a light variation of this if we change our dynamic colors so wallpaper and style we go to let's say we choose a blue kind of color here and we go back to our app then it will adjust to a blue color tune we also have a blue dark color tune and if we wouldn't want to use dynamic colors we could also go to theme and in here we just comment out these two lines here just for demo relaunch take a look here and then it will actually use our actual theme colors so the green colors we used and in light theme it would look like this so that is how you would be able to choose your own theme colors if you don't want dynamic colors and something you will notice is that you will have a purple action bar or status bar i think it's called um you might wonder how you get rid of that because it's always purple by default you actually need to change that in the raz folder values themes.xml and in here um it uses the kind of old material theme here so you you have a status bar a status bar color which is set to purple and you could for example set this to black and then it's always black if you want to make this dependent on your um theme so if it's in dark theme or light theme you could create a different variation of this themes xml one for dark theme and one for light theme how about that's it for this tutorial i hope you really enjoyed this and have a quite a good impression here now with material three and how you can use that in your apps to make them look great i think that's actually a very nice way even if you're not a an app designer a professional in that regard that you can build somehow cool looking apps with a cool color theme if you want me to make similar tutorials then i would be very happy about some suggestions what you would want me to do and what you would want to see here in regards to ui building in regards to material three in regards to general app building just put it down in the comments and enjoy the rest of your day see you back in the next video bye

Channel: Philipp Lackner

Views: 45,855

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile, material, design, colors, typography, shapes, jetpack compose, composable, dynamic colors, dark mode, theme, theming, color, palette

Id: h7K4n9C2jkI

Length: 34min 11sec (2051 seconds)

Published: Sun May 29 2022