This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Android Widgets!
You have completed Android Widgets!
Preview
In this video we'll see what makes list widgets so special and we'll start creating one!
Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/list_item"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:paddingLeft="20dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="20sp"
/>
</RelativeLayout>
List
String[] list = {"Treehouse", "Android", "Java", "Kotlin", "Anko"};
Related Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our widgets are pretty and they're fun
to play with, but we can't stop here.
0:00
I haven't even shown you how
to create a list widget.
0:04
But before we get to a list widget,
0:07
we need to take a moment to talk
about collection widgets in general.
0:08
Just like how only certain views
are allowed to be used with remote views,
0:12
only certain collection views can be
used to show a collection and a widget.
0:16
And these are list view, grid view,
stack view, and adapter view flipper.
0:21
And, as you might have guessed,
we'll be going with list view.
0:26
But in order to make our list view work,
0:30
we're going to need to set
it up with an adapter.
0:32
For starters instead of implementing
a normal adapter interface,
0:34
we'll need to use the remote
views factory interface.
0:38
It's basically just a special adapter for
remote views.
0:41
And we'll learn more about
it in just a second.
0:44
But for now let's get back
to creating our list widget.
0:47
The first thing we need to
do is add our list view.
0:51
Let's go over to widget.xml.
0:54
And then inside the frame layout let's
add a new list view tag and set width and
0:57
height to match parent.
1:02
Then let's shorten this to just one tag.
1:03
After that we just need to give it an ID,
android:id.
1:08
And I'll name it ListView.
1:16
And now that we've got our
list view let's go ahead and
1:18
create a new layout to
represent an item in our list.
1:20
Over on the project pane,
1:23
let's create a new layout resource and
name it list_item.
1:26
Then let's copy and paste in the layout
from the teachers notes below and
1:37
take note of the IDs we are using.
1:41
This whole RelativeLayout is list_item,
and the TextView inside it is TextView.
1:43
We've added our list view and
defined our list item.
1:50
And I think it's time we start looking
at creating an adaptor for our list.
1:53
To do this, let's create a new Java
class and name it WidgetAdapter.
1:57
Then, since we're going to need a context
eventually, let's add a context field and
2:05
then create a constructor to populate it.
2:10
So context which I'll call context,
and then the constructor,
2:14
which takes in a context and
use that context to populate our field.
2:21
Also copy in the list we'll be using from
the teachers notes below as a field.
2:29
If we wanted to have a more complicated
widget, we could populate our list from
2:34
a shared preference, a content provider or
even from the internet.
2:37
But since we're focusing on widgets,
2:41
let's keep things simple by
just using a static list.
2:43
Next, our widget adapter needs
to implement the remote views
2:46
factory interface.
2:50
So let's do that.
2:51
Implements_RemoteViewsFactory, and
2:55
then use Alt-Enter to
implement all nine methods.
2:57
And I'm gonna add a space here, and
it will give us a little more room.
3:03
Now we just need to go through
each of these methods and
3:07
make any necessary changes.
3:09
And luckily,
we only need to update five of them.
3:11
Let's start with getCount, and instead of
returning zero, let's return list.length.
3:15
Moving on to getViewAt,
3:22
we need to return a remote views object
representing the view at this index.
3:23
So let's create a new remote views
variable named remoteViews, and
3:29
let's set it equal to a new RemoteViews
object, where we pass in our
3:33
package name context.packagename or
context.getPackageName.
3:38
Also this is why we needed the context.
3:44
And then let's pass in the layout ID
of our list item, R.layout.list item.
3:46
So Michael, next we just need to update
the text view inside our remote views.
3:53
And since our text view is
inside the remote views object,
3:59
we won't be able to update it directly.
4:02
Instead the remote views class gives us
some helpful methods to interact with any
4:05
views it might contain.
4:09
On the next line,
let's type remoteViews.setTextViewTex,
4:11
and then pass in the idea of
our text view, R.id.textView.
4:17
And then we need to pass in
the text we'd like to show,
4:23
which is just our list entry and
index position.
4:26
Then, we just need to return our
remote views object and there we go.
4:31
The next function is getLoadingView.
4:36
If your widget takes a while to load,
4:39
you can provide a specialized loading
view by implementing this method.
4:41
But we'll just leave it as null.
4:44
As for getViewTypeCount, since our
list only has one type of item view,
4:47
we need to change this
function to return one.
4:52
Moving on to getItemID instead of zero,
let's return position.
4:55
This way each remote views ID will just
be equal to its index and the list.
5:02
Finally, for hasStableIds, since our ID's
won't be changing, let's return tru].
5:07
And there we go.
5:12
Our widget adapter is all set up.
5:14
All we've got left is connecting our
widget to our widget adapter, and
5:16
we'll get to that in the next video.
5:20
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up