How to change style property and customize the lights and colors?

You can actually type here search for material components inside something like text so it should be in t uh you should get uh i think i skipped it yes text appearance so now if you see in text text appearance dot material components dot so you have body one all the way to subtitle two you have all these predetermined styles so choose one that that you would like so we could choose something like uh over line which is what i chose for this top one so once you select overline you see it has changed now this you can select something like headline six or headline five how am i figuring this out it is in the documentation so if you notice in the documentation we covered this uh last time so i will go very quickly in google search material design typography so and under typography the type system and you can see which one of these you like and then select the appropriate one from our android studio so let’s say for this one we want something like headline five so select this one same thing the style and you can find the style here but isn’t this a little too time consuming a little too hard it is it’s hard to search so one tip is use the text part of it so each layout file has a design and a text.

So select text and um so xml even if you don’t if you are familiar with it it’s fine it’s very very straightforward so select the second text view and it highlights it in our text and then add a new attribute here so within this opening and closing brace add a new attribute here called s-t-y-l-e and in the drop-down menu click enter and here you can just type in headline file and it it gives you very quickly usually it reduces the number of options here click headline five you don’t like it stay in the threadline 4 right so text editor usually helps and that’s actually the better way of making layouts but for now since it’s easier to work with design like it’s much more visually appealing we usually stick with design but text editor is at some point will transition to text perfect so we have changes to headline five and uh perfect so now we have changed the text of this now last time we even discovered how to change the color of our app so again as we discussed it last time um so under to do so we we did three four five change style property of we did five we change the style properly.

Yes now here you can go to six so as discussed last time under res values and colors you can download some extra colors so be sure to go to this materialpalette.com control and click it’ll open it in the browser and it takes you to this website that shows you all the material colors so select any two colors of your choice so i will select yellow and purple you can select any any two so yellow and red or amber and light blue mess with this until you are satisfied with the two color combination yellow and lime yellow and deep orange so i’ll just select this for today’s example and then download and since our android studio projects always use xml so select download xml and now it should download this xml file so you can open this xml file here you can right click on it and open it in notepad and now that basically are these colors here in xml format so now all you have to do is copy these colors so ctrl c and paste them where you have to look six paste them underneath here in your colors file now you have these new colors now you have imported these new colors as material colors in your app but however to use it.

You have to head over to the styles xml file within app res values styles and here under studio 7 you notice color primary is mapping to this color primary the thing is it the color primary in our styles is actually mapping these old colors color primary color primary dark and accent so map the styles right the styles color primary to these ones that you have so then it will change it will change these colors here so let’s see what i’m we’re talking about so this color primary here delete this and type in primary which is yellow basically it maps to this one right primary which is a newly downloaded color similarly primary dark so so change this to primary dark which is this color here for the last one accent change this one to accent so it doesn’t point to these old three colors now it points to your newly downloaded colors and your styles so now if you notice our app just change the colors and our text looks uh pretty good now to run this app on the emulator to see how it looks.

You can head over to the choose your emulator here and select the play button so in the build pane it is building our app and when we get all tick marks our app should start so we’ll give it some time for app to start and now we should see yes we have seen this color and our text it doesn’t seem um it seems fine it seems much more beautiful and not the default text the colors also seem seem good now here there’s some some it’s not art and error caused by us so usually you can just select this stack of blue tiles and force layout refresh that usually solves the problem yeah so is it just some some not an error from our side there’s some android studio error so that was just a quick tip now let’s move on to our next to do so we did seven seven we mapped each to the newly selected color in our styles.xml then i saw eight yes now the background of this change it to uh primary color light.

So in your colors you have double this light color which is this light so change it change your app’s background so into your activity main.xml under your design select the root layout parent layout and head over to background the background property and then select this selectable thing here and choose color and here you should find your color so this primary light which is the thing that you just downloaded now and then select okay and you should get this this yellow thing background so uh any questions are there be sure to leave it there we have covered this before also so i mean so be sure to ask me or yeah all right let’s um so now 8 9 so now is the new topic that we’re going to learn is using strings.xml so so far if you see in our design thing you see in our textviews they’re using hardcoded text however we need to use strings.xml that is the right way of of making android apps so let us head over to our slides so we can explain what

Leave a Comment