How a PRO-ANDROID Developer Creates XML Styles and Themes for their App

[Music] in last video i set up an infinite scrolling horizontal calendar using the paging library to set it up it was pretty bare bones nothing really even close to what i have uh designed and everything so what i would like to do in this video is walk through and actually get the designs to look very similar to what i have and what i want uh the reason i want to just kind of walk through this and do it all is well because i want to do that i just want to kind of show you how i design uh things and how i set up the styles and everything well okay so not so much how i design stuff but how i bring the designs that designers wow that's that's a funny statement whatever i just want to show you how i bring the designs that i am given to life and maybe hopefully you'll learn a little something from it i don't know we'll see i mean kind of your thing uh anyway let's dive in and let's uh play around and see what what we've got so i'm going to go here i'm going to launch this again so first up i've got to kind of take a look at these and see okay well this is barlow semi-condensed all right so this is going to be a one font and this would be another font fortunately we already have these fonts brought in because of what i did up here with the date and everything uh so i've got to set up the fonts and set them up so that they are sorry set up the view holders for each of these so that they look appropriate for each of the different uh days and such so that's what i'm going to be working on first is getting this properly styled and then i'm going to work on how to make it so that the when the user selects one of these it will look like this this middle one right here that's currently selected in the designs so that's my goal that's what i'm going to work on it's really just going to be that and that's it it's not really going to be a lot of really awesome functionality or anything yet but just really kind of creating this design and setting it up so anywho uh let's see i've got it right here you can see all right well that's kind of plain boring not interesting um yeah that's that's it the other thing is if i tap on these i'm not really getting a ripple effect kind of like when i tap up here see how i get the ripple effect i might try to put that in i don't know we'll see we'll see okay uh so first off let's take a look at the current day the day selected all right so this is barlow semi condensed black again black and this is also barlow semi-condensed black um you're probably not going to be able to see this but different colors here i think the same color scheme from up here applies all right so that's 75 that is 50 no so slightly different but very close so we'll go ahead and apply that more work on that and then i will set up this type this kind of square and i'll show you how i i'm going to always make it a square so hopefully you'll be able to see it or you'll be able to utilize that at some point all right that should be it that should be what we work on all right let's get going i'll go over here to android studio so let's go ahead and set up our styles first the way oops that's not the styles there we go so the way i like to do things particularly when i'm when styles are all grouped together so i like to use the style hierarchy and creating uh the hierarchies for styles um it's kind of kind of think of it like class styles that's how i like to think of it or sorry class styles think of it as class inheritance and the way classes inherit from each other styles do a lot of the same stuff so let's go ahead and do that and so we're going to say style name and i'm going to say horizontal calendar all right so this is going to be the overall star style name style theme i can't i shouldn't really say theme because that's what they use now uh it's just basically the parent class apparent of all the styles that are going to be going under the horizontal style and that's what i'm going to be doing all right so then the next i'm going to say all right style name or horizontal calendar dot because the dot indicates that this is a child of whatever the style is so i'm going to say text okay so text is a child of horizontal calendar so whatever styles horizontal get applied to horizontal calendar they also get applied to this text one uh i'm saying text because uh let's see let's double check 20 20 20 20. yeah all of these are 20. so i'm going to say and whoops item name android text size 20 sp let's actually put this in the dimensions file do i have one set up nope so let's go ahead and create one diamonds okay add let's see whoops die man name let's see what do we want to call this uh whoops or a horizontal cow blender text size uh 20sp yeah that's a bit of an awkward name but whatever at di men there we go okay next what i want to do is i want to create a style for the deselected days so these guys right here uh this so this is day of week and this is day of month so i'm going to say style horizontal calendar they're going to be a member of the text family or text class dot let's see day or d selected day of week there we go and then i'll create one for deselected day of month all right oops missing a d there okay so this is going to be a font family of the regular and this one will be the black and they each have a 50 uh black so should be very quick and simple i could probably just go up here and do this they're basically the same except the dave month is black instead of regular so let's change this real quick okay so let's go ahead and take a look at the selected one this color is 100 and it's also black and then the selected one it's a color of the green color so we'll go ahead and use that so i'm going to copy these two styles and then change the name from deselected to selected and we'll change this from regular to black and we'll change the black from a 50 opacity to 100 percent opacity and then we'll change this guy to green because it needs to be set off against this white background okay i think that's it yes okay so that's uh basically it for the styles okay and then we'll go ahead and we'll set these styles uh into the text appearance when we go and do uh the in code you'll see in a little bit so let's go over to the item layout and what i want to do i'm going to add tools background make this a little bit easier for us okay one second i'm going to quit something because it's annoying me there we go okay uh i set the background to green because green uh all right so this style is going to be at horizontal calendar d selected so we're gonna go deselected day of week and then oh wait that's there we go then i'm going to say style style horizontal calendar d selected day of month yeah yeah i'm having a little bit of a brain fart okay so that looks just fine i'm going to switch this over to the selected one because this is the one that i really want to make sure looks right and the reason why i want this to look right is because i'm going to add a background drawable that will sit behind this text view so i'm going to create the drawable so i'm going to go over here and say drawable and i'm going to say bg bg for background underscore selected day so bg background background selected day there we go whatever doesn't matter it's going to be just a simple shape and what i'll say is like okay android shape shape is going to be a rectangle cool um if we go back here to designs notice that the corners are just slightly rounded so i'm going to say all right corners radius we're going to go 5dp for the time being then i want to change the color so i have to say solid solid for the color android color that color off-white it's going to be that off-white and you can see it pops up here i don't want to define a very specific size for this because i want it to change the shape depending upon what's going on in the view holder okay you'll see in a little bit why okay so there i'm going to add an image view here not an image button here we go image view zero dp 0dp uh id and id is going to be we'll call it selected background android visibility is going to be by default gone tools i'm going to show it okay um so now let's go ahead and set the constraints start to start apparent end to end of parent all right so the top is going to be to the top of this day of month and then the bottom is going to be also to the day of the month all right and now the source at trouble bg selected a boom there we go okay shows up problem problem is that this is just like making taking up this amount of space like i want this to be a nice square based upon the height and there's a really cool constraint called ratio constraint dimension ratio and you can create a nice little ratio thing uh ratio depending upon the different constraints and stuff so one to one creates a square like 16 to oh dear i think it's 16 to 1. creates a nice little let's try this 1601 there we go creates a nice uh rectangle that is basically the parent uh you'll see 16 into one for a lot of um 16 1 ratio for movies and such one to one for squares and things like that okay so slight issue here is that this is all 16 dp around i want this guy right here or i want one of these to actually dictate the width and everything so what i'm going to do is i'm going to experiment a little and just take this padding away so that goes away and then i'm going to say okay i think that's fine because it's wrap content and what if i do 11. all right if i do 31 and 31 doesn't change it all right cool so i'm going to leave it at that for the moment so that's nice let's go w doesn't look like that's going to change anything t doesn't look like it's trying to change anything cool perfect hey looks good i mean it should look good i designed it [Music] [Laughter] anyway i'm such an idiot all right so now that that is done i'm going to go and i'm going to update the paging aspect of everything and the reason i want to update the paging is because now there needs to be a an indication that a certain day has been selected gonna change my there we go geez it's probably super bright for you for so long uh i can make a really awful joke about that and i'm not going to uh so what i want to do is i'm going to create a new data class and i'm going to call it day and day is going to have two variables val is select whoops selected and then val date uh its selection should be a var okay so is selected indicates that the day that the user has selected the day the day has been selected by the user uh date is that specific date and the reason i want to do this is because i'm going to change the background i'm going to change the style of the text in the background and everything of the viewholder based upon this is selected variable so i want to have this i want to set myself up for success later all right so now what i'm going to do is i'm going to go to this calendar source i'm going to change this from local date to day and we are going to change all of that i'm going to copy this and you can notice that i'm dealing with uh errors right here so what i'm going to say is val day equals day of today well actually it's true and then today all right so on initial load all right so on initial load what we've got going on here is that the day the current date the current day of the year week whatever you want to say is selected because that's the designs that's the way things are going to work like the the user is going to first launch everything and then we're just going to show the current day and we're going to pass in the day here into this and then we'll create our mutable list and then we'll do the same thing down here but with one slight difference so val day equals day is selected equals false and uh day equals previous day and then we're going to pass in day boom real simple next and we'll say all right i did this wrong so it should say next day and we'll say basically the same thing let's see next boom there we go so now the source is set up correctly but if i go to the factory factory is going to be an error because i need this day and now the factory is correct if i go to the view model though it's going to be giving me an error because this seems to be switched over to day there we go so now what we need to do is update the adapter to handle our new day and then change the uh what do you call it uh change the view holder based upon whether or not it is properly currently selected so let's go up here and we're going to change the local date to day cool so now i have to change the diff util which necessitates a change here and here and here and here okay there's a slight issue that i am currently running into i cannot say old item is equal to something or is equal and i can't do the straight up equals comparison why because if i go today i've got this local date and there is no proper comparison equals comparison between the date so what i have to do is i have to actually override the on equals method so go on over right or sorry the equals method okay so we can do this very quickly and easily and say if other is not a day we return false because well if you're trying to compare this day object to something else well you're going to get a error or something so we want to just say all right get go nope we're done move on move on false get out of this asap okay so next we're going to compare the is selected is selected equal to other dot is selected and you'll notice that this came up very quickly in the autocomplete because the compiler now is smart enough to recognize that the other here is a day because we did the comparison there i love kotlin partly because of this now i can do the date comparison so date dot is equal to other dot date and there we go that's our simple equals method it's very easy very quick to set up but one thing that we want to do is we have this uh what do you call it um lint check uh lint error uh look up linting basically it says anytime that you override the equals method you should be overriding the hashcode well i can sit here and i could try and say all right well let's hash those and boom so the hashcode is used to very nicely set up or sorry make it very easy for us to put these into like maps uh hash maps and such and then quickly look everything up uh date has its own hash code uh implemented hashing method uh so we're gonna rely on the date for the hashing of the day and in fact i could actually even do like this highlight over it and then we'll generate the hash code and we'll let those two hash and you see kind of like is selected that hash code and then it's just generating a nice little weird hashing function for us but i mean to be honest if i just rely on the date hash code we should be good to go because knowing day it's intended to only represent a day like one single day it's not like we're going to have multiple days so in a year in the year there's not multiple february 1st of a year there's only one so we'll have just a single hash code all right and now we'll go back here and we can say all right are items the same well we can actually short circuit this and say true because we know the items are always going to be the same because they're both day items and then we can go here and we can say boom boom boom there we go and now this will call this function for us all right now we've got to finish this out so we need to change our view holder to take in a day all right neat now we just have to say all right well instead of date we'll go day and then it'll be like day.date date there we go i'm going to change this from short to narrow you'll see why in a minute when i launch this okay perfect or near perfect now all i need to do is update the uh what do you call it just update the textiles and everything so what i can do is i can say all right fun or val text appearance equals if day dot is selected and we'll do an else and then i'm going to say r dot style dot or import that horizontal calendar okay so what i'm going to do is i'm going to create a pair because it's nice and quick and easy for me to do that uh date of week to r dot style dot horizontal calendar selected day of month and then r dot style dot horizontal uh deselected day of week 2 r dot style dot horizontal deselect the day of month boom very quick very easy and then i set the text appearance so day day of month uh or actually we'll do the day of week first because that's the first one in the pair day of week dot set text appearance and then it's text appearance dot first and then day of month dot set text appearance text appearance dot second so now all i really need to do is make sure that that white box shows up so what did i call it uh selected background so selected background dot is visible is equal to uh let's see what is it day dot is selected is visible is an extension function that the android libraries put together for us to say well i'll just show you there you go you can see it sets the visibility very quickly and easily all right that should be it so let's run it as it compiles very quick very simple ugly very ugly but you can see that hey the styling is there uh oh we're gonna go back and i'm gonna add that padding in just in case tools all right so there we go should be launching here in just a minute there we go all right that looks much better what do you think kind of neat right uh i like it i'm pretty happy with it it does highlight that that is the day i might mess around a little bit more with the uh making these a little lighter so that this sticks out now that i see it in action but i'm pretty happy with this and you can see it really just like pops up there maybe i'll switch these to regular as well um it's easy enough to go back in here into the styles and let's just take a quick look at that and we'll run it and see this is why we use the styles they're very quick and simple and everything just gets loaded yeah i kind of like that a little more it would be nice to get this to center itself on the screen right off the bat and then i notice you may not be noticing there is extra space here uh between this number this day and this day just a little bit more than between here and here and part of the re so we can actually we'll go here i'll show you something really cool so we'll go there we'll go settings scroll down system advanced all right so i did not enable that on this so we're going to do system about scroll down to the build number and i'm going to tap it multiple times i'm going to go back here i'm going to go to advanced i'm going to go to developer options and then where is the layout media show layout bounds and you can see it shows me where everything is laid out so if i go back to here you can see oh no i'm yeah you can see that this one is just a tad fatter than this and that's because of the way the padding is and the way this is all wrapping everything um i'm going to think about this and i'm going to maybe try and get each of these to be equal uh equal spacing into uh this so [Music] i'm not like i've done this before and so it's been a little bit and i need to uh think about that it would be fine but these are definitely a little bit fatter and for somebody like me who can who sees this um it's it's annoying however i may not actually do it and the reason i'm going to choose not to do it now i'm thinking about the reason i'm going to choose not to do it is i want to get this out the door asap i want the functionality there i want things to be there that are going to help the user this is what would be what i would consider a nitpick option and i can write this up as a bug in jira and then hold on to it later and come back to it later after the release the reason why is because i want to get functionality in front of users as soon as possible and not spend a ton of time nip on the nitpicky things at this point once the app is in front of users i can start seeing how they're going to be playing around with the app and using it and then i can go and say all right cool let me make adjustments based upon user feedback and user usage of the app and then also adjust the size of this at some point in the future all right okay so i don't think i'm going to go and make the uh go and play around with this too much i'm going to live with it for now main reason is i want to get this app in front of people i want to get it moving i want to go through uh get it to be to users as soon as possible uh this is basically it's a a bit of a strategy what i can do is write up a ticket in jira and save it for later a bug ticket that i can address later when i have more time uh because this is just such a nitpicky thing that i don't addressing it right now doesn't make sense because the app is not in front of users and this may not necessarily be something that is going to users are really going to notice you probably didn't notice it until i pointed it out and so it's not as big of a deal as something else or as um as other things um i mean i guess if i you know what uh i mean i guess if i really went and played around with it i could do it and figure it out but it's more important that this app gets to in front of users than fixing these nitpicky things in the future or right now okay and so that's a it's a very important business decision it's a very important design decision very important decision overall for the app and such okay so anyway if you enjoyed this video if you liked it um well i'm kind of getting ahead of it myself next i'm going to be working on uh this guy right here this getting to the uh getting back centering this and everything when the user taps on it it's going to be a little bit of a stretch it's going to be a little interesting uh because of scrolling and everything and moving all of that stuff to move to that location uh all right so if you enjoyed this video then you think that this could help somebody please share it with them otherwise hit that subscribe button and hit the notification bell to know when i'm going to post the next the next video in this series uh and i also try and post videos every tuesday and thursday when i can otherwise uh hit that like button to let the algorithm know that you like this video and this video is worth sharing with others all right so i thank you very much for watching and i hope to see you in the next video

Channel: Alan Hill

Views: 216

Rating: 5 out of 5

Keywords: android, kotlin, mobile app, android kotlin, android kotlin tutorial, android styles, android themes, android styles and themes, pro android developer, mobile app developer, professional android app development tutorial, professional mobile app development, android xml, android xml design tutorial, android design, android design tutorial, android calendar widget

Id: QlFuPGIQiw4

Length: 34min 47sec (2087 seconds)

Published: Tue Mar 09 2021