Hello I'm Martez that quote.
And in this literally all we are going to create a specific calculator in Android.
So here because the Course is being updated and we want to add tutorials about Android 8 audio to the
calls this application that you're going to build is going to be compatible with the newest Android
version which is going to be Android 8.
So let's create an android studio project and he had the application name is going to be the calculator.
So the name is going to be the calculator.
And here again is specifically the company domain package name and project location.
So just click on X and here for the minimum STK choose a 16 Android 4.1 million for phone and tablet
next.
So here choose basic Actually you can see this Pluton action button here to this one this template and
then click next.
And here we can specify the activity name.
So the activity name here is going to be main activity and domain activity is going to be the starting
point of our application here.
We can specify the lay out name title and resource names so you're going to learn all about these lay
outs and activities later in this course.
But for now just this let's actually leave them as default and just click on finish.
So here now the project is created and now here you can see this is the layout the main layout actually.
And here on the left hand side you can see the structure of the project the project files and resources.
And here you can see the palette.
So here we can actually add specific components to our layout.
We have actually the properties.
So I'll talk more about this later but for now let me show you the activity underlying minute and here.
So on the left hand side you can see these files here.
This is actually Android view if it is not Android.
You need to actually change you to Android by clicking on these are these two little triangles here.
And then click on Android.
So here it is the android view.
And if this view is actually collapsed here.
So for example if I click on this if I double click on this content I mean it is in here.
Now you can see that the structure of the project is actually the collapse and you cannot see those
files and resources.
So if it is collapsed you can actually click on this project here this button here on the left hand
side.
It says project in order to expand it.
And now we can see these files here.
So now let's doubleclick on this activity underlayment addicts in here.
So here you can see that we have this lay out in the componentry section of can see that it says we
have a coordinator laid out inside discordantly out.
We have this app Bardoli out so here it is the apple out with the color blue and we have this toolbar
so this toolbar is inside this app out.
We have this include tag that actually contains content underlayment and examen.
So instead this layout folder you can see that we have two files to examine files.
The first one is activity and alignment and example.
And the second file is content underlined minute exam.
This activity and eliminativism it actually includes content underline minute exam and so that's why
you can see these include tag here.
It says include at site layout slash content underline minute example and we have these floating action
button here.
It says fab float in action button.
So you could actually use this button later but let's actually delete it.
We do not need it here in this application so you can just select it and that person delete key on your
keyboard.
So make sure that you are inside this activity underlayment at exam and not just one content on the
line and it is similar.
So now let me show you what that insight is actually beyond the limited example MLV cannot interact
with this hello world text view here.
You can see the hello world takes you right.
It is actually a text view and we cannot we interact with this one because this hello world takes you
is inside this content underlayment that they smell.
So let's switch to content and eliminativism And so inside these.
Here it is view Android view.
You can double click on the content and then I'm in that example.
So let me this tap content and illuminate and in order to make this area wider so I can interact with
this hello world view I can select and then present it here on my keyboard and at the bottom you can
see that we have two taps.
We have the design tap and we have to take step let's switch to text.
And here we have this android that support that constraint that constraint play out as the top play
out.
So because we haven't actually learnt about constantly out so far let's change it to relatively out
to in that little sections of the scores you are going to master constraint lay and but for now I just
want you to use relatively out.
So let's delete this and that supported that constraint that constraint lay out and instead let's just
type in here relatively out and here inside this into ending tapped we have this ability play out.
So here you can see some attributes.
The first one is the Examen namespace which has to be here and we have the XML namespace again for the
app exit and namespace for the tools.
So don't worry about these values.
You don't have to actually deal with these values here but we have these other attributes we have and
throatily out of wheat which is actually match parent what does match parent mean match parents mean.
So here at the right hand side you can see this preview button here.
If I click on it you can see this preview of our layout which is now relatively out.
So what it is layout they activate determines the Viets of the layout which is now relatively out.
So all you want.
They're relatively out here.
David of this relatively lay out to take the entire width of the screen.
So for that we use match parent and I also want this relatively out to take the entire height of the
screen.
So while you screen I mean the screen of the user's device.
OK.
So the right match parent.
And here we have the lay out behavior so thoughtfully about this behavior for now.
And we have this one the context again the context is come that example that Martez I saw that the PC
calculator that main activity for you this value may be actually different because you are using a different
package or maybe a different project name.
But here you can see that we have this main activity we have an activity that controls this layout so
this main activity that robot actually controls this layout.
So that's why you can see that it is actually the main activity here.
So the context is this one and here it says tools show in activity underline main.
So this says that we are actually using this layout in insight and order activity which is actually
the activity on eliminativism.
So remember that I told you that activity under limited example actually includes this content underlayment
and examined.
So don't worry about these attributes.
I just wanted to introduce you to some example codes here.
Let's switch to the design tab.
Now with this design tap we can design our layout.
So if you want to create our calculator application right.
So for that first of all we can say that we need to have a text view.
So let's track this takes a view and let's put it here at the top and at the center of this relatively
out and let's selected.
So if you select this takes you on the right hand side you can see these properties section.
We have the ID lay out with the height you can see these attributes right.
We have the text of the text view the content description the visibility.
So for now let's change the text of this text.
Let's say that here I want to show the user the name of the application the name of the application
is Peke calculator
right.
And in person on your keyboard.
So the size is actually not the one that I want.
So let's increase the size increase the size of the font of this text view.
So inside this property section we don't have an attribute that actually allows us to change the size
of this text view at the bottom you can see that it says View all properties.
Let's click on it.
Now we can see all the properties that is actually that are related to these ticks view because we selected
the this view.
For example if we actually select click on somber empty inside this out here we are actually selecting
this relatively out and the properties here are context sensitive.
What does that mean.
That means that because now they're relatively out inside this componentry section you can see that
they're relatively or is selected because now the relative value of these selected the properties that
are shown here are actually related to this relatively out not this takes view.
So in order to see the properties that are related to this text view we need to select the state's view
and now we can see the properties that are related to this text view.
So now I want to actually increase that text size of the state's view.
So we have a property for that in order to search for a property inside this property section.
You just need to select one of these properties.
And now I can search for a specific property by just typing on my keyboard.
I can see text just typing here text size.
Now you can see some properties with the name takes place here.
So let's scroll down here in order to find the text size attribute this one.
Now here inside is actually it is empty text view here.
I can enter a value right.
This text actually or text field.
I can enter a value so I can say for example I want the text size of this takes you to be for example
40 added percent on your key.
Right.
Or for example I can change the text color of the states so have it perfectly for that.
This one takes color.
And here if I click on this ellipse this spot in here now is going actually to show us this window.
And here I just need to click on this colored tab and I can select one of these colors.
I can't say for example holer aren't liked and then press an entry on your keyboard.
Right.
And here I can also change the background color of this takes few sort of this text view and let's search
for the background attributes.
So here I can find this by going an attribute.
And here let's click on this ellipsis button color.
Let's say that the background attribute given color of this text is going to be black and then click
on OK.
So now you can see this takes you here.
Right.
So now I want to add another takes view into our lay out.
So inside this palette section just click on all and then select the takes view and here let's put it
here.
Take a few select few.
Now I want to change the text of the state's view.
So here I can select one of these attributes and I just I can just search for ticks attributes.
And now I can say for example enter person's interpretation dot dot dot or not don't put dot dot dot
here because this is just a text you just type in here.
Enter percent call in and then press on until key on your keyboard.
So now let's change the place of this text view.
So here it is our text.
So now let's change the text size of the states.
So again let's search for the text size attribute select the states and it says for the text as attribute
and here.
Here it is the text size so let's change the text size of this takes to train.
And now I can actually it puts and takes here beside this takes you.
So what is that editors and it is actually a text field that actually allows us to enter a value.
So here inside this padded section let's select this text here and let's drag this plain text and put
it here beside this and it takes the text view.
So let's change the place of this and it takes.
So now let's selective editing Axt and here let's find the text attribute of these.
And let's delete this name value and then press on your keyboard.
Now we can add a hint hint is actually a text that is inside these editors and they and the moment that
the user starts typing on these editors and that the moment the user starts entering a value that he
is going to be disappeared.
So let's find the hint attributes.
So now let's find it.
So here it is the hint attributes.
And here we can enter a part because we have a text view that shows the user what value should be entered
inside is it.
We do not have to do that actually it's better to not to use a hint here because we are using a text
view according to the design rules.
It's better not to use it but for educational purposes I want to show you what is this means.
So let's selective editing in order to see the properties of these critics here and let's search for
the hints attributes again.
So here it is the hand attribute and just typing here enter person's dot dot dot and then present until
January.
So now you can see this here and here this value.
So we need another view.
So inside this pallet section click on all and then select the states and just drag it here and put
it below these enter actually enter.
Percent text view.
Now let's change the text of the state's view.
So just they've been here ticks in order to find the text attributes and for the text value just type
in here.
Enter your number and tell me your number call in and then press an you on your keyboard.
So let's change the text size of these and tell you a number of takes you text size.
So the size is going to be 20 and then press it if your keyboard.
So here let's try and every text here into our layout.
So inside this pallet section just click and text and then drag this plain text here and put it beside
this and it takes you here.
Let's decrease the veto of this editrix.
You can actually select this handler and just decrease the reach of this text.
You can also select is editing.
And then here is served in inside this property section you can see the lay out of.
So we can say that the lay out with is for example 50 and the person interchangeable.
You can see now the width of this it it takes is actually changed.
Let's change it to 50.
Or we can say for example 100 or maybe 200.
So let's change it to.
For example one hundred and eighty.
So let's put it here.
So here it is.
It takes and it's selected and let's find it takes attributes soulless for search for the text attributes.
And here let's delete this name value and unprecedented.
Here you are.
So let's give our hints to this editor X and for the hint just step in here.
Enter number dot dot dot and then present until your keyboard.
So now in order to learn the application in order to see how our layout is actually designed we can
actually click on this play button here at the top.
And now we can see that this device is here.
You can only see a device here if you have already created an emulator.
If you don't have any devices if you don't have already created an emulator you need to create a new
one.
You can see the spots in here it says create new virtual device and it's always with which to choose
next was 5 or was 5 x.
I prefer to choose next was 5 x.
And then you just had to click next.
And here you need to choose AP level 26 because you are targeting the newest version of Android API
Android 8 Android Oreo.
If you don't see this API level this means that you have not still actually downloaded that latest API
version.
So let me click on cancel and here let me show you how we can download the newest Android the S.K. newest
Android API version actually.
So at the top here if you are using a Mac you just need to click on these Android studio and then click
on preferences.
And if you're using a Windows machine and just click on this file here at the top and then click on
actually settings or preferences.
So let's get an android that you add American preferences.
So here you can see that I have already opened this room.
So you just need to open these Android appearance and behavior OK.
And if you open it you can actually see that we have the system settings up open the system settings.
And here we have this.
And it is the case.
So we have free taps.
STK platforms is the Katulis is the key update sites.
So click on this STK platforms here at the bottom you can see this option it's a show package details.
Let's check this check box here so you can see that I have actually downloaded the Android eight point
zero Android.
Oh.
So you need to download all of these packages.
So just check this checkbox and then click on apply and then you just need to actually let me show you
how we can download it so you can see that I actually downloaded Android 8 and Android seven point one
point I why not get right.
And all of these packages but assume that you want to download Android 5.1 right here.
I just think you can you can apply and it has the following components will be installed.
I just need to click on OK and it's going to start actually installing all of these packages for me.
So because I don't want to use them I'm just going to go on.
And here literally STK tools.
So make sure that you download this one support repository.
This is very important.
All of these packages should be installed.
Make sure to download and install these hacks and installer.
If you have a system that uses Intel C.P. you and here you can see that Android is the key.
Build tools.
Android emulator and with STK platform tools and SDK tools Andray support library.
Make sure that these packages are installed and make sure to update them updates that if you haven't
already.
So this is very important that you update all of these packages to the newest version because always
it's very important that you have the latest version of these packages so that you will not counter
any act.
You will not encounter any problems in the future.
So that's it.
And here just click on OK.
So now let me actually show you how you can create an emulator so create your virtual device.
Next was flybacks next.
So because I have already downloaded and installed this API level 26 I have android all here.
Just click on next and here this is going to be the name if you want to you can change the name of the
Android device.
And here you can say that this startup orientation is portrait or landscape so I choose portrait and
here click on a show advanced settings so you can see that it says camera up front to back emulator
speed fool.
Latency nonne and ram of a VM heap.
Internal storage.
All of these values are set for us automatically.
We don't have to worry about these values and we can finish so here because I have already created one.
I don't have to create a new one.
I just need to select this one and then click on OK.
So now it's going to actually run this application on my virtual device but we have a problem.
So at the moment that I actually started to run the application it actually shows an error.
It says error cannot find symbol variable fat floating action button.
So remember Eliel in this tutorial in say the activity underlying Medhat example.
Here we actually deleted the floating action button but here in say this main activity that java file
we have some codes that are related to the floating action button and if there is no floating action
button inside the activity delimited example there is going to be a problem because these codes are
related to that specific component.
And if you delete that floating action button inside your layout you also have to delete that.
The codes that are related to that float in action with an inside the main activity Java.
So these are the job code right.
So here inside the main activity that Java over here.
If you cannot see if you cannot find them Inuktitut main activity that Java used to open the Android
view you can find the main activity that Java inside this job folder and inside this package the first
package main activity that job.
And here inside is an create method which can highlight all of these codes.
This piece of code here is block of code that is related to the floating action button and then just
press and delete key on your keyboard.
Now you can run the app without any problems.
Just select the emulator if you want.
You can check this checkbox that says Use same selection for future launches so you don't have to see
this event to window any time that you want to run your application.
Just click on OK so let me show you the emulator.
That is our emulator.
You can see the name of the app enter percent until your number right.
So that's it this is the design.
Let's go back to android studio.
Let's go back to content on the limited example here.
Let's switch tab and the school.
Inside this file.
And here I want to add actually a button right.
So here inside this politician just click and all and just select the spot in and here just put it at
the center of this play out if you want to you can put it anywhere you want but I prefer to put these
inside at the center of this out a spot in.
So now let's change the text of this button.
So select one of these attributes.
Here inside this property section and just search for ticks.
So you can see this takes attribute and for the texture save in here.
Calculate dirties thought and then press enter on your keyboard.
So let's also change the Paglen code.
I don't like to back in on color of this pattern so here let's search for the background attributes
and let's look at this ellipse spot and color.
So for the background let's choose this one.
This whole purple click on OK and let's change the text color of the spot in the search for the text
color attributes.
And here click on this ellipse spot in color and let's click on this holo blue bright blue green OK.
Just the fancy color.
So I like it.
OK.
I know I can actually I tried text view in order to show the results to the user.
So here inside this palette section click on select this takes you and just put it here below this button.
And now I want to change the layout of this button to match parent.
So select this text view and for the layout here you can see this attribute Helier and click on this
little triangle in order to see the other options.
Match parent.
So I don't like the fact that this text here in the sticks is at the left hand side of the stage.
I want this takes to be on the center at the center of the state's view.
So it's like this takes you inside this property section just search for gravity attributes.
So here it is the gravity attribute.
Open it and just select the search box that is that says Center.
So now the text is at the center of the view.
So what is gravity attribute to gravity attribute determines the place the position of the children
of is specifically out.
So we have it takes the test very easily out right.
And I want to change the tide which is going to be the text inside it takes you right the Chinese text.
I want to change the position of this child which is the text.
So I choose the gravity attribute that gravity determines the place or the position of the child of
a lay out.
So here it is our gravity and we also have to lay out gravity that determines the position of the layout
itself inside the parent.
So I'll talk more about these attributes than gravity lay out gravity later in this course you are going
to master them but for now I just wanted to introduce you to the gravity attributes so I don't like
the text size of the state's views so let's change this search for the text size attributes.
And here let's change the text size to 50 and then present intercranial keyboard and let's change the
text of this takes view here.
So let's search for the text attribute here it is the text.
And I can say resorte So here it is the result and then precedented on your keyboard and let's change
the background color of this text view.
And here click on this ellipse the spot in color.
So here we can actually search for the new color so I think this one is cool.
Was this wonderfully kind of OK.
And let's change the text color of the stakes you so takes the color and the text color is going to
be white so choose this font and then present it to you put.
So now let's run the app.
Let me show you the emulator.
So here it is our design.
But I also don't like the color of this toolbar.
Here at the top.
So in order to change the color of this toolbar we need to go inside this activity on the last minute
examine here.
So you see the activity and alignment and examine and select this toolbar.
So in order to change the background color of the toolbar we need to select this Amberly out because
these are probably out is there actually lay out that contains this toolbar.
So select is actually out.
And here let's click on this view all properties and let's search for the background attribute.
So here let's change the Paglen color to black and then click on.
So let's also change the background color of these toolbars to select this toolbar.
And here let's say for the bike can attribute and click on this black color.
Here let's scroll to the top black and then click OK.
So now you can see that the background color of this toolbar here is actually changed to black.
So we also have to change the background color of this apple out and up I get all of these toolbar.
So now let's run the application.
Let me show you the emulator
and now you can see that the Paglen color of this toolbar is changed.
And here it is the name of the application.
So here it is the design.
It is actually going to continue building this application and I am going to show you how we can connect
the code to our views inside our layout.
Thank you very much for watching and I'll see you in the next tutorial.