So here as you can see these are the lines of code that I pasted here.
So here we have a taste view and the taste is actually just as Thring resource.
So now as you can see I want to specify the text of the state's view at signs 3 and slash total money
saved.
OK.
So now let's go inside E-Strings that XML file.
And here let's create a string resource.
So just open attack string.
And the name is going to be.
Let's go back to our activity underline minute example.
So the name is total money saved.
So let's go back to our strings that exemplified total money saved.
And then here let's actually close this tag.
So for the value I can just typing in a money saved and then let's go back to our activity underlaid
minute example and here as you can see the error is gone.
And here inside this preview we can see this value money saved.
Right.
So the lay out is that I'm content to lay out how it is.
Again the content and the lay out the road is number eight.
So the last use interface component that I added to discretely out is actually inside the low number
six.
So let's actually change this number eight to number seven.
And now as you can see here the place of this text is actually changed and the layout column is Column
number 0.
So this takes you inside the column number zero of this row row number seven and the layout columns
span column span is number one.
And here as you can see the lay out gravity is right justified.
And here I want to add another value center horizontal.
So here as you can see it is test view is actually centered horizontally inside this cell right inside
this cell number zero inside this column number zero.
And now we were able to actually repasting some more lines of code here and then I can explain to you
what's going on here.
So as you can see here these are the lines of code that I pasted here.
Here we have actually a text view.
And these are the attributes of the state's view.
So the text of these takes you is actually empty as you can see he had an empty value and delay out
of it is that content to lay out what the lay out.
Height is the content.
The idea is to the money saved right out.
Gravity is actually the field horizontal so it can actually feel the entire space to lift in that column.
OK in that specific row and as you can see we have this full horizontal the back and out is this color
and color slash color primary.
If we actually did it this value colored primary and if I hold the control here on my keyboard and then
press on space on my keyboard as you can see we have some other colors here.
But I chose this one color primary.
The padding is actually disvalue at St. demon slash takes padding.
So now let's go inside these demons that exemplified here.
As you can see.
And for the padding I actually chose this one for application.
Bill mount Paddington DP so I could use this one EM amount amount padding.
So unless I should go back to an activity underline minute example and here is actually it is value.
And now I just say to hold the control here on my keyboard and that person space key on my keyboard
here in order to see the autocomplete of values in order to see these options that the autocomplete
feature of the suite of the use of the Android studio is allowing me to choose so I choose this one
bill amount of padding and the gravity's centered as you can see here this gravity means the gravity
of the takes inside the state's view.
OK.
So I want to take of this takes you to be centered horizontally and vertically.
And that's the meaning of the center here.
And here we have an elevation at St. slash elevation in order to add some shadowing to this takes view.
The lay out is number eight.
So as you can see here the last use an interface component that I added to this layout to this grid
Gridley out here is actually inside there on number seven.
So here this one is actually inside the room number eight.
All you want.
This takes for you to be inside a room number seven as this takes you is right.
So here I just need to change the layout row to number seven.
As you can see here and the layout column is inside of column number one so here hopefully that makes
sense.
And I think now the design of this of the user interface of our application is actually finished.
So now I want to try to change these colors.
For example it's actually opened the colors that XML.
I want to change the values of this color to primary color primary target or colored axent.
These are the main colors that are in Android studio.
So let's see how we can do that.
So now let's open our project structure.
So just click on this view tool windows and then click on project here.
So as you can see here inside this project structure inside is values folder that is actually inside
the source folder.
Let's actually click on these styles that XML file here and here let me actually make this area Vider
by double clicking on this stylus that example a tab here.
So as you can see here we have some style here right.
Style name at Feme.
So this is the style that our application is actually using Parent Feme that app compact that light
that dot action bar.
And he and as you can see inside this style tag here you can see it says customize your theme here so
we can actually customize the theme of our application.
So here as you can see we have this color primary that actually works to this color called Color primary
colors that exemplified here as you can see.
And here we have this color.
Me actually click on this slide that example.
Here we have this color primary dark.
And again this refers to colored primary dark dark that is actually sight is color the colors for example.
And here we have this colored accent that is really very.
And here we have this color accent that is actually fading to these colored accents that is inside these
colors that exemplify here.
Right.
So let's go back to our stylist that exemplified.
And here at the top as you can see we have this open editor here right.
Just click on it and now we can actually design.
We can actually change or customize the theme of our application.
So for example as you can see it says here it says the seaport.
So here you can see that the color of this sick body is actually this pink color.
And here in the right side pod you can see these colored accent.
So it is actually the color accent or you can see this through each progress bar or laid your button
or checkbox or this horizontal progress but these are actually these components are using this colored
colored accent.
So for example I want to change that color.
So now inside this activity underline minute example.
Let's actually go back to our design tab.
Here you can see that the color of this search but the color of this is actually pink right.
So now let's go back to our editor here.
And let's actually click on these color accent.
Click.
Just click on this peach color here.
And now I can change that color.
So here at the bottom here you can see these colors that are actually inside the right material design.
We can use these colors or any color that I want or can you.
I can actually assign some values here for this day which is actually Alpha which is the Alpha and for
this are.
Which is actually the red g 12 as you can see just these G.
The first two green b blue are G-B Alfar red green blue.
All I can actually change to H S S P or R G B or are there actually other options.
So for now I want you to use these and read material design coloreds because these these are the colors
that are actually standard colors for the application.
So for example I can actually change the color of that.
For example search part 2 for example.
These purple color.
Right.
And if we actually click on OK here now you can see that it's just the color of the sick part is actually
the purple the color of this progress bar switch or radio about it.
And here let's actually open our application here.
You can see that at the bottom here.
You can see that we have this navigation bar right.
You have this navigation bar.
So I can actually change this navigation the color of this navigation bar.
So hit in the right sidebar.
Now I can actually see that it says navigation bar color.
Right.
So if you just click on this color here I can change the color of the navigation bar to another color
for example.
For example I can change it to red.
Right.
And if I click on OK here and it says navigation bar is it.
And here let me actually run my application again here.
As you can see my application is running on this emulator and here at the bottom you can see that I
change the color of this navigation bar.
Right.
The color is now red or here at the top you can see that we have this app bar and this status bar right.
So for example I it I can also change the color of this app.
So here are inside this female editor who you can see here we have this toolbar here and it says at
the bottom left hand corner it says part right.
So hit in the right hand side.
I can actually find the color the color primary and the color primary dark.
Right.
So if we actually show you with this application and this emulator here for this data spot we have this
color primary arch.
And for the aperture we have this color primary.
So I can actually change two colors right.
So now I just need to click on this for example I want to change the color primary.
Just click on this color here and I can choose one of these and 3:23 or design colors for example I
can change it to this orange color.
And if I click on OK here now as you can see the color of this app but it's actually changed.
And now let's run our project here and let's see what happens then I actually run my application on
these settings.
So here as you can see my application is running on this emulator.
And here I successfully managed to change the color of this app but as you can see here.
So let's actually change the color of the status bar.
So let's go back here to this Feme editor.
And now we can see this color primary Dortch right here as you can see it's a status bar color primary
Dortch.
So I can get you to change this color.
So just click on the color here color primary Dortch.
And now I can I try to choose one of these color here.
For example I can choose a color edge effect or I can choose this orange color let I actually find a
color that is actually best for our application.
So I think this whole red light is actually good.
So I just need to click on OK here and now let's run our project here and let's see what happens.