Developing Themes with Style (Android Dev Summit '19)


[Music] hello everybody and thanks for coming and so my name is Nick butcher I'm Chris Bane's and we are both engineers on the Android developer relations team now the theme of this conference seems to be modern Android development which is why we're super excited to be here talking about Android themes and styles which have remained largely unchanged its API level 1 so despite them having been around for some time I still see lots of developers somewhat confused or frustrated when trying to use the Android theming system and I think this is a kind of a shame because effective use of the theming system really enables much more flexible and reusable layouts and styles which is great because it means you write less code and that code itself is much more maintainable and who doesn't want that but it does actually enable some modern practices and such as streaming so you can support things like dark themes or design systems such as material so I think there's some huge benefits in understanding the theme system so while it can be powerful it can be also be music easy to misuse or like not understand it and I think a lot of it comes down to the ergonomics of how we how we write these themes and styles so we get this XML tag right which is like a set of key value pairs essentially and but I think a lot of the problem is that it's largely an untyped system so you can put pretty much anything inside a female style and it will compile and roast you do won't complain it won't give you a handy little red squiggly underneath and who here has been frustrated when they're trying to apply a theme of style and it's not worked and the way you wanted it to I mean wouldn't it be nice if you had a tag like this so if you wanted to separately define a style you use you know a style tag and if you want to define a few museam tag wouldn't that be great unfortunately that doesn't exist so today what we'd like to do is and give you a crash course in understanding Android female system how it does actually work we're going to then give you some opinionated guidance about how we think you should use it how you can get the most out of it and then we're going to walk you through some apply applying this to and develop dark themes and support material theming so you can understand it let's get started so understanding themes and stars so as I said you have this kind of XML syntax where it's kind of like you have this named set of keys and values and you can think of these and both themes and styles as almost like configuration stores there's some where you can stuff some values in order to kind of refer to apply to something else later on but really themes and styles are very different and I think understanding the difference between them unlocks the power to wielding them effectively so let's like zero in and what the differences are now first up a style you can think of this like a map where it's a view attribute to values whereas a theme is a femaie treat to values let's look at what these mean so hopefully we're in a style something like this so the keys here in the map are these view attributes these are things that you would set in your layouts onto a particular view and the values are the resources that they can clickable to that attribute and you're hopefully familiar of all the different resource types and available to you to use themes on the other hand are slightly different the keys here are not view attributes there's something called femaie trapeze so critically these aren't things that you would set on to an individual view there's no kind of like color primary and attribute for any view type these are really kind of like semantically named variables for this configuration store there ways to kind of like stuff some configuration into a map in order to pull it out later on and refer to it they look a bit like view attributes they're defined similarly in your atlas file like this and they have the same kind of types of resource types as we looked at before but they are different when we refer to them and you can then refer to them using this question mark at rest syntax and then the semantic name for the value you want to pull out from this configuration store and the question mark here if you haven't seen it before basically means look up the current value for this semantically named thing in current theme and I think this is really cool I think like actually having this level of separation and allows you to do some cool stuff so let's work for example of where this matters so this is example from the material library which defines this team attribute called colorprimary right and then in your application you supply a concrete value for this semantically named thing and so you set this value you set this color but what's cool about this I think is that if you have to then say support a different look and feel on another screen like say a pro screen has a different color scheme you can then separate that out and define a second theme which sets a different value for that and then say your product manager wants you to support light and dark theme and then you can provide different values again under light and dark schemes so what's really cool I think about this is it isolates the thing you want to change the look and feel that you want to change into just the place you want to change it consider if we weren't using few match boots here if you try to do the same thing these different color schemes for these different situations with styles you would end up writing you know it's four different styles but as we saw before a style is specific to a particular view it refers to layout attributes which in particular to one type of view so you'd end up having to write all these different styles for all the different permutations of views that you use in your application you end up with a slight combinatorial explosion of configuration you have to support by extracting out and having this like indirection for certain things it allows you to just isolate the things that are changing into the themes and then use your widgets and user theme and get the combination of those things at the right time so hopefully that's clarify the difference a little bit so the keys of these like configuration stores are view attributes for styles and few attributes for themes they also differ in that the way that they are applied so as we saw a style is specific to one particular view or view type and whereas a theme is applied to a system associated with a context and then applied to a hierarchy let's look what I mean by that so say you have a hierarchy in your application something like this if you were to apply a style and it it would just apply to that one particular view contrast that to if you were to set a theme on that same view using the Android team tag that would actually cascade down to all the children cuz it applies to a hierarchy and you are actually always running under a theme at any one time so there's always a theme somewhere above you so say the activity might have a few set on it or it might inherit from the application or beyond that and as search each of these themes interact and they kind of apply on top of each other now this can be really useful if you want to build something like this so here's an application which has a largely pink look and feel the color primary is set to pink but then at the bottom of the screen we have this kind of like related section which is using a different look and feel this kind of bluey look and feel so because we can have a theme that applies to the whole hierarchy we can set that blue theme just on the root of this kind of bottom section and have it apply to all the views that are inflated underneath it so let's have a little look at this stacking behavior there's a few nuances which is important to understand so in this example we might have a pink themed set of the activity or perhaps the root view of a fragment and like this and then when you get down to the bottom bit the blue hierarchy want you to set a different blue theme but if we look at these themes it's interesting to understand how they how they stack on top of each other so the pink theme you would define the things you weren't specific to that screen the icing some colors and so on but that probably inherits from a parent theme some like material components which is going to set up a bunch of stuff like some widget styles and so forth that in turn is going to Herot for an app compat which is probably inherit from the platform theme so you always have this kind of step of inherited styles and sat on top of each other and thing to understand here is that the nearest one to the bottom so that the news child kind of wins so if two levels of themes in this stack declare the same attribute so material defines a color primary and then you set your own color primary the one lower down is going to win it's going to override anything any parent won any ancestor so when we have this kind of like M hierarchy example again where we have the pink theme and the blue theme overlaid at the bottom there's a few things you've got to be careful of firstly is that they both probably have very and like common ancestor so a bit of a waste almost like applying exactly the same things which are already in effect likely no material components lights probably already in effect so applying it again isn't much use but more importantly if you will set a theme on top of another one you've got to be careful not to override something you actually wanted to keep so say the pink theme sets up some things like maybe you know something specific like a shape appearance for the whole screen that you actually want to apply you've got to be careful not to override it and that's where a technique called theme overlays comes in I see people getting confused by fume overlays but they are actually quite a simple idea there aren't a different type of anything all they are is a technique of using themes in order to do something specific and what you do is you declare that there has no parent you just say this doesn't inherit from some other thing and then you only declare the exact things that you want to change so this is designed to be applied to overlay on top of an existing theme which does provide all the other things that you need for your screen and I only want to change I want to ninja in and just change these two particular things so then if we apply this say a fimo overlay version instead then we'll retain all the things in the pink thing we wanted we're not loading up all the app compat attributes again and we're just changing those things we want to do so a female egg it's simple simple thing but they can be really handy and a little tip there's a bunch of them pre-made for you that I can not encourage you to use so for example material components offers a dark theme overlay so say you have a mostly light screen and you have a subsection which you want to be darkly themed and you can just set this and dark team overlay on that hierarchy and it will flip it for you and there's a light them as well also because of this kind of hierarchy and behavior be careful when you're using that context or FEMA societal context when you're retrieving things in code so you probably got some code like this somewhere in your code base where you're retrieving a color using contacts compact watch out and for which context you are applying just there because if you use one which is too distant so you're using one from the root of the fragment or something like this and these themes that get stacked on top of it so if you set that Android theme somewhere in your layout it's not going to get picked up if you use the context which is in below so you probably want to use the kind of the context of the nearest view so that any kind of themes you get stacked on top we'll be picked up or better yet prefer phim attributes so teammate rebukes are built to work with the theming system and so I'd encourage you instead to try and prefer to use team attributes rather than named colors wherever possible because they work with this system and if you in code need to do the same kind of overlaying behavior you can look at it using the context team wrapper which allows you to take a context and wrap it applying another style to give you this very same overlay behavior and this is what the Android team tag does internally so it really comes down to I think although people get confused like this where they don't understand the difference between themes and styles they say you just want to change the background color of a button right they're all been there and they try and do something like this where they set a style which sets color primary and the problem is that you know the style is like basically these view attributes to values and so you're basically trying to say set the color primary view attribute and color primary isn't a view attribute is this other point of indirection that's pre match view thing so this doesn't exist well instead you want to be doing is understanding the difference between why this team attributes exist how to use them and set a theme overlay like this which itself points to and it sets the color for you and I like to think of it as this don't bring a style to a few Veit like basically if you understand the difference between them why they exist and how they interact between each other and I think you it will resolve a lot of this frustration a lot of people see you around theming so ya understand the difference between fimo styles and is kind of like the fundamentals of this talk but understand why theme attributes exist and how you can use them and I've really tried to connect tease apart the difference between themes and styles but the reality is they're best when they kind of work together so you can and absolutely should create styles which refer to themes like female treats and so on and use themes which set styles so it's understanding what they're good at once you use each and how they work together Thank You Nick Nick's just spoke on the theory behind themes of styles now I'm gonna go into how you actually apply this to your apps so if made the most important kind of resource in your apps tends to be colors they're what make up majority things that are drawn now there are a number of ways to define colors on Android we have the color tag which it'll be made up a RGB color value now color tags can actually reference garlic over color tax so you can create aliases and the one thing to know here is that you can't represent from a color tag you can reference over cut attacks and so there's static colors now we're gonna talk about stateful colors so color stateless are a stateful wrapper around colors and it allows you to define different colors that are used on different states they use the same state drawable system as drawables but also has views so that's how that work so is example here you've got a button when State pressed equals true so when the user clicks on the view it changes color that's actually rippled but when you disable that view it also goes into this kind of translucent and that's powered by a color state list so if you actually look at how color stateless are made we have this selected tag and in this example we have two items now the first item had defines a color so it points to brown color bright and that will be used whenever the state checked equals true state is correct is enabled and then we have a second item which doesn't define any States and what that means is is that it's the default color so if it there's no other color items which will match the current state this will not be used now one tip for this is that you should always order the item to the color state list from most specific at the top to least specific at the bottom and this is because the way color status works it is traits through all of the items until you find one which matches if we actually go back to the example and swap the order around and so the item with no spaces at the top what actually happens is that this is the only color which is ever used no States means that it matches every state and so therefore any items below it will never be used only this one so it's a bit of a gotcha for you to know that so could a state this has had a number of upgrades over the years in lollipop we added the alpha modulation using the Android alpha tag and then the APR 23 2014 3 B styles or if you're actually use now compare backports all the way back to api 14 all of the a compact widgets kind of use this method internally so you can use it manually or a lot of the but so far is this text color or whatever it is and they actually use this internally so you can safely reference color stateless using fee match news in those styles so one way we can use color stateless is to avoid this kind of situation so I can almost guarantee you've got something like this where you've got a copy of a color with varying alpha kind of colors in there usually it's for grays so you'll have like a I don't know 20 or maybe forty shades of grey in there so what we really wanna do is avoid that because you don't want to have one color and then you change it but then you gotta go for all these random alpha variants somewhere in your app and change them too so what we can do that is use color stateless so color state lists don't have to have multiple items you can just have one and we can use that functionality of the default color to have that single item be that always color used so here we're gonna have point it to a fee match for you cook color on primary and so we can actually use the Android of modulation which I mentioned earlier which is a fraction from zero to one and what that will do is that will take the Alpha value from the color and then multiply it by whatever fraction you gave it and that way we get 25% color and primary here but you can copy this file to as many as you need and all the different alpha values um I never got to difficult state this is Malad this so here we have a color which were actually referencing as a background on a view doesn't have to be background could be foreground could be image view source whatever it is and put a reference in a color as a drawable now internally what happens is that the absolute system ball trefor inflate that color and wrap it into a color drawable and that's how what actually gets set but if you try and do this instead where you're actually going to set that to be a color stateless that won't work and that is because internally color drawable isn't stateful so it doesn't actually know what to do with a color state list now this will actually work on Android 10 above because we have a new class called color stateless drawable and so this is one gotcha for you that you'd always test on different API levels because nothing always works so one workaround you can actually use to get the same effect that works on all API levels this we're gonna use background Tingting so we'll actually set a rectangle we use it with a solid color I like to use magenta because it's very obvious when this isn't filled and everyone use background tint pointing to that color state list and that will actually give you the same effect so that's kind of some stuff at color and I was talk about some organizational stuff so I've got three top tips you hear the first one without naming your resources so I can almost guarantee you've also got some like this in your app which is a number of color resources which are named on fee match mute you're going to use them so we got color primary color premier dark color accent and then your theme you've probably got some not this where we've got this it points a fee match for you pointing to a color resource of the same name now we don't actually want this and the reason is because we're giving semantic meaning to what is just a color value it's just an A and our G and V value there's just a color but we're giving it a name and a semantic meaning what really want to do is give it a literal name so if you've got like a brand color or in this case a blue could be whatever you need to be naming us so or if you're using some a lot of materials color system where you have it defines colors in terms of tones here we've got material blue 500 doesn't ask me material but you've got like a toe system that's great to what we described here isn't really a problem just in feature stars it's a problem in general software engineering it's kind of if me anyway its interface as the implementation it's kinda similar to what Nick was talking right earlier in that film should be kind of the color system configuration for your app and anything else underneath is just implementation so interfaces would be your feel that's what you would go through to get a resource and then underneath you'll have your resources so your colors your draw balls you know whatever else it is dimensions so that's the first rule use literal names of your resources the second rule is usually consistent star names which is very different so again I'm sure you've got some like this where you have these stars here one called app-v one called toolbar and that's pretty obvious from the naming here you can probably often you can probably guess what they're about at Fame probably a themed toolbar probably a toolbar widget style but now we get out a third one called blue themed toolbar now it's not obvious what this actually is is it a theme is your style who knows now it's unclear because we don't actually know the type here because themes and styles as Nick mentioned earlier we also have to use a style tag who knows what he actually is so whatever you want to do is create some rules about Korean names what we have to do is embed type into the nameless system and that allows you to actually see what it's what it's for so here we're going to use we which the framework uses and also a compact Android X and all the rest of them which is a naming scheme which is delimited delimited by a period so our first group will be this tall type so themes styles could be text appearances fee móviles shape appearance whatever it is it's the type of star you're going to be using the next is the group name so this is more typically but your app name but it could be if you're kind of a really modular app could be just the module name whatever the local the logical grouping for your styles the next one is your sub group names so this is typically used for widgets so if we the class name of the the view that you're actually creating our style for and the last one is optional is variants so if you've got like a variant of a main style so so you got themed off app named blue that's a variant of the main theme so this would be anyway and these can be repeated so you can have variance of variance so if we go back to our examples here they would become some like this instead so if you have an app frame – my theme I've teamed up my app and then blah blah blah the widget styles the thing here to know is that the dot notation isn't by is actually kind of magic in the onerous system and that it's we have an implicit inheritance system based on it so here widget got my apt are tall but are blue actually implicitly haratz the middle one because of the dot notation it's built into their system one way at one place where this really shines this name is system and it's not this it's code review so here we have an example where I'm accidentally using a fee as a view style which obviously as we kept Riveria isn't good so here nick has caught it a code review because we're actually using that and the name embeds that type of information into the being actually read it for the name so we've caught a code review much better and we could even write a little role here to actually catch it for us masks and the third example of us our second top tip and the third one last one is splitting files so here we've got the i/o app from god this year actually here we've got our themes and we've got widgets and we've got ass text appearances and then really want file called Stars to XML now that's kind of bad because that file is huge I think it's like six hundred lines long which is kind of impossible to actually navigate and that's because they've organized all of their files bothered actual resource type so all styles installed XML dimension strings blah blah blah they're all in the same file name so one way we could do this instead one way you could do this instead is what we called easy mode so instead we're gonna split based on the purpose of the resource type so we're going to put our themes in our themed XML so these are just themes and theme overlays nothing else then we can have our type information so type of typography text appearances text sizes dimensions font files maybe all that stuff then one of our styles.

xml we're going to keep that but he's only gonna be for our view styles nothing else and then anything else are just fall into the actual resource type file note if you want to go the extra mile you can go what I call hard mode we're actually doing a bit further so we're gonna break our we're going to add split on logical types instead so if you've got anything to do with shape maybe the shape of smell or another example which is good is sushi why if you're going to go edge to edge which I hope you all are you can put all of all of your resources that related to that so any boolean flags or any colors of a navigation bar or status bar if you like that it doesn't have to be related to an actual resource it could be to the way you're going to use them this is really good if you're using the Android project view in under studio because when you have overrides by some resource qualifiers it will grid them all nicely and it allows you to see the difference between them super easily so that's at free as our free tips everything it's talk about material feeling Cheers cool so let's see we can actually build once you understand and know how to get the most at the theme system one thing I'll show you a big fan of is material theming so material theming is the idea that you can bring much more brand and personality to your application the material design gives you a set of like your own well tested well-designed research widgets but you should bring your own personality your own branding your own look and feel to them and so the way it does this is it exposes these free parameter systems and typography shape and color and just by providing values for the type of free shape and color you can actually achieve a huge range of expressiveness in your applications so your apps look and feel very different to each other and they embody your own kind of brand I mean quite amazing how much personality you can get with just these kind of free dimensions so let's take a look at how you use this so the color system and to start with is built up on lots of semantically named variables so semantically named variables I've heard of that yes they're all FEMA Trabuco steam attributes for these semantically named colors which you provide values for and then in the library all of the widgets is but we've refer to this semantically named thing this point of indirection and we'll pull in the colors that user so for the color system right there's a few colors you need to know and understand and this color primary in color secondary which is kind of your main brand color and a color to kind of contrast against that as well as variants we should often use for the gifts and contrast against those colors so you might be used like next to it for example there's ever thematically named ones really useful like color surfaces like I find very very useful as well so this is kind of immaterial everything sits on a surface which is a different elevation level and so this allows you to grab the color of the surface as well as semantically named things like color error so rather than having to kind of like hard code error occurs everywhere you can refer to this question mark after a color error and pull in error colors and things like that one of the things I really like about the material color system is it also gives you these on colors as well and so this is a color guaranteed to contrast against the similarly named one so color on primary for example will always contrast against primary so say you need to put like icon on top of a floating action button the fab is probably going to be colorprimary and then you can use color on primary to say tint and icon and it will always contrast against them a really handy one here is again color surface and call it on surface so you do this so you provide these concrete values to these somatically variables in your theme so we set up a theme so here I'm saying up a blue theme I'm setting some of these few match beats but note that you don't have to set all of them if you inherit from some of the material themes so material components light or just material components which is a dark theme then you can't big provide a sensible defaults so here for example I'm not setting a color surface I'm just going to accept the one that comes from the library and just go in and change the ones that I actually want to set and then you can and should use these in your layouts and styles so here I am like querying what is the current value for color primary and setting it as the background color onto a view and a top tip for this is that we can use this single item color selector and color state list that Chris talked about and with these colors to great effects that you don't actually have to like define tons and tons of different colors say for example you want to do like a divider rather than having to like you know create a new color core like color divider or something like that you can just get this color on surface which is guaranteed to kind of like contrast against the background color and and use an alpha modulation so just 20% of it in order to get the right color and the cool thing about this is it will respond to different themes so light and dark for example so here I am in a light theme where this divider in the middle of the screen here is like a 20% of the color on surface which will be black in a light theme but when you switch to dark theme then automatically color on surface becomes white and 20% if that gives you the right kind of shade of gray to contrast and so using these semantically named colors it can be really useful so you don't have to define tons and tons of different colors so that you know then have to maintain in your application that was color and next up the typography system material recommends you use a type scale which is a fancy designer II way of saying have a small discreet number of text styles and apply them throughout your app so you don't end up with like 15 different text slices across the different screens you have this small like kind of list of choice or palette of Styles which you should refer to in your application for consistency sake so it gives them these um semantic names like headline one have learnt to body caption button and so on and so forth and again these are implemented as few attributes so material design components defines these green pea mat trees and they defines them as text appearances so in your theme you can do this here you can set the theme attributes and point them to your own text appearance but you don't have to customize all of them you can again inherit from them to your theme which will sets them up with using Roboto but you probably want to provide your own text appearances which set your the fonts that you want to use like your brand fonts and then again you can then refer to these three match boots in your application so when you set a text appearance on it actually use the question mark etre and then put it in one of these named text appearances I'd go so far as to say that if your code reviewing and you see someone setting a text appearance which isn't a theme attribute you can almost consider this a code smell because it means you're not going to be like referring to this small pallet this is the whole idea of like restricting yourself to a consistent set of type styles and for anyone who's seen them using text appearance and got a little bit and worried because historically text appearance hasn't supported all of the text configuration that our text readers there's some things you can't send to experience and material components just like app compactors widget substitution so when you declare a textview in your layout what you actually get is a material textview and which was added recently and that adds some super powers to the text appearance so you can actually set more things in a material themed app than you can dress with a regular text appearance so in particular it supports line height so if you've tried to set a line height and one in the text appearance and wonder why it's not working it's because texts you and on the platform doesn't support it but if you're using material design components it does so that was typography and the last pillar is shape so material recommends using shape meaningfully in your application to convey meaning to be part of your brand and it recognizes that you might actually use kind of different shapes and depending on the types of widget you're using so it actually splits it into small medium and large shape types because you might want to set a different shape for large components like a bottom sheet then you might for a very small component like a chip so again these are actually let me define them using something called a shape appearance which is kind of similar analogy to a text appearance it's a kind of a configuration for this shape system and it's made up of them a few things first suffer is a the family so we support rounded and cut corners as well as a corner size like the radius of the rounding and which corners to apply it to like the top left bottom right that's one and then once again and you can figure this in your theme by setting these theme attributes so you point this shape appearance small medium and large components to one of these shape appearances which you've set up in your shape XML and the shape system also supports this idea of overlays which means that if you have a particular screen so say there cards on this screen actually one look different than the female a11 u17 you can use this idea of an overlay to kind of just go in and change the particular widget or one part of them and applied shape appearance but be wary that some of the material widgets to find their own shape appearance overlays some of you should be aware of so if you think for example look at the bottom sheet which comes from material design components you can see it sets a shape appearance which inherits from the large component and star which you said in your theme but it sets an overlay itself basically if you look at this overlay it sets the bottom corners to zero radius it says a bottom sheet comes from the bottom so it shouldn't have kind of like cutouts from the bottom so it's very opinionated and the way it should look and feel but you need to be aware of this because then if you're trying to like style a bottom sheet and trying to set those things by setting your large component shape appearance it's gonna overwrite it's gonna overlay with these things here so just be aware that some widgets do set these text fields do the same as well and a pro tip is that all of the material shapes system is actually pretty much powered by this one drawable called the material shape drawable and it's pretty cool actually and so it you construct one by giving it a shape appearance which is basically this how to do encode loading what we looked at for the shape of phone system and but one of my favorite things about the material shape drawable is it has this property called interpolation which is basically how much of shape system should I apply to the drawable so if you set the you know zero interpolation none of the shaping system will be applied if you set one all of it will be applied and you can actually vary that or knowing me animates it so here's an example where I've got a bottom sheet where I'm applying a shape appearance to it and I'm varying that based on the drag of a bottom sheet here so you can see that the corner rounding goes from this like kind of rounded shape up to kind of a squared off corner as it expands so it's kind of cool so those are the three pillars of material design so it's kind of a color shape and type and to help you kind of like play with these or understand how they interact with the different widget set we have this cool project I don't get hub called material theme builder so basically it's kind of a catalog app which shows you all of these few match beats the values I've set to them and shows how they will and result in you know what the components will look like for these given set of values the idea being here that you can download this and you can just play it has like you know somewhere where you can see all the theme that repeats that set and you can vary them so here I've just changed a few of the few matcher boots and you can see how it results in a completely different look of feel so it's kind of like a hobby project where you can take a look at it and you can vary these things work out how to what you want to customize and to get the widget set that you want to look at and then just take these these few match beats that you kind of set up and put them in your application and you can check this out it's on the material design components github repo or it's a short link and here also to help you understand how to use this you know color shape type theming and just this week we've open-sourced and two of these examples the third one is coming on to your github so we created the material has these material studies which are kind of like showing you how you might apply to your design and so there's now somewhat open-source examples of how to do it so you can check these out on their material design examples repo cool so the final section list talk is about dolphin so if dr.

he was added in while it was made public it in under a 10 as a new system setting and so story how you actually implement it so the way easy way to do this is use an app compat we've had day night in uncle Pat for a number of releases now and you can tell it what might know to use and so you use one of these two api's tell you what mode to use and it will do it will change the resource qualifier for you second thing we need to do is change our theme so here we're using theme pop material material components easiest way to do it is just to use the day-night variant that's what material design components gives you and that will automatically switch between light and dark depending on the resource kada that's being used so you might clean that's job done right we've done that two tasks the system's going to handle the rest well unfortunately that's not actually the case what happens so here we've got a light app so we got that content dark text on top of white background and then we going to dark theme sometimes this happens where you'll get dark text on black ground obviously not great really what we want is this like foreground text now the usually this happens because we'll have hard-coded colors in our styles or our layouts so here we've got a hard-coded black that's obvious not going to work right in a dark theme really what I want to do is to always reference fee match boots so usually your feet there'll be a color theme attribute somewhere that you can use and as we mentioned earlier things are either finge which are suppose to be correctly the source of true for all styling so there's a fee match beautiful for a color use it because it all the theme is the thing which configures your actual styling so this quickly go through create a dark theme so here we have an example we've got color primary and a color secondary and they're pointed to color resources so the material guidelines for dark theme and well in general say your primary color should be like a mid-tone so here we're using the 500 tone it doesn't have to be that number of it could be similar similar but material guidelines also say that in dark theme your primary color should be a desaturated lighter version so it doesn't have so much contrast the mascara the material color tool available online actually helps you with this task so you can put color in and play around with what your primary colors should be so here we have our fee we use in day/night but we have our color primary fee much beauty but we have two colors we have one for our light theme one for our dark free how are we actually going to vary that you've had which one we can actually point so what we really need is some it's a tis between the two colors so we could do some like this where we have a a value color primary color resource in values and then also one in values last night and that alias is between the two colors but if you remember back we don't want to do this we're giving semantic meaning to color values so what I'd say the easiest way to do is something like this so we're gonna try to extract your themes put them into a base theme and then add a layer on top then we can vary that theme in our values in beige last night pointing to whatever the varies so usually this would be a lot of the female groups that Nick was talking about the material theming called a primary color on primary all those and they will tend to vary in the different themes and then we can actually set whichever color we need here we're going to point to indicate 500 in our Lloyds in 200 some s I'm gonna talk about is the use of primary colors so this is the owl sample that Nick was talking about earlier which uses a really bright blue primary color for its surfaces now when we go to dark mode that bright blue is a little bit too bright it kind of defeats the object of a dark theme because it typically use at night it's a little bit too bright so material actually has guidelines on this it says that you shouldn't use really bright colors for large surfaces because they emit too much brightness for the user really what we want is something like this a much more dark muted color tone which kind of actually have matched the purpose of the user going to add our theme now really what we're doing here is switching between color primary of a light theme and color surface for our dark theme and luckily the material design components for Android library has built in support for this as a new attribute called color primary surface which does the aliasing for you it also has the number of styles which built in so action bar all the ones listed here you can use these styles and they automatically do this for you and we can use a default view style attribute so here we're going to set its so all of our bottom navigation views are going to use the primary surface version and then we get some not this so regardless of whether in light and dark we get the actual star we want dig me into that dark fame a little bit you can see here that there's actually multiple services here yeah so here we have two surfaces one a card on a bottom navigation view and there's slight different colors but when we actually dig into the stalls they're actually using the same color surface touch group so why is that so that comes down to elevation overlays so in light fie shadows actually cut the absence of light so you can see them but in a dark theme you can't see a shadow white up you can't see a shadow so well because it's dark so material has a new way to a new solution for that which is elevation overlays so as a dark surface comes the light it brightens it and that's the effect of elevation a number of widgets of materials on components have support elevation overlays these ones here and we'll skip through this because we are out of time but this is you can look at this later more posted sometime get them so you actually read this based create a custom view to use elevation overlays and that the goal here is that when you have your theme the goal is that your the theme that varies between light and dark is very small so we've got a sample which is seven attributes and you're in now you're on a good path if you got something like this and we're gonna skip the overview because we don't have time and we're gonna skip this to thank you very much [Music] you.

Leave A Reply

Your email address will not be published.