TOA 13: Material 3 In Jetpack Compose

it could be something fun that we do next um and then we'll run it on this phone and we'll see how it looks on the pixel six of course um oh yeah my battery is going down so let's we can close figma because we're no longer using that and hopefully android studio running does not ruin everything but it might we'll find out um so oh we did the home screen list ui we did a bunch of ui stuff last week um i don't know if it's all been merged not all of it is uploaded onto youtube we'll do that soon i promise i've had a busy week and i'm a little behind um big my design system okay so let's try that so one thing i want to do i'm going to go over here i'm gonna open up sublime text um and let's open oops okay this is fine not now um let's open uh we had in our downloads material theme ui theme let's open up all this so here's the color file that we got i don't like um i don't like this um what's the word the naming conventions they used here um like why is this i don't like the snake case color here um i also prefer not to make these public so let's i learned this last week let's go into our multi-cursor mode real quick and let's refactor these ourselves the first we're going to make all of these private um i'm wondering if we should just get rid of the material theme part um is that what i should do or should i just leave it as is let's get rid of the material theme part i don't think we need that nice oh wait that's not what i wanted oh yeah here we go okay um and then let's do the same thing for this one so we'll make all these private oh my god that's my fault what is this shortcut so you double press option on mac and then you use the arrow keys to navigate up and down and then you just type as if you were normally going to type so let's actually try the same thing here so light color palette will be um light colors um and then let's fill this out so primary will be light primary um does it have it doesn't have a primary variant okay okay um background light background um we've got surface the light surface pair will be air primary will be light on primary um what else am i missing on secondary will be light on secondary um on background will be light on background i'll also show y'all another cool uh typing trick in android studio once i finish putting these all out do we have on-air nice we do so the only thing that's missing are the primary variant and secondary variant i don't know why those were what um is it like surface variant is that what we want i don't think so there's a lot more colors here that are in the default material packages um yeah and i think that's it uh um what cp just said is there's differences in namings and stuff um but oh i was going to show you all another cool trick so let's copy this and let's paste this now if you highlight a piece of code and you do command r which is replace you can do like a find and replace within your highlighted portion so if i do light to dark it will only do this replace within my highlighted portion so it doesn't ruin the entire file it just modifies that portion that i had highlighted so i didn't even have to go into multi-cursor i just highlighted this and said everywhere that i use the word light replace it with dark um cool so actually then let's go to our toa theme function right here and um so his dark will be is system dark theme this is a boolean so previously we didn't have dark theme but now we can do it so if it is dark we want dark colored palette elf like color palette um let's go ahead and app let's go ahead and run this on our pixel 6 pro here and let's see what the login screen looks like i also like so we were looking at then these beta icons here earlier and um oh you can't see the phone because what is this desktop doing let's just minimize that um so even the keep logo has this and i don't know um if that's something we can do ourselves i would love to find out if like i can make my app icon follow this setup um i don't think it will work for this toa app because we're not using a custom launcher but like for my work for capsule app it would be really cool if i could make the capsule logo uh do this and i wonder does anyone know if that's like an out of the box thing or if that's like an api that we can use or like a special launcher file we have to create oh god dang this looks pretty good this looks pretty good that's the make test yup that's not works oh and that's our signing completed um okay that theming was pretty cool let's actually look do we have um did i not merge any of my from last week it's entirely possible that we didn't merge anything last week and so we're not gonna have i know we did um so why one sec uh whoops okay hold on let's do an add and then say replacing colors with material three plug-in palette um i don't think that i was updated on the development branch when i made this so i don't think that i have the home screen code um here in this example so let's what's this book is ready so let's check out development do a good pull oh it is up to date um okay so why can't i i guess i just couldn't search for it correctly let's find it here project app source main yada oh because i called it task list because i was smart um and i like task list better so let's look at task list content let's refresh this i want to see what this screen looks like um one thing i noticed that uh this was on me i think if we look at my system icons are not correct um is that my fault did we do the edge to edge uh yeah we did use dark icons equals material oh here we go so here's an interesting thought that we didn't test this last week because we only ever use light theme you see all this code right here what this did if you missed it is we get a reference to a system ui controller and we check if we're in light theme we want dark status bar icons otherwise we would want light status bar icons so we have contrast and then we have the side effect to set the system bar colors to transparent and to use the dark icons does anyone know this makes sense right did we see is light so does anyone have a hunch why i have dark status bar icons on this screen it's very subtle um and it's kind of a trick but we're like looking at this for a second and seeing if anyone can catch it nope the problem's not the boolean or anything to do with xml the problem is all this code is right inside of set content and at this point we haven't configured anything about our application theme uh whoops i won so if we remember in this toa theme function right here inside toa theme that's when we determine if we're in dark theme or not so the problem is that all of this code happens too early i need to put it here and so now that it lives inside this toa theme function this is where we'll have done that dark theme check so by default material theme that colors that is light um this is true by default um and we never made a call to see like hey are we in dark theme or not now i could have done it differently without wrapping it inside of my toa theme but i think that's where the code should have gone um yeah maybe there's something new in the template i'm going to put this in a private function by the way system bars just to clean that up and i guess that wants to be a capital c because compose okay so now if we run this we should actually see the status bar icons are correct um yeah i really like the way this looked i want to go and make this a light theme too and see how that looks but i really like the way that looks so let's turn off dark theme oh god it's blinding me and that looks pretty good too the colors are a little different than what we had previously but i mean um not bad so that's the color update um we also fixing status by our icons um there were a couple other things that the material the figma plugin gave us um let's move that over here so we have it so it also gave oh i see oh okay hold on there's code here that i missed um they create color palettes for us um that i wasn't expecting let me use these we're just going to copy that oh no this is going to be an issue because i renamed everything it's fine i know what i can do i know what i can do we can go back into color um let's replace these um so one thing is so md theme we basically just want to get rid of that um but there's something new here so this reference is a light color scheme and i have no idea what this is so maybe this light color scheme is um oh it's for material three compose i do have to add the material three compose dependency which i totally forgot um that's in alpha 01 oh got it so this is still early stages but that's fine we can use that here um where do i find here we go do i also need let's add that by itself and let's see what we get great catch dan i totally forgot that was the thing um and that explains why like the palette the existing compose like method was so much more complicated so this should if it's my understanding then will this match um i wonder if this will use anything for material you or not do you want to use the wallpaper accent not the theme i don't know um i don't know what i want i want to start by just adding what the figma plugin gave me and seeing what i get and if it's not what i like we'll go from there but yeah i do think that if i wanted to be dynamic there's actually other work that needs to be um because let's go back and look at so does this change how the theme function works okay so we've still got this used dark theme which is the same oh and i see so in material theme instead of colors i set color scheme so let's go back to let's go back to our theme um is that not what it's called oh they made it private that's fine light theme colors dark theme colors white theme colors and then we say color scheme oh i probably also need this is probably a material three version yep uh oh okay typography is wrong shapes are wrong okay so a lot of things are different here let's keep going down what this is so this has app typography let's just copy their typography that they gave us and figure out if there's anything that we need to import um that's special so yeah we're gonna get rid of our urbanist stuff um yeah we'll get we can just replace it because we've got our own thing um uh chris thank you for the rain i appreciate it how was your stream how did it go um welcome everybody we are let me pause and uh give you all a recap of what we're doing because we're doing some cool stuff today um first things first welcome everyone this is the brand new pixel 6 pro mine just arrived today we spent the first part of the night um checking it out which led us down the rabbit hole of talking about android 12 and its new material u and how uh the phone screen and other system portions update to the like theming from your background and then we are slowly working our way into trying that out in our own apps that's a quick recap um working on a script to automate most of my fetching of twitch stats from the dashboard so you can put them in your blog that is really cool that would be really cool i would love to learn about that some of you all know like that i'm a member of the gde program which is like a program that google puts on that recognizes people and their like community contributions and part of that is i have to log all of those contributions and it's really annoying and i would love if i could automate like pulling down on all of my like stream summaries and stuff uh i don't know like what information you're able to get but if i can just pick like the days i streamed and how many people were there that would be great that would save me a lot of time from manually combing through the dashboard but that sounds really exciting i'm glad you had a great stream welcome everybody quicksilver welcome back really great to see you here this is the export data button in the analytics page of the dashboard interesting i will have to check that out clearly you can tell i don't look at the dashboard all that often um i like seeing my stream summary that it emails me like an hour after i stop streaming and like that's pretty much all i look at but and my stats are always puffed up when you come and give me the support i really appreciate it um so yeah welcome welcome everyone some of y'all have probably been here before some of y'all might be new but i appreciate it thanks for coming by um yeah so let me show y'all what we were what we were about to do we'll dive back into it because i'm really excited so actually let me just can i completely restart this well also let's let's go back in the dark theme here that was getting really annoying so anyways we um i'll even go back to further of a recap because i love when people join i love to give a recap of what i'm working on because one of the hard things with coding streams is like it's very easy for it's very hard for people to just jump in and see what's happening so that's why i have like a nightback command that goes around saying hey pause me if you want to recap but a raid is reason enough to do one myself so part of the exciting stuff i closed figma so i can't even show you um but there's a new material 3 plugin for figma to do a lot of the design stuff that we were just talking about so we actually use that for this sample app that i'm working on i uploaded an image and then i was able to get a automatically generated uh like design system and color palette um right out of figma so like here's like our primary and secondary colors and stuff it gave me a light color palette and a dark color palette it even gives me like typography information and so yeah we got all of this there's also a cool export in figma that will like export all of these colors and typography information into the necessary kotlin files and so that's actually where you're joining us we're basically copy and pasting code that figma generated and throwing that into our android app um and then we will run it and see what our new um styling looks like so that's the recap that's where we're at you're about to witness uh some really exciting stuff and all right at least what i hope is really exciting stuff um uh app typography is what i want here sounds like shape there's not a thing with the new material theme no you just have color scheme typography and content interesting that shapes is not a thing okay so this will not do the dynamic theming of um like the material u like this will not make my app like have a green tint to it because green is like my theme color right now uh but it should have a little more in depth of a palette than we just saw so let's take another look at this again before it runs so even though i see this blue color here this background um it's still i think like the default background and stuff let's see we're about to get a new oh wait we have issues um i think this is the thing oh hey um our min sdk is not 31 which is required 31 is android 12. we need to set that as our minimum support weight or rather not just our minimum but our target supported version in order for this to work on android 12. and as long as we're targeting that then this should still work and it should be backwards compatible um as far as i'm aware it will still be backwards compatible to previous versions but let's confirm we'll have to wait for this again no shapes yet coming soon got it so the moral of the story is sounds like material three is not production ready yet but it's close and because this isn't a production app we don't care we can throw it in there but stuff like this is really important for the android ads in the audience like obviously in your day-to-day job you wouldn't use like um an alpha build of something but it's really cool to play with it because like that's what like you could really help shape apis you know compose was like that compose was in a developer preview for a really long time and part of what's made it so good is because of those community members who tried it out and they spent their time like learning compose and giving feedback to the android team and the issue tracker like the people who try out these beta tools and provide feedback to the teams at google like they really drive everyone forward i love it have a good like quick silver we'll see you soon i didn't know the splash screen api is still in alpha interesting um what do we got here using relocation requesters and ares bring into view requester instead interesting so that was actually do we even need this still because this never worked in our app um like this this whole relocation requesting thing it never worked the way we wanted it to um so i'm thinking about thinking about getting rid of this code right here and not worrying about um the focus stuff so let's just get rid of that fix that another day what about beta one of compose wait splash scream is oh yeah this the splash screen is mandatory it happens automatically yeah i've noticed that um interesting that it's like alpha to customize that then oh here we go all right let's see what's different about this if anything um all right well it's light theme which is wrong it's also very purpley and this looks like not my theme um hold on what did we break so we've got main activity here this creates a toa theme that creates a material oh um oh so hold on i have ideas um i've got some ideas here which what are my ideas um i should do i need this line i don't know if i actually need that line that's what i'm curious about what i'm wondering is um um okay hold on so like a primary button here so let's look at that again this primary button is purple that's wrong right um but here's where we set like the background color and we can see even here it's purple which it shouldn't be so i'm wondering if anywhere i reference material theme that colors do i now have to do color scheme is there uh oh i see i see so there is like a material three ah so anywhere that i'm referencing material theme i'll need to update that as well yeah okay that's can i just remove um hold on does anyone know so we have this compose material right here for like the composed version can i just remove this and replace everything yeah that's what i'm wondering will that work let's find out and then we just go down to rabbit hole and replace everything um we'll get a lot of errors it'll be fine um where do i even start like what i like to do when i do that is i'll just hit the run button and i'll let the compiler tell me replace the import on the whole project also valid um actually yeah so like is outline text field in material three um that's a good question let's see wait why is this running all right hold on something's a little screwy um okay so the primary button thing fixed that's good we support this um but what i'm wondering is why why would i removed the composed material that um i didn't yeah why why didn't i get import the bug fixes everywhere um okay so let's let's try this a different way um so it sounds like everywhere we had material we would just replace with material three let's try that so one way we can do that if you highlight some code and you do command shift r that's find and replace for the whole project so you basically take that and just replace everywhere with material three there's 36 locations okay all right and so this will fail in a couple spots um because maybe there are certain components that don't need to be replaced with material three and that's fine but this at least gives us a starting point yep okay so here we can do color scheme that is light oh can i not can i do color theme that light is light in here um interesting there's got to be a property here right okay so here's how we can resolve this if we look at oh material u could be in material 3 that might make sense so we have this function here called light color scheme and what i want to do is i want to look at the implementation wow so there's really nowhere that we define it as light um so i guess if we really want to know without referencing the material theme colors anymore what does this gallon that mean about not just imports is we can just do like is system dark theme um we can just reference that okay uh what is this yelling at me about so out looks like outline text field it's still regular material that's fine um here we need color scheme dot air uh okay let's run this again let's see what our other bugs are uh button colors look like they're different ah so do a replace for a material theme that color so that's a really good idea let's do that one real quick um so this is an interesting one so button colors it's no longer a background color we have container color um the container color of this bun when enabled interesting so i guess we'll just call this container color and let's refactor ours to be clear as well and we can remove whoops let's get rid of that color i guess do i want this to be primary container then is that what it should be we'll find out um i guess that's up to me uh but i feel like the naming convention is implying that i want that to be primary container oh there's no caption for typography um so what is caption then label small we'll try that did i do i think i messed up my finder oh no it's just here oh i know what happened it's the places that were already color scheme they got the find replace did that twice uh right no shapes oh shapes are still a material too concept that's fine um but do i even i don't think i even need this in this project um circular progress indicator is also regular material still um looks like icons are not in material three um card also not material three um okay let's run this let's see what we might have missed what's this youtube link that's the video i want oh nice okay um we will take a look at that we're going to try to fix wow i really don't what the heck so they got rid of h like and headline media we could try that i don't like some of the i mean i guess i kind of like headline large medium small that is like a little better uh what's what i expected um let's see if we can skip through and get the highlights um unless chad wants to do a watch party of a 14 minute video together and give everyone an excuse to watch it together but i'm betting that it's just kind of explaining like the difference between them looks like it's yeah it looks like it's just kind of a quick version of everything we're already doing react to the video oh you mean like i i should do a video go to 805 okay [Music] this is for each text styles that have been adapted for material design too the naming and grouping have been simplified to display headline title body and label with large medium and small sizes for each compose models this with a new typography class its parameters are named after the styles in the material design 3 type scale create an instance of typography with roboto baseline values overriding the defaults with custom text styles pass the typography as a parameter to material theme now let's take a look at jetchat's typography the designer has given us a new branded type scale using custom fonts i do like one cerax and color start by declaring these fonts with the font family class these will hold instances of the font class which can be constructed with a font resource id and a weight declare the jet chat type scale using the typography class and override each of the text styles using the text style class our fonts and other typography values like font size and weight pass the typography as a parameter to material theme let's take a look at the jet chat conversation screen parts of the ui use different text styles from our jet chat type scale for example the message author and time stamp use the title medium and label small styles they access type theming values labels typography notation that's what i would think now that we've covered theming and material 3 let's take a look at another update to a key aspect of material design elevation broadly speaking elevation has changed from using shadows in material 2 to tonal colour overlays in material 3. this is a new way to distinguish containers and surfaces from each other increasing tonal elevation uses a more prominent tone well it's been moving that way elevation's been moving this way because historically we use shadow for elevation and that was great uh the reason that wasn't great is when we added dark theme and shadows don't work on a black background so like they actually had to lean into like the color science around like how do you use colors to sort of show that like surface or hierarchy in a dark theme uh and i find that like really like a really like mind-blowing kind of concept innovation overlays were a part of dark theme in material 2 yes which have also changed to tonal color overlays in material 3. the existing surface composable is an implementation of the material design 2 elevation system it accepts an elevation parameter and handles rendering shadows and overlays in dark theme we've introduced a new version of surface for material design 3. it accepts a tonal elevation parameter and handles rendering tonal color overlays in both light and dark theme surfaces are the back and composable world and we will just watch the rest of this together let's take a look at the updates introduced in compose material 3. material 3 includes a variety of updates to components like buttons app bars dialogues fabs and navigation components these updates will make use of the new material 3 theming values and include fresh new updates to each component specifications for example let's take a look at bottom navigation in material 2. it aligns with the material design to specification and accepts parameters like background color and elevation in material 3 the component has been renamed to navigation bar it aligns with the material design 3 specification and the parameters have changed to container color and tonal elevation to more accurately reflect their purpose there are a variety of updates to components in compose material 3. to get a full overview of all the components and how to implement them we've updated the compose material catalog app with a new material 3 section check out the source code on aosp and download the app on google play let's take a look at one of jet chat's components on the profile screen we have an extended fab to compose a message is doing a great this has been updated from the material 2 to the material 3 version here's a simplified implementation material too an extended floating action button composable inner icon and text composables and a custom primary background color here's what we did to update it for material 3. the imports for the composables have changed to material 3. we're using the renamed container colour parameter and the tertiary colour from our material 3 colour scheme instead some aspects of material u come from the new android 12 visual style and system ui two key areas where there are changes are ripple and overscroll ripple now uses a subtle sparkle to illuminate surfaces when pressed overscroll now uses a stretch effect at the edge of scrolling containers wayne thank you for the follow-up no additional work is required to implement these changes stretch over scroll is on by default and scrolling container composables in compose foundation 1.1 and above sparkle ripple is available on android for all material components over a scroll thing interoperability with android views is an important part of developing apps with compose and we've made some updates to support this for material 3. mdc android compose theme adapter is a library that enables reuse of material components for android xml themes for theming in jetpack compose okay okay the existing mdc theme composable is compatible with material 2 xml themes we've introduced a new mdc-3 theme composable which is compatible with material 3 xml themes it's a great time to try out compose material 3 in your android apps and we've prepared a collection of resources to assist you on your journey there's a new api reference documentation for compose material 3 and a new empty compose activity template in android studio featuring material 3 updates there's also updates to the theming and compose guide and as we've seen the injection example available and compose material catalog apps and the mdc android compose theme adapter interoperability library hope you enjoyed it thanks and take care that was great that was great that was really interesting oh and it looks like um the app finished running okay so there's some cool stuff happening here um can you remove all xml with compose at this point you can do most things there's probably still a couple situations where that answer might not be true um i think there's a lot okay so let's um so here's what we got out of the box for the login screen we still have what the heck oh okay well one bug is my fault so this is a knot use dark icons if we're not in system dark theme okay so let's fix that um but we've got a little bit of concerns here for me one being so actually on this um what about theme and manifest yeah you still need like that for certain things for like the status bar although you can do those in compose there are libraries to modify that and compose but there might be some system level things to still think about um but okay we've got a couple things i don't like about this first one being awkward why is this purple um oh my god okay so we've got a lot of things to try to understand here so and let's see if we can figure out if these are our faults or material three issues but this outline text field doesn't look right at all this outline you can see it kind of well on like the screen capture but like i barely see it looking at my phone um that's one thing also i don't think this is supposed to be purple um it's not and i think i know why um i should pref compose so i think i'm onto something here and this will actually maybe we need to go back and try to figure this out so uh let's go into our toa text field here um okay so interesting so let's talk about this outline text field why is that getting incorrect styling well if we remember when we did the refactor a little bit ago we saw that there was no material three outlined text field um so i think what's happening is this takes in some colors and or this has these text field colors that are using the old material theme they're not using material themed colors they're not using a new color scheme so this is a problem let's find out if there's okay wait so this shows oh it looks like okay we'll talk about dynamic stuff later but it looks like material three does not have text field yet um maybe wrap it in a surface i don't think it's that simple um but i'm wondering if i could like um like i'm wondering if i can copy and paste this myself and then do a find replace for color scheme right like we already did like um so like here let's copy this well make it composable and let's go in here and let's above my previews but below the composable let's throw this in here and so uh wait isn't this simple um i basically want to do this and then i want to call it with like all the same values so we'll call this like md3 text field colors equals outlined text field colors um and actually i'm hoping the android studio will be like hey yeah i can just auto complete this then i can like put arguments on separate lines okay all right we're onto something so here's the default code and we're going to do a replace for a material theme that colors with material theme that color scheme um i usually use screen copy but i on my machine was having an issue with android 12 um so and i just want the whoops i basically want to take this and i want to replace it to avoid this part and i only want to do that in this section okay um typing in this should be enough of having to copy all the arguments um okay so we basically took the default text field colors and replace them with the material design 3 version so let's do this so here we say colors equals md3 text field colors boom look at that innovation at its finest um i'm really curious to find out if that works i don't see why it wouldn't work um but yeah that's kind of a bummer that material design three doesn't have text field like of all components how did that get missed oh beautiful okay so all right we got kind of close except the text color is still dark interesting i wonder why so what is it so text color we do local content color um interesting is local content color also an issue with material three well what if i just change that to be like on background well oh i see i see so lonesome content color is probably configured to be coiled twitch mod thank you for the bits uh supposed to be like um on primary or on background or whatever but i wonder if we can say like we would expect text fields to be on background or so like like i'm wondering if i can just do like um i could do this but like i wonder if this is gonna bite me in a future screen can you draw a toa logo on a canvas and theme its colors with material three uh i don't know it might be technically possible but if you're gonna ask me to figure out how to do that i have no idea um okay so this is good our email thank you for the subscription i really appreciate it that's amazing thank you so much um all right so now our input actually looks a little better now um this is good uh what else is broken here well um whoops that's not what i wanted um uh what else is broken is that this button text is wrong um oh yeah i get that i get that but i can see that why that's a language limitation um let's look at our primary button real quick and let's figure out why [Music] this text is wrong so button i believe is now in material three interesting um and we've got um let's look at what oh so button colors let's try not overriding the button colors and let's see what material three gives us out of the box for button colors it might be entirely fine for us to just use what's there have a good night marker thanks for coming by um okay yeah we're changing back to just use the uh material design three button colors here let's see how this looks okay that's better um i see so that doesn't use the that wasn't the same container color as before but okay this is not bad and then what i want to run actually next so let's commit this actually we can say converting to material design 3. um that's pretty good and let's also take um a look at our home screen content and um uh yeah our task list content because i think that will give us also some issues because it looked like the card component was not material three yet either um oh i just thought that a hype train is close i don't think we've ever had one of those um okay let's look at task list content yeah because this is also not phenomenal looking um it's actually not bad but i think it could be better um because i think the card is not that like yeah there's a lot that i also didn't want this to be that color blue although i don't hate it um it might help us i have not seen it how do i get to it um i haven't looked at this one yet okay go to widgets hey look our weather widget works now is it a clock one is that what i saw i'm just gonna go here matt's not typing fast enough oh wait okay first i have to go head in the settings about phone android version repeatedly tap the 12 in the first line um interesting okay let's go to settings real quick um about phone android version sorry um let me ask to show y'all that i'm doing this now um how many times do i have to tap it it doesn't say will it be here now what let me go to this video of it oh this is just a what is it there's actually a widget but is it like one that i have to add or should it be added automatically when this happens or is this all just a ploy to make me go like repeatedly tap oh hey i got it i had to tap faster that's cool and then once i get but if i stop at 12 then i see that that's cool um all right so let's let's go back to this real quick one thing i want to see um so now we've got these components using uh yeah the icons are really cool um but we've got our app here using um the material 3 setup now so the next thing i want to do just for fun is material 3 should have um according to the page that i was on um dynamic theming and i forgot how we set that up let's see if we can find that um where i thought there was a code lab wasn't there a codelab for this mat um or i know that uh nick butcher gave a presentation on on this oh i don't think that nick route's video had um have a good night raphael got it cool let's click through this um can i just jump through um i want to do this uh oh that's adding dynamic color this is what we're looking for um with a proper material a theme in use we can make the ui dynamic with a couple small additions so cool wait so i have to apply it to the application file dynamic colors that apply to activities if available i feel like there's more going on um is that it is that is that it uh why can't i reference dynamic colors what's the import that i'm missing i'm targeting 31. the alpha above no i have it though right isn't there um oh oh i need mater oh it's not a material compose thing it's the material version okay we can fix that um so here instead of 1.4 we need 1.5 i should have known that i remember seeing that wasn't there a site where you could place an image and see the material you palette generated uh yeah that was a figma plugin that i used for that um there's a figma plugin called material theme builder and that's what generated this thing up here okay so this is cool but like is that it because that's what the codelab made it look like um and i feel like it's gotta be more complicated than that i remember in android dev summit nick butcher did a thing where he like referenced dynamic colors inside his compose theme um let's maybe i'll have to go back and find that oh is this a web version of the same tool matt oh it looks like it is that's really cool nice got it okay it's not as good but simply okay yeah so this didn't change anything about my app um so let's keep looking here so here's this is the codelab on dynamic color but it doesn't look like it's for compose and that's what i think is missing here so um i know we saw it now it's not going to be in here come on so let's go back material three i'm lost on what adam tries to do me too uh we just kind of figure it out together um dynamic color where will this take me this takes me to the material 3 docs um which like is fine but not quite what i'm looking for uh but there it mentions dynamic light color scheme so okay here we go actually this one okay i think we're on to something um where'd it go okay so this is a color scheme but it looks like it's ah i need to find we saw it in the android summit android devs on a keynote didn't we um where's oh bless you this is gonna be great let's take a look in the experimental animation inspector it's even easier to move this i'm gonna find it because i know i know it's here i actually don't think it was this early on oh yes here we go here we go this is it this yes after adding the material free alpha dependency to our app we can update our theme composable to work with dynamic color we'll use dynamic color when running on android 12 or at least s and update our theme logic to use dynamic dark or light color scheme functions to retrieve right here all right beautiful okay we can do this um we need to know if it's dynamic and then color scheme is better now as a when statement instead can i remember all of that probably okay so we know here if it's dynamic are you coding on a single monitor yes technically i have three but my editor is kind of only on one um okay so we need to know if we're in dynamic and then here okay so colors will be when so if we're dynamic and is dark we want to use dynamic dark color scheme local context that current dynamic and not dark will be dynamic light color scheme local context dot current um and then is otherwise is dark we'll do dark color scheme wait then we have dark theme colors else light theme colors uh why is this yelling at me so this should work because i've already um do i want requires api though i don't think i should need this because isn't that the whole point of this check but maybe the concept is not extracted from the oh you know what i wonder if that's why it told me that um where was it i wonder if that's why it told me i needed uh where was it here i wonder if that's why i need this kotlin compiler extension version um wait yeah i wonder if that's why i need to use this although will that work or will this yell at me yeah okay so that that's probably now it went away so that's probably one of the things that's new in the like column compiler extension version but now this is why are you yelling at me now oh i do still have the annotation never mind that's that's why it works also this is yelling at me for another reason okay we're gonna ignore that change and we're gonna add the annotation because that should work and it's fine for this but i'm worried about requires api because does it requires api yes this is what kotlin code looks like thank you for coming by doctor doctor look it's here it's beautiful it's everything i wanted it to be um okay but for the android folks in here as it requires api like isn't that a hard require like does that mean my app won't work on earlier versions now uh oh i never actually ran i wanted it to be expensive i mean it's a little cheaper than some of the other pixels where so that's that's a thing a benefit i really should buy a case before it gets too far guys this is beautiful that's so cool that's really cool uh-huh so let's let's put this to the test then let's oh and what when i focus is this also green oh my god that's really cool uh so let's put it to the test we have to of course let's go to photos let's um i don't know let's take this picture of grayson and um use as wallpaper um home screen and lock screen nice okay so now we've got this like off yellow brownish color that is now my theme so now if we open up ooh look at that fade wow honestly this background color also looks really good with the logo this is like too cool yeah this is really cool um i love it you love to see it material you and our own application y'all notice the background color too the background color is no longer like the solid black but the background color is like tinted slightly yeah matt said i should render the logo as an svg so it can take dynamic colors that would actually be really cool go light mode okay let's find out [Music] yep that's light mode all right i'm not gonna lie i don't like this color in light mode it's a little uh i don't know it's not me um but you know we have to try i know what i want to try i don't have the twitter app um do i have it in how do i get my um i've got like a oh here we go on my other phone i've got a pittsburgh knights wallpaper um they posted some new ones on twitter recently um i don't have the twitter app installed yet so i can't find it let me see if i can just go to their twitter uh sure i'll turn on password sync will it be recently in their media probably what no this is a lot of work just to find the wallpaper i want okay but i also don't have the twitch app on this phone so i don't have an easy way of clicking on what you sent me so i guess i will just have to figure something out can i if i sign in as me will this work i never auth with google before nice okay hold on um oh my god what is i don't want that do not disturb that's what i want search knights uh wallpaper from gg it wasn't this one it was a quote tweet i think nope where's this isn't the one i'm thinking of there were better ones um advanced twittering happening yeah i know how to search on twitter it's great um there were better wallpapers than these but i can't but all right let's just pick the fennec we can go with it um because the yellow the yellow looks so good um no that was an old one i'm telling you no it's hold on there's this one with the octane like i got this from somewhere i got this from pk somewhere um learning the code thank you for the subscription um but let's open this in our photos app that's fine we'll use the fennick wallpaper thank you for the follow oh learning to code also subbed not just uh follow thank you so much um all right the pk wallpaper the yellow is unmatched um it's just all right there's a little more yellow that i'd like hold on wallpaper and style no this is fine this is fine um how does this look also i feel like it would look better in dark theme hold on okay that's pretty good but yeah this something actually as cool as it would be to learn um how to make this logo dynamic it's almost like it's essential because this yellow clashes with the logo like i feel like if you're gonna have some sort of logo in your application you need it to be dynamic if you want to use dynamic theming android studio that's a really cool emoji or email whose channel is that from board deaf i am going to go follow that person i want to go look at their other android emotes that seems like that would be a person to follow but i cannot pronounce the name alcara diotro i don't know thank you for the following um all right but yeah this is actually really cool to set up the dynamic theming that's not what i let's get off of twitter um android studio there we are um okay can't choose color primary on the logo and take the color of the material you palette um can i do that that depends on well so okay is it an image or is it an icon we use an image can i provide what's a what's the color filter um effect used to modify the color of each pill oh i see so we could do okay let's try this so let's try color filter whoops if we could type color filter dot tint color will be material theme that color scheme dot primary okay okay changing it in the xml file i mean i could change it there um is it an xml file is it oh it is i mean i could change some colors here um [Music] i wonder if that's better um hang on well let me run this just to see what this looks like and then yeah let's look at the xml file because actually so there's um what is well so then maybe i would need to take the compose theme and export it into xml i would need to take my compose the theme that i copied and pasted into compose i would need to create an xml version um and honestly i should so like okay this was kind of cool but it made the whole check mark yellow but like it would be cool if we could still keep these distinct colors um i have an idea i have an idea no i'm not going to draw arcs i have an even better idea that an even better idea um what is my better idea well um so we've got the system accent color here right um y'all are over complicating it i can just reference okay look let's look at a let's pick a random path okay this first path has this gradient and it's got these offset colors why can't i just use like system accent color right here that's a good question why is this scaling at me oh because i need to override resource and drawable v31 okay let's do that first let's basically copy this um or wait how does this work um let's copy this and let's make a new folder drawable v31 and then here i'm gonna do new um file i see toa checkmark.xml it's it's been an svg this whole time yeah i thought we knew that i thought there was like i should have realized that earlier and called that out but i did not um why don't i see the preview option on this oh i didn't mean to say that it wasn't i'm sorry i just like i thought i i misinterpreted as like making an svg myself and i'm just i'm dumb i'm sorry um this was on me but okay so whoops nope hold on okay so like the other problem is like well if the preview doesn't show up on this which i have no idea why that's the case um are these the same color oh they're not okay so like let's just arbitrarily pick something like accent to 600 to 800. let's arbitrarily pick something and let's throw that on the screen and let's see what that looks like um why isn't this giving me okay now we've got a preview okay so looks like the layout editor can't give me okay okay we're on to something um what are my options here can i find out what the material x so we've got i say we've got primary color tones secondary color tones okay so we actually want systems accent one um let's see what that gives me that will give me the yellowish tints here okay but six 100 to 800 are darker ones um okay we're getting somewhere here so let's try this should be lighter color right so what what did the numbers go from why are these is it like 100 to 900 it will not oh will it change the launcher icon well i'm actually not using this as a launcher icon yet so the answer is no um this is still using the um this still uses the like default android studio launcher i can um so let's try 100 to 200 here what does this give me okay okay we're getting somewhere um what is this widget isn't this the widget we already looked at oh oh what what how do i get this once done exit and open the redesign widget drawer to place android s easter egg okay hold on okay okay okay hold on matt just blew all of our minds hold on we're gonna go to widgets and we're gonna add android s easter egg this is incredible so this gives me this gives me the palette this is sick so oh my god okay so yeah the animations are really cool so let's say okay would you use accent one this yellow column down the middle here i would use three would use the green one do we want the logo to sort of accent the inputs or do we want the logo to follow the same sort of theme as everything else um tap on one oh so it tells me oh so that gives me the hex code and it gives me the android resource id i don't know if y'all can read that or that's too small very cool okay so let's looking at this here's what i think i'm going to try to do so in the beginning we have the darker colors um does that this go from which direction does this go i don't actually know the answer to that do i want the darker color first i think i might want that um so let's arbitrarily play with this just for fun here so then we're going to look at this path let's do um we're gonna do a little have a good night doctor thanks for coming by i really appreciate it we're gonna do a little trial and error here and then this one let's go from say 400 to 300 and then for this one let's say 800 to 700 drinking some water actually cp i bet you that's how i bet you that's how these apps are it's probably like inside the launcher icon they've probably got a like v31 launcher icon oh my god so we could do this with our own apps i'm i'm i'm taking this to my company tomorrow and i'm adding it to i'm trying this in the capsule app tomorrow even if i don't launch it i'm trying it out tomorrow and i'm gonna see how it goes um okay so we changed a bunch of these curves it looks like we can't get the um thing to render oh but it's coming together so well look at this oh my god um wow wow i am having my mind is blown right now this is so cool um like this is out of this world cool um let's um yeah so we're gonna change the back uh but here's an idea so just for fun actually we debated if we wanted to use the uh oh changing the background uh which background i'm not sure what you mean um but before that i want to change the check mark part of the logo and i remember i asked if we should use the yellow or the green i'm kind of thinking about using the green for the check mark just to see what it would look like um so let's let's try that so let's use this um oh dark mode to light mode we can do that too yeah let's do that in a sec um actually we've got two things here do these follow okay they do follow the same so let's do 3 800 to 3 700 and let's do the same thing here uh three eight hundred to three seven hundred all right moment of truth are you all ready to see what this is gonna look like oh yes it it will it will change in real time and we'll look at it and i'm not in love with this i'm not in love with this i don't know if it's because it's too dark should we go for a lighter green let's go for something let's not go 800 to 700 let's go more in the middle like six to five um yes i'll show you the uh light theme dark theme change in one second a little better a little better actually i i don't hate it i don't hate it and let's um oh i see yeah change it sorry so learning wasn't saying like okay matt wants light mode we'll do light mode we'll also change our background again to a different uh image so let's go light mode okay so the system colors are actually not drastically different in light mode um i gotta rethink this this is that green is kind of jarring um i think in the standard yeah okay so in the default thing this the check mark basically follows the colors that were in this third portion so that's um if you look at that here that was what so it was 1 800 to 700. so 1 800 uh 1 7 1 8 one seven okay so let's try this so it won't be the lighter yellow it'll be that darker sort of like getting closer to brown um okay what do we think i think this fits better and this follows the same sort of set up the original hand where it um it matches the third portion of the thing yeah it does fit far better um let's go back to dark theme and you know what else i'm going to use to help test these things an app we're going to use backdrops this should not take long to download backdrops is a really cool wallpaper app and that would be really cool to go find um yeah i i don't disagree with you but the other thing to consider here is like the system accent like this is something the user um the user chose so like we might we may not like yellows but i think the idea is like the user does um right so like this is a an icon i used a background i used to use a lot um that's blue so let's see what a blue looks like um inside our app let's remove oh oh i'm in love oh i'm taking a screenshot of this this is going on twitter later to discuss what we built today oh i should just make this my color palette like screw whatever anyone cares about um that looks good this is incredible um okay but let's let's have more fun i want to have more fun someone give me a color first one to give me a color and chat wins what are the new winter pellets we could check green okay nice um yeah this is what the new palette looks like so the accent is like a purple um i think the purple is a good accent i wonder where i wonder where in the material uh three that that accent three is used because like okay for a check mark right like using it there was a bad idea but that purple would make for oh i bet it's like the floating action button or maybe oh yeah maybe that's maybe that uh three is like the equivalent of like a secondary color so i wonder if like um like a floating action button would use that sort of purple actually you know how we can check that gmail we can just open gmail um and i hope that and hope that i have nothing public oh no so that floating action button is still blue um interesting but yeah maybe that there's somewhere that purple would be used what color is when the text box is activated that is also still like a blue i think yeah um interesting um yeah oh but we wanted to it should pull from a one two three huh so hmm okay do we want it to be dark like do we want to go like you know like no let's do likes okay okay okay let's play i'm gonna commit this because i like this oh yeah i'll definitely go double check my screens i mean yeah i'll do i'll go double check all of that for sure okay i want to commit this because i do like this as like a i don't want to lose this point is what i mean we're going to use git for what git is good for um and then we'll play around a little more um okay so each section so let's go um let's go with like 600 and let's try to get like a more a bigger gradient let's go from 600 to four hundred so that will be x at one this will be two six hundred to four hundred and then we would do three six hundred um and then yeah we would use the same thing for the check mark portion um how difficult was the transition from xml um oh good catch matt um it was i mean it's a learning curve right like it's not easy necessarily but um i found it to be worth it and my best sort of comparison uh to go from xml to compose is for any of you who went from java to kotlin do you remember how like when we first started using kotlin there was a lot of time spent learning because kotlin was new and there were some different things but now that we are familiar with kotlin we're a lot faster right because kotlin helps productivity colin is more concise and has tools to do the same thing faster and when you first start it's slow because it's new but when you get used to it it will be faster i think that we'll find a similar thing with compose that right now as a community we're going through this transition where we feel like development is slower because we've got a learning curve with compose but once you become familiar with it you will iterate so much faster that's kind of my opinion of of this i have no idea if this is going to look good this accents one two and three but i'm really curious to find out it's either gonna look great or terrible what do we think chat beautiful or no i i think it's i think it's great i think this is i think matt was on to something you like the old one better reverse the gradient um oh okay okay where they go from like dark to light um will that make a difference everything apart from the gray interesting let's we could try reversing the gradient here i also should probably like move these into their own like color variables so i don't have to go through like eight lines every time i want to change this but that can be a refactor for another day i'm glad you're having fun all right this it's a subtle difference but it's kind of a little better that was onto something there um matt's been onto a lot matt gave us this idea then gave us the idea to use the accent colors and refactor them so matt is just streamlining this i'm going to keep taking screenshots because whatever we do i want to tweet out uh because this is really cool no matter what um so let's put it to the test matt picked green let's go to backdrops and can i like search by color i can so let's find a nice green background this dark one looks kind of like nice and tranquil what do we think we want to try this both okay so here's our home screen so it's green but we get kind of like a a teal thing i bet it's gonna look really good are we ready for the big reveal all right that was kind of anticlimactic but yes also pretty good pretty good um i actually want to so i think i think i personally am going to hate it but let's go back to the now that we've changed the way this works let's go back to the knights background and let's see how that because there was that purple that we thought was weird but uh now i'm wondering if the purple will look better um with the other changes or if it will still look weird can we see the original icon again yeah we could we can do that um one sec um [Music] what am i doing i'm opening this or oh it was the green that was the pk accent and now this is actually better like i think spreading it across the different accent colors was nicer um is that claude clark uh recap so what are we doing tonight uh so we started off the night we unboxed the new pixel 6 pro we took a look at the camera and some android 12 stuff that was really cool um and part of android 12 i'm sure you may be familiar with material u which is um a way where android can take your background whatever your background is and it tries to theme your phone to that color so like here we've got this yellow background and we can see we have yellow icons and if i pull down the system drawer everything is yellow so that's kind of what we're working with and what we've done is we're trying to take that concept and add it into our own application so we've been working on a application for a while now it's going to be like a task management application we're actually not very far the biggest we've done is the login screen uh but now we're taking that login screen and trying to use it with this material theming so if you'd like to see it live what everyone else has had their minds blown with you can see this matches the yellow palette that we have um let me show you uh one of our favorites so far was um i really like this blue background so i'm going to set this as my home screen and lock screen again and now we have a blue theme and if we look at that inside our application this is what our launcher or what our login screen looks like so yeah that's what we've been doing is working on the dynamic theming uh with um our own individual android application um the wolf red background look nice okay let's go try we could try a red background go into backdrops uh was that one of my was that what i had favorited oh apparently it was um i guess i went through a red phase i don't remember that i'm not typically a fan of like red backgrounds but um it's nice i think material use done a really good job of taking like if you pick a color that can be very strong like red or even certain blues well any color can have like a bright shade to it they do a good job of like dimming it like this is red itch you know what i mean um a collab with another developer i would like to i just i haven't invested the time into the logistics aspect of like setting up the stream to support another webcam um figuring out how to really like capture another webcam and stuff like that like it's a logistics aspect that's hard for me and why i haven't done it yet but i have no problem uh bringing other people on plenty of abs but in addition to seeing that let's look at our app another another beautiful one not my cup of tea but like definitely very impressive colored palette like if you're a person who likes red um i could think this would be really good um yeah exactly they do a good job not like over saturating things anyone got a color we haven't tried yet or maybe we can just scroll through backdrops um whoops see so we did green um or maybe we could pick like a multi-colored one see where it lands us um let's do purple let's see what a purple would look like oh and then we'll do a multicolored one and see ooh this is actually very calming what is the blue background called um in the backdrops app it's called parallel pulse this is one of my favorites i use this for a really long time i like i love blue blue is my favorite color and like the lake and the mountains i find this very like serene and calming but i have to be honest this um this purple one also very calming and so let's see how that looks yeah that one's also pretty cool um i think whatever we pick at this point i think we've settled on like a really cool configuration um what an incredible idea matt like this was so much fun and also it looks when you blow up the phone like this it looks super grainy but the logo looks pretty smooth um not our thing so um i'm wondering how difficult it would be to um convert this into a launcher icon um actually is it complicated okay well let's commit this so um i'm glad you feel that way that's what i that's what i thought it's been a while since oh multicolored next okay i'm sorry i'm sorry i'm sorry y'all are the ones who decided to watch an adhd streamer you brought this upon yourself um sorry uh okay what's one that looks really multicolored like this one i think there's like the green stands out does this multiple enough should i just look up rainbow or oh here we go yeah this one's great let's see what this gives us okay so it looks like ah we can actually make this choice ourself if we look at wallpaper and style which we looked at earlier you can see i actually have four options here to pick and i can choose what is emphasized so like here i can choose to emphasize the blue or to emphasize the pink um what's the widget say let's find out well let's go with this um so here i changed it to where the emphasis is blue so um now i'm gonna have to go grab her phone and mess around with these backgrounds yeah the app i was using is called backdrops if anyone missed that backdrops really great app for finding backgrounds so i'm obviously partial to the blues um but that looks pretty good but let's change it let's change it up let's um let's go back to where there was like oh let's use like pinkish color that's more primary now interesting so it looks like for the picture it looks like the accent three doesn't change but it's the accent one that you can kind of control yeah i'm really fascinated by the color science behind all of this too um yeah okay so um so when i do a launcher icon for apps i always just um i always just end up um what's the word just importing a new image but i think here so where we have the ic launcher.xml we reference um background and foreground so here uh we would do ictoa checkmark um uh ooh do i want yeah i do want this no matter what the um but i'm wondering for background can you set a color can i just do like what do they do here um actually let's just i want to run this what happens if i put this one on the home screen as it is okay that will do anything um but now let's run it okay that didn't work why not um oh because it references um oh is it because i'm i need to also update i see launch around that's possible i also wish there was like i mean i guess there's adb install um where i could install it without oh god okay oh you can't see this all right this was interesting um so a couple things here this is i mean yeah like what happens if i remove the background can i do that is that valid um will that just then use the same color that the other apps are using okay it does oh no it's not it's black what the heck is that actually like um where is that color coming from does anyone have a guess where this is like is that another um yeah okay but like what color is it what's the theme color i have no idea um would that be documented somewhere i'm imagining it's one of these like neutral colors widget please sorry so it's gotta be one of these like ben thank you for the follow it's gotta be one of these like neutral 800's or something um actually and then here system neutral one 800 let's just try that n1900 okay um this will probably yell at me let's override this in v31 um and actually let's yeah let's leave that here and let's now that we have it in 31 let's just no i want i want to roll back these other files so i see launch around in v31 that's the one that will do our thing um and error screenshotting and asking adobe colored picture i mean it can't be this won't be the first time i've done that okay this actually looks okay it's still a little dark i also need to figure out how to fix this padding do i um size of the icon itself no i don't think it's that simple i actually think i would want to copy this um and have like an um a launcher version and then i think i just need to modify like the viewport or something um yeah like something here the width or height of this i would need to modify um when i that's why i like when you do the um when you do the import you can resize it yourself but i lost i can just go to fiverr and i can get the svg from then or another way i've done this actually in like um if i go into figma i've done this before this part this check mark i could do like actually this is how i did it before i copied it as as svg and i just like actually here hold on i might be onto something um okay let's go to res let's do new uh image asset we want a launcher icon and we're going to do a search um oh nice we have toa checkmark.svg i have the check mark as an svg and then what i can do here is actually in this resize i can just like resize to fifty percent let's see that let's resize to fifty percent um okay and um let's just go to next oh wait wait up you're right you're right background layer um color what do i make it should i just like make it black for now or white um like should i just uh name is fine name can be icy launcher um let's make it black for now and then um no it's fine if it overwrites it um i'm fine with overwriting it and then i will just have to take this new one and modify the colors for a specific thing so how does it make it a png okay so here we've got this ic launcher foreground okay yeah so this is what i want and i basically want to here is where i would replace the colors was that about it um actually here let's we're onto something here so this in theory should be the same xml file the only difference is the viewport width and height so if i oh but that probably changes the path doesn't it oh maybe it doesn't i'm wondering if um i can just do this um um wanna wait wanna wait um and then if i take this if i okay here actually oh my god yeah so we did that we changed the viewport and if i rename this to i see launcher foreground then it should um oh wait no i don't want to i don't want to do that i only want to rename this one file launcher so this is already in v31 so no don't rename anything else just rename this one file okay i will do it myself oh my god why is this deleting every usage this is so annoying i'm about to do this via the terminal um all right we're just renaming it via terminal but now it should have the same name as launcher foreground so i think why is this yelling at me that's just catching me i think that will work duplicate resources why um uh [Music] is this the only i mean because there's should i just delete the webp versions because it looks like those are unchanged let's try that um see if we still have because do it man hydrate or die right okay one oh okay i started typing in here and i need to remove that there we go all right now we might be getting somewhere it's also it's after 10 o'clock here so i might wrap up soon-ish but we'll see we had a good stream thank you all for coming by tonight i really appreciate it okay um why did i lose hold on oh okay so one problem is i in renaming and renaming the launcher version uh for uh drawable v31 um i got rid of the ictoa checkmark file that i actually care about um let me go back here um and actually bring that back in so i guess i'm going to have two xml files here that are effectively the same but with different um like sizes but i think that's fine um i'll just have to know that that's a thing if i ever want to change the logo for this application um but we'll worry about that then okay so this i haven't shown the icon yet because i want to make sure i fix that oh the icon didn't work did anybody see that um that's upsetting okay so there's that um but the icon's still broken i have why have a good night we'll see you soon um okay let's i'm gonna so i have it let me delete this file and wait oh my god i swear i hate this i just want to delete this one um but i don't think so because the thing that's changed the size was um the thing that changed the size was the high to e like i don't i don't think so um let me take [Music] how do i let me get rid of my v31 version and let's run as it was you're right maybe you're right maybe it's because i changed the size and i didn't use okay yes so here is a working version um trusting android studio to resize it god that is really grainy um i was only bringing in um on uh visor okay okay so we're getting somewhere now so basically we have to do the thing that i was trying to avoid doing earlier is um we basically need to take these and replace them all uh which is fine let's just do that real quick so 400 six hundred so then here we do two four hundred two six hundred uh i'm gonna do this but then i'm actually gonna ask y'all about an interesting idea do we want the launcher icon to actually be three different colors or do we want i also want to make sure i did this right um or do we think the launcher icon should be one specific color because that's what all the other um apps are doing so i think that we would actually be good to make this all one color um i'm gonna do three for the moment just because i wanna like make sure this works but yeah i'll probably change this back so that it's like one solid color um trying to match whatever this is using i bet google has spec this out somewhere yeah okay that's cool okay let's actually see if google has answered this let's go to wallpaper style so it's themed icons is what they call it so themed icons android 12. let's see if google has any official documentation on this um nothing shows up from the google side um yeah sorry i should have stayed on this longer uh it technically works we are able to get our themed icon in android 12 but i think we need to figure out how the heck we match the existing system um and i don't think i'm gonna find that from like one of these websites um yeah so what are some ways we could guess i mean we could pull up the pallet and you know this kind of looks like a1 100 if i had to guess let's try that so i wanted i said i want to make them all the same right so let's do one 100 the that's for the background right not the foreground yeah okay let me try that for the background in a second we're going to use a1 100 for all the foreground stuff and um okay so we're gonna look at i see launcher round there's this ic launcher background nice so here we can do android system uh color system neutral to 800. all right uh 30 seconds learning to code we'll find out if this is it right now um we're going to nope we're going to still use black for one two three five we're still gonna use black if it's like below v31 i will put it on youtube later if you actually have to go but we're running right this second if we want to see if we get lucky i will be so happy that's so cool um i almost wish we were oh oh i still wish we were like using the tri color somehow um but at the same time i feel like that would be breaking the home screen synergy here um but we we got it working oh incredible what a night what a night okay and then we click on it and that's the home screen version this is stunning ah all of this oh my god i'm in love this was a very exciting night thank you all for joining me in this very exciting night um let's commit that code um very cool um the sizing could be adjusted a bit yeah i probably could um but i'm too afraid to mess with it now um it's just bold yeah um what am i so i could i'm afraid about re-importing it like because i'm not going to what's the word um actually this is a good question um like i'm worried if i change the size i will break the pathing again right so if i even if i tried to replace 108 with like i don't want to cut it in half what's like 75 percent of that somewhere around seventy-five i'm gonna change this to like 80. um whoops i actually don't want to replace there were a lot of those i just want to replace these ones up here i think this breaks it let's verify that this breaks it um okay that does indeed break it um so how could we get around this well i could reimport the svg all right we're going to hack our way around this we're going to re-import the svg like we did earlier and then copy the new svg xml that it generates do a git reset and then just paste that new xml that it generated so new image asset um oh hey it's right here um so we resized to 50 but we said that was a lot what if we go down to like 40. um i did change both although i actually think i could have just changed one isn't that the point of a vector one isn't that the point of the vector if i just change this like viewport width is what determines pathing and the width and height are what's actually the size of the vector isn't that the whole point so well this might work it might be that simple nope that didn't do um okay so let's go back to my idea um we're gonna re-import and we're gonna set let's do 40. um so take a look at this circle so that's going to add a lot more padding if i go to 30 i can't go to 35. if i go to 36 that's looking a little too small what is the group scale let me try that doesn't help me a ton oh maybe i don't know what that number is i don't want to mess with it let me try this just for fun because this is looking like closer so um weird this kept it as 108. oh but that changed oh you're right this scale element is what's different than what was there before okay so let's try this let's do we're going to get reset back to what worked and let's just paste in the other group scale and let's run whoops and well actually yes let's paste it there but let's also paste it here and that's the only ic launcher foreground or i see launch around there oh that's fun i want to make sure those are the only ones yeah they are drumroll please um it looks like the google apps are consistent and i bet when these are no longer a beta feature i bet that they provide guidelines okay it's still kind of thick but like it's no longer as close to the edge i feel like if we we would need to figure out like i'd really need to dig into the actual like pathing for the circle itself to slim it down but i think just making it shrinking it overall the scale i think that makes it look a little nicer but it is indeed still like kind of stands out um but yeah it is better for sure um what do you mean two launcher icons in the home i don't know what you mean by that oh uh this is an android 12 feature to have like um themed icons on the home screen um actually you know what i do wonder though if i turn that off does that impact my app my icon as well or have i broken interesting okay so yeah web shark had the same question at the same time so i did break this um but again i guess that's what i get for not knowing what google wants me to do because there's at least no documentation on themed icons so interesting um so i have no idea how google apps are doing it under the hood um but no it's actually still not terrible um and now it looks like i'm the one who believes in material you and not google so you know they're doing it wrong um i'm going to turn that back on though because i do like that and then i'm also going to go back to my favorite blue background i'm also getting hangry so i think that now that we have this working i think i might call it a night uh why wouldn't my launcher icon update is there huh all right so this is probably an interesting situation um life does that pick the system color once when it's installed yeah because it it like did i try light theme i did not um but i don't know if that changes anything okay yep we we're gonna have to figure out what what's going on here i bet if i uninstall this i wonder if it's doing something um that only works uh oops why is that why is it offline i'm not offline oh no i lost connection um please hold while i get that back got it okay well all right we still had fun with learning it i might want to go remove this code then later yeah because it looks like they must do something different because we've still got that like gray here and not the light version so i'm betting this is an internal thing that they don't want us to use yet um so i might commit what we have and just like note that it's a buggy concern but um yeah we'll probably just have to wait till there's some official guidance on their end before we um customize that any further but i had a ton of fun uh learning about material theming with all of you um i hope you all learned something this will definitely be up on youtube for anyone who missed it um yeah but i'm getting kind of hungry and it's after 10 30 my time so uh yeah we can check the jet app but i think i am getting ready to call it a night so uh thank you all for coming by i hope you all had fun i hope y'all found the pixel 6 interesting uh the camera stuff in the beginning was really cool and if i learned anything new we'll definitely talk about it in like a future stream but yeah let's see if uh anyone else is coding if anyone's raining that we can go hang out and find out i'm sure lando is live if no one else is yeah none of my um none of my science and tech people are streaming right now so we're gonna go raid lando the pro rocket league coach for the pittsburgh knights um that was the esports decal that i was using earlier we're gonna go raid the coach of that rocket league team so yeah thank you all for coming by i hope you have another great week um we'll see you all next week oh jasmine just followed right as i was leaving um and i don't have the alerts on this screen but i saw a pop-up yasmine high i'm sorry we're just wrapping up are you still here if you're still here i can show you what we did today you would love it um we're gonna go back for five seconds because i want to show yasmine what we're working on hi you are still here we spent the entire night looking at material u um i was five seconds from wrapping up but you're here so do you want to see what we built um so we've been working on like a task management app for a while now we're not very far we only have the login screen but we added material 3 into the app and worked on dynamic theming so this is what our login screen looks like using the material u to match our home screen um i can show you for comparison what it looked like out of the box with like the i should show you actually because you have nothing to compare it to so let me show you real quick um let's go in here um uh yeah so let's just replace this with our normal dark theme so this is the material u version that's matching my blue background uh but this is what we started with um we have like this slot of like orange yellowish check mark icon and there was some blue but that's not what i wanted did that not i don't want the dynamic i want you to use dark theme colors all right hold on that's a little buggy the icon doesn't adhere to the compose theme that's that's oh wait shouldn't it i thought oh you're right you're right okay nevermind that's not gonna work do i have screenshots of what it used to look like um i don't have them handy um yes but it was uh you're right matt ah i should change the icon i should like conditionally change backgrounds to demo what do you mean oh yeah oh yeah let's talk about that um hold on let's go back let me do a git reset i forgot where i was at yes i don't think i took a screenshot from before we started but um let me show you it in action actually in a much better way i can't believe i didn't think about this at the time so here is material u with the blue background to show it off let's try a different color let's go to backdrops again and let's try um we were looking at the screen earlier let's use this green background so there's a bug on the launcher icon that's what we're working with we couldn't get that to work but now if we open this up we can see the button and the check mark icon change to match our green theme there you go tada material 3 and android in action very exciting thank you for all of your incredible work putting this together and all of the resources that you and your team have put out there for us we love it it was very easy to try this out tonight um super glad you could see see this in action um we love it thank you for all that your team does so i will definitely be playing more around with this and if i can pitch what i would love to know is how the heck these themed icons work and when um we will have access to them ah we use the material theme builder so uh originally you can see my uh my intro figma work of what i had designed in the beginning here's so here's actually this is what our our screen looked like before material u but yes i played around with the material three the theme builder and so this is what i got this color palette up here so i actually took this color palette and i added that to the app and then we took that and then moved over to the material 3 version but yes this is actually what it was looking like before we added the dynamic theming and i broke that so technically i didn't break it but this check mark icon we actually change this to always use material the dynamic colors and i should probably go back to where uh this check mark only like conditionally uses the dynamic colors but that's on me that's something i will have to change later uh but i was getting tired and hungry so wrapping up but i will let you know how that goes um yeah i'm really glad you could see this i don't know if you've had a chance like i don't know if there are any like sort of outside googlers who have done dynamic theming yet i feel like i'm uh i'm on like cutting edge technology here i mean it was announced to us what yesterday so i guess i guess this is like it hasn't been out for very long yeah i'll i'll clean up some of the code before i merge this in following this week's but it will be up on youtube so people can see yeah the material theme builder helped a lot that was really cool and we use the export feature to export the jetpack compose styling so we added um like so like here is all of the colors that we got from the material theme builder that was really easy to copy and paste in the typography one was the same thing this was straight out of the material theme builder so it was really nice yeah an incredible tool um when actually this is a question while you're here is the like um is the like export to code feature is that like an early access preview sort of thing right now or will that be made public what do we know about that um because if it is an early someone posted it in the beginning the design decode thing if it is an early access preview can i reach out to you offline for early access yeah uh or more specifically wasn't there um this thing yes oh this is a preview um i have never used this in the year that i've been a gde but is it possible that i could use that okay i will i will fill this i filled this out earlier but i didn't really put anything in the description but i should um i want to pull the gde card on this so i can get access i don't typically say that but i want to for this because i want to try it out okay but yes uh that will be very exciting um we'll definitely try that out but we were all mesmerized uh we were all just mesmerized trying out all the different colors for this and talking about how we were mind blown and all the color science behind it that's very cool all thank you for stopping by i really appreciate that that was a huge surprise and

Channel: Adam McNeilly

Views: 1,350

Keywords: Android

Id: JGbI32wPR6k

Length: 151min 46sec (9106 seconds)

Published: Fri Nov 05 2021