‫Instructor: Hi, within this lecture
‫we are going to start building a simple calculator,
‫which does actually for basic mathematic operations
‫like summing, deducting multiplying and dividing.
‫But this will enable us to practice
‫what we have learned so far.
‫So make sure you open your Android studio
‫and we're going to create a project
‫and we are going to start from scratch
‫and do the interface, do the design,
‫and then do the coding as well.
‫So make sure you start a new project
‫and then choose a new empty activity.
‫This time we will require an empty activity
‫rather than a no activity because we will need an activity,
‫'cause user will have to interact with a screen.
‫So make sure you choose an empty activity.
‫And over here I'm gonna call this Simple Calculator.
‫So this is good, for the language,
‫make sure you choose Java.
‫And for minimum API level
‫it really doesn't matter right now,
‫if I was doing this for Android Google Play Store
‫then I would have gone for API 19.
‫It really doesn't matter if you choose
‫API 29, 30, 15, right now,
‫I'm gonna go for API 23 and I'm going to open my project.
‫So this will be very bad calculator,
‫it will do just for basic mathematical operations
‫but it will enable us to practice what we have learned.
‫So make sure you create your project
‫and wait until it's finished.
‫So here you go, here is mine.
‫I'm gonna close this down.
‫I'm gonna make it a little bit bigger
‫so we can see it in a better way.
‫So first of all, we are gonna start
‫with going to the layout, activity, main, xml file.
‫And we are gonna create the user interface first.
‫So I'm gonna say show layout decorations
‫so we can see the title bar as well.
‫Maybe we can make it a little bit bigger like this
‫and we can just delete this.
‫We are gonna start from scratch,
‫and even we can close this down
‫by clicking on this left button here
‫like the project button
‫so that we can have a big nice screen
‫in the middle of everything.
‫So we're gonna start with bringing
‫in some text views of edited text.
‫So what is an edit text?
‫We have talked about text a little bit, right?
‫We have worked with some text views before.
‫So come over here to text section in your palette
‫and try to bring in one text view for example.
‫So this is a text view,
‫we can write whatever we want inside of it
‫but it doesn't do much.
‫It lets you write some strings,
‫like write some texts over here, it's static.
‫For example, a user cannot give any input
‫with this text view.
‫We have plain text
‫and other kind of texts over here
‫which are edit texts actually.
‫So if you search for edit in your palette
‫you can see there are a lot of options,
‫and they are basically the same.
‫They are all edit texts but for different purposes
‫like passwords and emails and phones,
‫and you can just choose whatever you want.
‫In fact, we are going to change the type later on.
‫So I'm gonna go for plain text.
‫So this is where user will type their number.
‫So I'm gonna bring in another edit text
‫because we will need two numbers.
‫So we're gonna get two numbers from the user
‫like five and 10,
‫and we are gonna have some buttons over here
‫for summing them up or dividing them up
‫so that we can display the result in this text view.
‫So it's basically a calculator, doing some kind
‫of adding, subtracting, dividing and multiplying.
‫So as you can see, we have those IDs, editText, editText2,
‫and for text view we have textView.
‫We can actually change those IDs if we want.
‫And we generally choose to do so
‫in order to be explicit about what we are writing.
‫Like I can make it the resultText
‫rather than text, so that I know that I'm dealing
‫with a resultText over here, for example,
‫rather than editText
‫I can just say number1Text.
‫And this is purely optional.
‫I don't have to do that, but I choose to do it,
‫like number2Text, so I know what I'm dealing with.
‫If I have too much views in my activity,
‫then I wouldn't get confused at any point.
‫Of course you are more than welcome
‫to choose your own ID names, but I'm gonna go for this.
‫So delete the text from here so that it won't display name
‫but it will rather display what user types in it.
‫So there is a hint section over here.
‫So if you can come over here and write hint,
‫you can find it, if you cannot see it at first glance,
‫but here you go, it's over here
‫within the common attributes.
‫So you can write something like, enter number, over here.
‫So as you can see it's kind of faded away.
‫So when a user starts typing, it just disappears on its own
‫and it displays whatever user has typed.
‫So we're gonna do the same thing over here as well.
‫I'm gonna delete the number,
‫and for hint I'm gonna say enter number 2.
‫So this way, user can understand actually
‫they have to give some numbers over here
‫and this will be the text that we will be displaying
‫the result of the operation.
‫So let me make this a little bigger
‫and make it into a central way like this,
‫and make it a little bit bigger
‫and align it at the center of the screen.
‫And then we can change the text,
‫like maybe we can do something like this.
‫The result is zero.
‫So whatever the result is, like adding these two numbers,
‫will be displayed over here.
‫So this is cool.
‫We have our result label, result text review,
‫we have our edit text,
‫now we're gonna bring in some buttons.
‫So let me bring in the first button
‫and I'm going to make this an add or sum button.
‫In order to do that, I'm just going to delete this text
‫and I will replace it with this plus sign.
‫So I'm going to make this a little bit smaller like this
‫so that we can add four of them over here
‫and align them horizontally.
‫So if you copy and paste it
‫with control CTRL+C and CTRL+V,
‫or CMD+C and CMD+V in your Mac.
‫you can just drag and drop like this.
‫And we are gonna do this three times
‫so that we will have in total four buttons okay,
‫and then we are going to change the size.
‫So here you go.
‫We have four buttons right now.
‫So first of which is adding,
‫second of which is subtracting, like this, deduction.
‫So let's do the star for multiply.
‫And as you can see there is a list.
‫I believe we can just click somewhere else
‫to make it go away like this.
‫So let me do the divide as well.
‫Here you go, we see the unnecessary menu again
‫and just click somewhere else and here you go.
‫Now we are ready.
‫In fact, we are ready
‫but we are not done with the user interface.
‫There is something else we should do
‫before making sure that we are okay with the user interface,
‫and this is called constraints.
‫So we're gonna talk about it in the next lecture.