1 00:00:00,780 --> 00:00:04,310 By the end of this course, we'll have a widget that displays a list and 2 00:00:04,310 --> 00:00:07,370 lets us interact with that list right from the widget. 3 00:00:07,370 --> 00:00:10,450 But we're not ready to create a list widget quite yet. 4 00:00:10,450 --> 00:00:14,220 So we're going to start by creating a widget to just display a certain color. 5 00:00:14,220 --> 00:00:17,040 As always, the first step is to create an app. 6 00:00:17,040 --> 00:00:19,760 So let's start a new Android Studio project and 7 00:00:19,760 --> 00:00:24,710 name it ListWidget Then lets hit Next, 8 00:00:24,710 --> 00:00:29,620 and Next again, and then pick Add No Activity, and hit Finish. 9 00:00:30,930 --> 00:00:35,470 Right now, our only goal is to create a widget that displays a color, and 10 00:00:35,470 --> 00:00:37,530 we don't need an activity for that. 11 00:00:37,530 --> 00:00:39,540 So instead of starting with the activity, 12 00:00:39,540 --> 00:00:42,830 let's start by creating the layout for our widget. 13 00:00:42,830 --> 00:00:46,820 But first, it looks like we need to create the layout directory. 14 00:00:46,820 --> 00:00:52,388 So let's right-click on res > New > Android resource directory, 15 00:00:52,388 --> 00:00:57,100 and then choose layout for the resource type, and hit OK. 16 00:00:58,260 --> 00:01:02,514 Now that we've got that, let's create a new layout resource file named widget. 17 00:01:07,244 --> 00:01:09,795 And let's make its root element a FrameLayout. 18 00:01:12,808 --> 00:01:16,883 Inside our layout, if we want to be able to set the background color, 19 00:01:16,883 --> 00:01:19,430 then we need to give our FrameLayout an ID. 20 00:01:19,430 --> 00:01:22,300 I'll call mine FrameLayout. 21 00:01:22,300 --> 00:01:29,896 So android:id, And then frameLayout. 22 00:01:29,896 --> 00:01:34,471 Next, let's give our FrameLayout a starting background color. 23 00:01:34,471 --> 00:01:38,823 android:background and I'll pick 24 00:01:38,823 --> 00:01:43,881 @android:color/holo_blue_dark. 25 00:01:43,881 --> 00:01:48,430 After we've got our layout, the next piece that we need is the AppWidgetProvider. 26 00:01:48,430 --> 00:01:52,180 The AppWidgetProvider is just a specialized broadcast receiver. 27 00:01:52,180 --> 00:01:54,786 It receives an intent and the on receive function. 28 00:01:54,786 --> 00:01:57,440 And then based on the content of that intent, 29 00:01:57,440 --> 00:02:00,300 it can call one of five helpful methods. 30 00:02:00,300 --> 00:02:02,950 The first of these methods is onUpdate. 31 00:02:02,950 --> 00:02:06,280 onUpdate is called periodically to update your widget. 32 00:02:06,280 --> 00:02:09,380 This is also called when a user first adds a widget. 33 00:02:09,380 --> 00:02:13,280 So you should give any set up for your widget any onUpdate method. 34 00:02:13,280 --> 00:02:16,980 Typically, onUpdate is the only method you'll need to implement. 35 00:02:16,980 --> 00:02:20,985 But for more complicated widgets, the rest of these methods might come in handy. 36 00:02:20,985 --> 00:02:25,600 onAppWidgetOptionsChanges is triggered anytime a widget is resized, 37 00:02:25,600 --> 00:02:28,140 including when it's first placed on the screen. 38 00:02:28,140 --> 00:02:32,562 This method lets us update our widgets content based on the size of the widget. 39 00:02:32,562 --> 00:02:35,830 onDeleted is triggered whenever a widget is removed. 40 00:02:35,830 --> 00:02:39,510 If there's anything specific to one single instance of your widget, 41 00:02:39,510 --> 00:02:41,200 you would clean that up here. 42 00:02:41,200 --> 00:02:43,790 These last two methods are a little different. 43 00:02:43,790 --> 00:02:45,890 Instead of dealing with just one widget, 44 00:02:45,890 --> 00:02:48,841 these methods are about all the instances of your widget. 45 00:02:48,841 --> 00:02:52,529 onEnabled is triggered the first time an instance of your widget is added to 46 00:02:52,529 --> 00:02:53,710 the screen. 47 00:02:53,710 --> 00:02:56,820 If there's already an instance of your widget on the screen, 48 00:02:56,820 --> 00:02:58,900 this method will not be triggered. 49 00:02:58,900 --> 00:03:01,740 Conversely, onDisable is called when the very 50 00:03:01,740 --> 00:03:04,430 last instance of your widget is removed. 51 00:03:04,430 --> 00:03:07,030 If you were running a service to update your widgets, 52 00:03:07,030 --> 00:03:08,970 this would be a good place to stop it. 53 00:03:08,970 --> 00:03:13,070 Now that we know a little more about app widget providers, let's make one. 54 00:03:13,070 --> 00:03:17,315 Let's create a new class, and let's name it WidgetProvider. 55 00:03:20,972 --> 00:03:24,230 And let's make it extends AppWidgetProvider. 56 00:03:25,900 --> 00:03:30,076 Then, since we're starting off simple, let's use control+O and 57 00:03:30,076 --> 00:03:32,309 only override the onUpdate method. 58 00:03:34,684 --> 00:03:37,850 And we don't need a call to super, so let's delete that. 59 00:03:37,850 --> 00:03:42,310 Now we need to set up our widget, but it's not really clear how we should do that. 60 00:03:42,310 --> 00:03:45,870 We've got a context, and let me minimize this real quick. 61 00:03:45,870 --> 00:03:50,040 And an appWidgetManager, and a list of appWidgetIds. 62 00:03:50,040 --> 00:03:53,623 Well, we know what a context is, and an appWidgetManager is just a part 63 00:03:53,623 --> 00:03:56,911 of the Android system that lets us communicate with our widgets, 64 00:03:56,911 --> 00:03:59,900 even though they live in other applications. 65 00:03:59,900 --> 00:04:02,990 It's just a middleman between us and our widgets. 66 00:04:02,990 --> 00:04:05,948 The third parameter, appWidgetIds, 67 00:04:05,948 --> 00:04:10,522 is a list of IDs associated with the instances of our widget. 68 00:04:10,522 --> 00:04:14,131 Each time we add a widget to the screen, it gets a new ID. 69 00:04:14,131 --> 00:04:17,856 And since users can add more than one instance of a widget, 70 00:04:17,856 --> 00:04:21,821 instead of passing in just one ID, we get in an array of ID's. 71 00:04:21,821 --> 00:04:27,230 So inside the onUpdate function, we need to update all the instances of our widget. 72 00:04:27,230 --> 00:04:32,787 Let's start by looping through the appWidgetIds array for 73 00:04:32,787 --> 00:04:35,570 (int id: appWidgetIds). 74 00:04:37,170 --> 00:04:41,579 And then inside our loop let's use our appWidgetManager and 75 00:04:41,579 --> 00:04:44,181 call the updateAppWidget method. 76 00:04:44,181 --> 00:04:47,561 Then let's pass in an appWidgetIds for the first parameter. 77 00:04:47,561 --> 00:04:50,694 And then we need to pass in something called a RemoteViews. 78 00:04:50,694 --> 00:04:52,766 Since our widgets end up living in other apps, 79 00:04:52,766 --> 00:04:56,180 they're not allowed to use normal views like we're used to. 80 00:04:56,180 --> 00:04:59,940 Instead, they use RemoteViews, and while the RemoteViews is 81 00:04:59,940 --> 00:05:04,070 fairly similar to a view, they're somewhat limited in what they can show. 82 00:05:04,070 --> 00:05:07,140 Check out the teachers notes below to see what types of views and 83 00:05:07,140 --> 00:05:10,380 layouts are allowed inside a RemoteViews object. 84 00:05:10,380 --> 00:05:14,260 But for now, we just need to create a RemoteViews object which contains 85 00:05:14,260 --> 00:05:15,757 the layout for our widget. 86 00:05:15,757 --> 00:05:18,750 So let's add a line above our update statement, and 87 00:05:18,750 --> 00:05:21,003 then create a new RemoteViews object. 88 00:05:25,267 --> 00:05:29,018 = new RemoteViews. 89 00:05:29,018 --> 00:05:32,768 Then we just need to pass in our package name, 90 00:05:32,768 --> 00:05:38,787 which is context.getPackageName, and then our widget's layout ID, 91 00:05:38,787 --> 00:05:43,142 which is our R.id, or rather R.layout.widget. 92 00:05:43,142 --> 00:05:46,710 And once we've got our RemoteViews object, we just need to pass it in down here. 93 00:05:48,290 --> 00:05:51,840 Nice, that finishes up our AppWidgetProvider for now, but 94 00:05:51,840 --> 00:05:53,890 we still aren't quite able to use it. 95 00:05:53,890 --> 00:05:56,020 Remember when I mentioned the AppWidgetProvider 96 00:05:56,020 --> 00:05:57,810 is a broadcaster receiver?. 97 00:05:57,810 --> 00:06:01,450 Well as you know, for a broadcast receiver to work, it needs to be declared 98 00:06:01,450 --> 00:06:04,660 in our apps manifest, which we'll take care of in the next video.