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
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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