1 00:00:00,240 --> 00:00:02,580 ‫Instructor: Hi, within this lecture 2 00:00:02,580 --> 00:00:07,050 ‫we are going to start building a simple calculator, 3 00:00:07,050 --> 00:00:11,790 ‫which does actually for basic mathematic operations 4 00:00:11,790 --> 00:00:16,790 ‫like summing, deducting multiplying and dividing. 5 00:00:16,800 --> 00:00:19,290 ‫But this will enable us to practice 6 00:00:19,290 --> 00:00:21,960 ‫what we have learned so far. 7 00:00:21,960 --> 00:00:24,540 ‫So make sure you open your Android studio 8 00:00:24,540 --> 00:00:26,700 ‫and we're going to create a project 9 00:00:26,700 --> 00:00:29,280 ‫and we are going to start from scratch 10 00:00:29,280 --> 00:00:32,610 ‫and do the interface, do the design, 11 00:00:32,610 --> 00:00:34,260 ‫and then do the coding as well. 12 00:00:34,260 --> 00:00:36,780 ‫So make sure you start a new project 13 00:00:36,780 --> 00:00:40,770 ‫and then choose a new empty activity. 14 00:00:40,770 --> 00:00:43,980 ‫This time we will require an empty activity 15 00:00:43,980 --> 00:00:48,980 ‫rather than a no activity because we will need an activity, 16 00:00:49,260 --> 00:00:52,350 ‫'cause user will have to interact with a screen. 17 00:00:52,350 --> 00:00:55,260 ‫So make sure you choose an empty activity. 18 00:00:55,260 --> 00:01:00,260 ‫And over here I'm gonna call this Simple Calculator. 19 00:01:00,450 --> 00:01:03,660 ‫So this is good, for the language, 20 00:01:03,660 --> 00:01:05,310 ‫make sure you choose Java. 21 00:01:05,310 --> 00:01:07,680 ‫And for minimum API level 22 00:01:07,680 --> 00:01:10,110 ‫it really doesn't matter right now, 23 00:01:10,110 --> 00:01:14,790 ‫if I was doing this for Android Google Play Store 24 00:01:14,790 --> 00:01:18,000 ‫then I would have gone for API 19. 25 00:01:18,000 --> 00:01:19,680 ‫It really doesn't matter if you choose 26 00:01:19,680 --> 00:01:23,820 ‫API 29, 30, 15, right now, 27 00:01:23,820 --> 00:01:28,820 ‫I'm gonna go for API 23 and I'm going to open my project. 28 00:01:29,310 --> 00:01:32,460 ‫So this will be very bad calculator, 29 00:01:32,460 --> 00:01:36,810 ‫it will do just for basic mathematical operations 30 00:01:36,810 --> 00:01:40,560 ‫but it will enable us to practice what we have learned. 31 00:01:40,560 --> 00:01:42,870 ‫So make sure you create your project 32 00:01:42,870 --> 00:01:45,660 ‫and wait until it's finished. 33 00:01:45,660 --> 00:01:48,000 ‫So here you go, here is mine. 34 00:01:48,000 --> 00:01:49,980 ‫I'm gonna close this down. 35 00:01:49,980 --> 00:01:52,080 ‫I'm gonna make it a little bit bigger 36 00:01:52,080 --> 00:01:54,690 ‫so we can see it in a better way. 37 00:01:54,690 --> 00:01:56,730 ‫So first of all, we are gonna start 38 00:01:56,730 --> 00:02:01,730 ‫with going to the layout, activity, main, xml file. 39 00:02:02,790 --> 00:02:06,690 ‫And we are gonna create the user interface first. 40 00:02:06,690 --> 00:02:09,150 ‫So I'm gonna say show layout decorations 41 00:02:09,150 --> 00:02:11,940 ‫so we can see the title bar as well. 42 00:02:11,940 --> 00:02:15,750 ‫Maybe we can make it a little bit bigger like this 43 00:02:15,750 --> 00:02:17,610 ‫and we can just delete this. 44 00:02:17,610 --> 00:02:19,830 ‫We are gonna start from scratch, 45 00:02:19,830 --> 00:02:21,810 ‫and even we can close this down 46 00:02:21,810 --> 00:02:24,450 ‫by clicking on this left button here 47 00:02:24,450 --> 00:02:25,950 ‫like the project button 48 00:02:25,950 --> 00:02:29,220 ‫so that we can have a big nice screen 49 00:02:29,220 --> 00:02:31,620 ‫in the middle of everything. 50 00:02:31,620 --> 00:02:33,900 ‫So we're gonna start with bringing 51 00:02:33,900 --> 00:02:36,510 ‫in some text views of edited text. 52 00:02:36,510 --> 00:02:38,940 ‫So what is an edit text? 53 00:02:38,940 --> 00:02:42,540 ‫We have talked about text a little bit, right? 54 00:02:42,540 --> 00:02:45,900 ‫We have worked with some text views before. 55 00:02:45,900 --> 00:02:49,650 ‫So come over here to text section in your palette 56 00:02:49,650 --> 00:02:54,210 ‫and try to bring in one text view for example. 57 00:02:54,210 --> 00:02:55,680 ‫So this is a text view, 58 00:02:55,680 --> 00:02:59,010 ‫we can write whatever we want inside of it 59 00:02:59,010 --> 00:03:00,600 ‫but it doesn't do much. 60 00:03:00,600 --> 00:03:04,699 ‫It lets you write some strings, 61 00:03:04,699 --> 00:03:08,370 ‫like write some texts over here, it's static. 62 00:03:08,370 --> 00:03:11,790 ‫For example, a user cannot give any input 63 00:03:11,790 --> 00:03:13,173 ‫with this text view. 64 00:03:14,100 --> 00:03:15,930 ‫We have plain text 65 00:03:15,930 --> 00:03:18,810 ‫and other kind of texts over here 66 00:03:18,810 --> 00:03:21,810 ‫which are edit texts actually. 67 00:03:21,810 --> 00:03:24,210 ‫So if you search for edit in your palette 68 00:03:24,210 --> 00:03:26,880 ‫you can see there are a lot of options, 69 00:03:26,880 --> 00:03:28,530 ‫and they are basically the same. 70 00:03:28,530 --> 00:03:31,920 ‫They are all edit texts but for different purposes 71 00:03:31,920 --> 00:03:35,310 ‫like passwords and emails and phones, 72 00:03:35,310 --> 00:03:38,760 ‫and you can just choose whatever you want. 73 00:03:38,760 --> 00:03:42,390 ‫In fact, we are going to change the type later on. 74 00:03:42,390 --> 00:03:45,030 ‫So I'm gonna go for plain text. 75 00:03:45,030 --> 00:03:49,920 ‫So this is where user will type their number. 76 00:03:49,920 --> 00:03:52,470 ‫So I'm gonna bring in another edit text 77 00:03:52,470 --> 00:03:54,630 ‫because we will need two numbers. 78 00:03:54,630 --> 00:03:58,470 ‫So we're gonna get two numbers from the user 79 00:03:58,470 --> 00:04:00,060 ‫like five and 10, 80 00:04:00,060 --> 00:04:02,130 ‫and we are gonna have some buttons over here 81 00:04:02,130 --> 00:04:05,310 ‫for summing them up or dividing them up 82 00:04:05,310 --> 00:04:09,270 ‫so that we can display the result in this text view. 83 00:04:09,270 --> 00:04:13,920 ‫So it's basically a calculator, doing some kind 84 00:04:13,920 --> 00:04:17,670 ‫of adding, subtracting, dividing and multiplying. 85 00:04:17,670 --> 00:04:22,160 ‫So as you can see, we have those IDs, editText, editText2, 86 00:04:23,070 --> 00:04:25,680 ‫and for text view we have textView. 87 00:04:25,680 --> 00:04:29,700 ‫We can actually change those IDs if we want. 88 00:04:29,700 --> 00:04:32,010 ‫And we generally choose to do so 89 00:04:32,010 --> 00:04:35,040 ‫in order to be explicit about what we are writing. 90 00:04:35,040 --> 00:04:38,250 ‫Like I can make it the resultText 91 00:04:38,250 --> 00:04:42,360 ‫rather than text, so that I know that I'm dealing 92 00:04:42,360 --> 00:04:45,390 ‫with a resultText over here, for example, 93 00:04:45,390 --> 00:04:46,710 ‫rather than editText 94 00:04:46,710 --> 00:04:48,333 ‫I can just say number1Text. 95 00:04:50,670 --> 00:04:53,070 ‫And this is purely optional. 96 00:04:53,070 --> 00:04:56,250 ‫I don't have to do that, but I choose to do it, 97 00:04:56,250 --> 00:05:00,450 ‫like number2Text, so I know what I'm dealing with. 98 00:05:00,450 --> 00:05:03,840 ‫If I have too much views in my activity, 99 00:05:03,840 --> 00:05:07,383 ‫then I wouldn't get confused at any point. 100 00:05:08,850 --> 00:05:10,255 ‫Of course you are more than welcome 101 00:05:10,255 --> 00:05:14,580 ‫to choose your own ID names, but I'm gonna go for this. 102 00:05:14,580 --> 00:05:19,580 ‫So delete the text from here so that it won't display name 103 00:05:19,770 --> 00:05:24,570 ‫but it will rather display what user types in it. 104 00:05:24,570 --> 00:05:26,730 ‫So there is a hint section over here. 105 00:05:26,730 --> 00:05:29,250 ‫So if you can come over here and write hint, 106 00:05:29,250 --> 00:05:33,180 ‫you can find it, if you cannot see it at first glance, 107 00:05:33,180 --> 00:05:35,550 ‫but here you go, it's over here 108 00:05:35,550 --> 00:05:37,620 ‫within the common attributes. 109 00:05:37,620 --> 00:05:40,800 ‫So you can write something like, enter number, over here. 110 00:05:40,800 --> 00:05:43,890 ‫So as you can see it's kind of faded away. 111 00:05:43,890 --> 00:05:48,890 ‫So when a user starts typing, it just disappears on its own 112 00:05:49,050 --> 00:05:52,560 ‫and it displays whatever user has typed. 113 00:05:52,560 --> 00:05:55,200 ‫So we're gonna do the same thing over here as well. 114 00:05:55,200 --> 00:05:57,360 ‫I'm gonna delete the number, 115 00:05:57,360 --> 00:06:01,200 ‫and for hint I'm gonna say enter number 2. 116 00:06:01,200 --> 00:06:06,200 ‫So this way, user can understand actually 117 00:06:07,050 --> 00:06:11,280 ‫they have to give some numbers over here 118 00:06:11,280 --> 00:06:15,000 ‫and this will be the text that we will be displaying 119 00:06:15,000 --> 00:06:18,420 ‫the result of the operation. 120 00:06:18,420 --> 00:06:20,880 ‫So let me make this a little bigger 121 00:06:20,880 --> 00:06:24,360 ‫and make it into a central way like this, 122 00:06:24,360 --> 00:06:27,180 ‫and make it a little bit bigger 123 00:06:27,180 --> 00:06:31,950 ‫and align it at the center of the screen. 124 00:06:31,950 --> 00:06:34,620 ‫And then we can change the text, 125 00:06:34,620 --> 00:06:37,110 ‫like maybe we can do something like this. 126 00:06:37,110 --> 00:06:39,120 ‫The result is zero. 127 00:06:39,120 --> 00:06:44,120 ‫So whatever the result is, like adding these two numbers, 128 00:06:44,220 --> 00:06:46,800 ‫will be displayed over here. 129 00:06:46,800 --> 00:06:48,210 ‫So this is cool. 130 00:06:48,210 --> 00:06:51,300 ‫We have our result label, result text review, 131 00:06:51,300 --> 00:06:53,430 ‫we have our edit text, 132 00:06:53,430 --> 00:06:55,860 ‫now we're gonna bring in some buttons. 133 00:06:55,860 --> 00:06:58,380 ‫So let me bring in the first button 134 00:06:58,380 --> 00:07:02,700 ‫and I'm going to make this an add or sum button. 135 00:07:02,700 --> 00:07:05,850 ‫In order to do that, I'm just going to delete this text 136 00:07:05,850 --> 00:07:10,200 ‫and I will replace it with this plus sign. 137 00:07:10,200 --> 00:07:14,130 ‫So I'm going to make this a little bit smaller like this 138 00:07:14,130 --> 00:07:18,570 ‫so that we can add four of them over here 139 00:07:18,570 --> 00:07:21,510 ‫and align them horizontally. 140 00:07:21,510 --> 00:07:23,070 ‫So if you copy and paste it 141 00:07:23,070 --> 00:07:24,360 ‫with control CTRL+C and CTRL+V, 142 00:07:24,360 --> 00:07:28,170 ‫or CMD+C and CMD+V in your Mac. 143 00:07:28,170 --> 00:07:31,890 ‫you can just drag and drop like this. 144 00:07:31,890 --> 00:07:34,230 ‫And we are gonna do this three times 145 00:07:34,230 --> 00:07:39,230 ‫so that we will have in total four buttons okay, 146 00:07:39,870 --> 00:07:42,690 ‫and then we are going to change the size. 147 00:07:42,690 --> 00:07:43,800 ‫So here you go. 148 00:07:43,800 --> 00:07:46,110 ‫We have four buttons right now. 149 00:07:46,110 --> 00:07:48,810 ‫So first of which is adding, 150 00:07:48,810 --> 00:07:53,190 ‫second of which is subtracting, like this, deduction. 151 00:07:53,190 --> 00:07:56,610 ‫So let's do the star for multiply. 152 00:07:56,610 --> 00:07:59,070 ‫And as you can see there is a list. 153 00:07:59,070 --> 00:08:02,640 ‫I believe we can just click somewhere else 154 00:08:02,640 --> 00:08:04,980 ‫to make it go away like this. 155 00:08:04,980 --> 00:08:07,560 ‫So let me do the divide as well. 156 00:08:07,560 --> 00:08:12,180 ‫Here you go, we see the unnecessary menu again 157 00:08:12,180 --> 00:08:15,120 ‫and just click somewhere else and here you go. 158 00:08:15,120 --> 00:08:16,383 ‫Now we are ready. 159 00:08:17,280 --> 00:08:18,810 ‫In fact, we are ready 160 00:08:18,810 --> 00:08:22,170 ‫but we are not done with the user interface. 161 00:08:22,170 --> 00:08:25,380 ‫There is something else we should do 162 00:08:25,380 --> 00:08:30,380 ‫before making sure that we are okay with the user interface, 163 00:08:30,810 --> 00:08:34,740 ‫and this is called constraints. 164 00:08:34,740 --> 00:08:37,593 ‫So we're gonna talk about it in the next lecture.