1 00:00:00,220 --> 00:00:06,030 When working on a multi-platform mobile app it's hard to decide where to start. 2 00:00:06,030 --> 00:00:09,950 You could start with either the business logic or the user interface. 3 00:00:11,500 --> 00:00:15,145 We will take a user interface first approach and start with Android, 4 00:00:15,145 --> 00:00:19,270 then iOS, and then do some refactoring to build our shared code. 5 00:00:20,710 --> 00:00:24,040 As we build out Android and iOS versions of our app 6 00:00:25,140 --> 00:00:29,240 I'll walk through each of the steps we'll need to take in order to finish our app. 7 00:00:30,280 --> 00:00:34,640 Familiarity with Android or iOS will be helpful, but 8 00:00:34,640 --> 00:00:36,480 not necessary, in order to follow along. 9 00:00:38,230 --> 00:00:40,490 If you'd like to learn more about Android and 10 00:00:40,490 --> 00:00:44,850 iOS development, see the teacher's notes for links to resources that can help. 11 00:00:46,380 --> 00:00:50,610 Let's start with opening MainActivity in the Android project. 12 00:00:50,610 --> 00:00:53,750 All activities must inherit from the activity base class, and 13 00:00:53,750 --> 00:00:56,020 should override onCreate so 14 00:00:56,020 --> 00:01:01,730 that we can execute the setContext method or add elements to the view. 15 00:01:01,730 --> 00:01:05,920 The SetContextView method refers to the resource layout. 16 00:01:05,920 --> 00:01:08,480 So let's take a look at this. 17 00:01:08,480 --> 00:01:13,580 The main AXML will open in its assigner by default but let's switch to the source. 18 00:01:14,700 --> 00:01:18,260 This is an XML file that uses the Android schema 19 00:01:18,260 --> 00:01:21,740 to describe how an Android view is drawn. 20 00:01:21,740 --> 00:01:25,730 You can see the button that was counting our clicks in the template project. 21 00:01:25,730 --> 00:01:30,220 You can remove the Button tag completely, but leave the linear layout so 22 00:01:30,220 --> 00:01:31,780 that we can add our own control. 23 00:01:33,320 --> 00:01:35,820 We can start with the EditText control. 24 00:01:35,820 --> 00:01:38,765 Make sure to set the Android id to something that starts with 25 00:01:38,765 --> 00:01:42,150 @+id and a name. 26 00:01:42,150 --> 00:01:45,080 This will add the people entry to the resource id 27 00:01:45,080 --> 00:01:48,880 namespace as a pointer to this control when compiled. 28 00:01:48,880 --> 00:01:51,125 The at sign indicates it's a pointer and 29 00:01:51,125 --> 00:01:56,510 the +id indicates it should be added to the id resources. 30 00:01:56,510 --> 00:02:01,460 We will need the resource id peopleentry later when we interact with it. 31 00:02:01,460 --> 00:02:04,986 You can add the android:layout_width to match parent and 32 00:02:04,986 --> 00:02:09,206 to layout_height to wrap_content so that size will be reasonable. 33 00:02:09,206 --> 00:02:16,989 Now, add a button with an Android text that uses @ string calculate, like the id. 34 00:02:16,989 --> 00:02:19,810 This is a pointer to a string value with the key calculate. 35 00:02:31,810 --> 00:02:34,090 We need to add the value to the string resource. 36 00:02:35,230 --> 00:02:39,190 Open the string's XML in the resource values folder. 37 00:02:39,190 --> 00:02:41,813 Add a string tag with the name calculate, and 38 00:02:41,813 --> 00:02:45,484 set the content to the string you want to display on the button. 39 00:03:01,946 --> 00:03:03,149 The last control for 40 00:03:03,149 --> 00:03:08,470 now is a TextView which will display the results of our pizza calculation. 41 00:03:08,470 --> 00:03:11,566 This is very simple, but make sure to set the android:id. 42 00:03:17,876 --> 00:03:21,260 Now, let's take a look at the MainActivity again. 43 00:03:21,260 --> 00:03:26,180 Now that we're past the SetContentView, we have a button and a Click event. 44 00:03:26,180 --> 00:03:28,630 Remove them so we can do our own. 45 00:03:28,630 --> 00:03:31,340 Since we don't wanna interact with all three controls, 46 00:03:31,340 --> 00:03:33,870 let's make some variables to hold references to them. 47 00:03:35,540 --> 00:03:39,790 Start with the EditText control and set it to a variable peopleEntry. 48 00:03:41,110 --> 00:03:44,080 To get a reference to the run time instance of the control we 49 00:03:44,080 --> 00:03:46,380 must use the FindById method. 50 00:03:47,420 --> 00:03:50,237 Using the generic version of the method, 51 00:03:50,237 --> 00:03:55,075 we will indicate the type of the control, and pass in the reference ID. 52 00:03:55,075 --> 00:03:59,700 You will notice it's not available in Resources Id if we've not compiled yet. 53 00:04:38,320 --> 00:04:42,210 So to get the references to work, we must build the project so 54 00:04:42,210 --> 00:04:47,450 that all the new Ids and strings can be compiled into the resource namespace. 55 00:04:47,450 --> 00:04:50,890 You can simply right-click on the Android project and 56 00:04:50,890 --> 00:04:55,550 build it or Shift+F6 if the project is already selected. 57 00:04:55,550 --> 00:04:58,180 Now that we have the Resource.Id using intellisense 58 00:04:58,180 --> 00:05:00,720 we can find the rest of the controls in the same way. 59 00:05:01,840 --> 00:05:05,730 Next we want something to happen when we click the calculate button. 60 00:05:05,730 --> 00:05:08,429 So we add a Click event to the control. 61 00:05:08,429 --> 00:05:12,430 Using an in-line delegate is the simplest way to add this event. 62 00:05:13,450 --> 00:05:17,640 First, we need to get a number of people we want to serve 63 00:05:17,640 --> 00:05:20,367 by getting the text value of the peopleEntry control. 64 00:05:21,800 --> 00:05:24,880 Parse the string as an int then simply divide it 65 00:05:24,880 --> 00:05:27,150 by 3 to get the number of pieces needed. 66 00:05:28,330 --> 00:05:32,464 I know this is a very simple calculation, but we can do more later. 67 00:05:35,388 --> 00:05:41,283 Now that we know how many pizzas, set the pizzaCount TextView to the number. 68 00:06:01,532 --> 00:06:05,681 Since it's a string property, we need two string band. 69 00:06:17,037 --> 00:06:20,553 Next, we'll get our development environment ready so 70 00:06:20,553 --> 00:06:24,457 we can debug our app and deploy it onto a simulator or a device.