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.