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
Start a free Courses trial
to watch this video
Add in the Views needed to perform the +1 and Sharing actions
Share Icon
Download icons or generate your own using the standard Android iconography and the Android Asset Studio.
+1 Button
The PlusOneButton is available on Google's developer site.
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
Next, we're going to add in two
views needed to perform the +1 and
0:00
sharing actions.
0:04
Let's talk about how
these views will work.
0:06
The +1 button is bundled with
Google Play Services Plus Library.
0:08
The +1 button is always
associated with some content.
0:13
That could be a movie, an app, or
in our case, a listing on etsy.
0:17
The +1 button shows to the user's
followers they recommend the content.
0:22
To set the content on the +1
button you supply the URL.
0:27
In our case, we're giving it
the URL of the listing on Etsy.
0:30
This way whether we show
the button in an app or
0:34
on the web the user's +1 recommendation
will be reflected there.
0:36
What happens once the user taps
the button, is the plus library performs
0:41
the plus one action by
communicating with the Google+ API.
0:45
It does this by calling start activity for
result to a Google controlled activity.
0:50
To ensure that the button state is
correct, you need to initialize the +1
0:55
button again,
once you think the state may have changed.
0:59
We'll need to handle
the call to onActivityResult
1:03
in our activity when this happens.
1:06
Now, let's consider sharing.
1:08
Sharing doesn't provide
a view in the plus library.
1:10
To create a button,
I simply use the Android Assets Studio
1:14
to generate a share icon using
the standard Android iconography.
1:17
I provided a link in teacher's notes so
you can create an icon yourself.
1:22
Once I have a button set up,
1:26
I simply set an onClickListener to
know when the user wants to share.
1:27
Sharing is a standard action on
Android and it's done using Intents.
1:33
You could create a generic share intent
and provide some data along with it.
1:37
Using an intent chooser,
1:41
we can provide the user the choice
of what app they want to share with.
1:43
In our app, we're going to use
this as a fallback mechanism
1:46
when sharing directly to
Google+ isn't possible.
1:50
Let's take a short break, and
then dive into the code and
1:53
get these views wired up.
1:56
First, let's set up the +1 button.
1:59
Let's open up the XML file for
our layout and our listing.
2:02
Okay, we're gonna add in the +1
button here, and remember,
2:06
because it's a custom view, we need to
refer to it by the full package name.
2:08
So I'm gonna go ahead and put it
along with this image ImageView, and
2:12
what I'm gonna do is wrap
the ImageView and the +1 button and
2:15
the share button all around
with this relative layout.
2:19
And then we're gonna center the buttons
over the top of the image view.
2:22
So the RelativeLayout will be full width,
match_parent.
2:28
Height will be wrap_content and then
we're gonna put the image view inside.
2:32
And then we're gonna add in our
PlusOneButton and it's found right where,
2:35
com.google.android.gms.plus.PlusOneButton.
2:40
So we got our PlusOneButton.
2:44
And with our +1 button
let's just go ahead and
2:48
give it, the minimum size target for
touch targets is 48dp.
2:50
We're just gonna go and
give it 48dp touch target size.
2:54
And let's not forget that we
want to include an ID here so
2:58
that we can reference this later on,
listing_plus_one_btn.
3:02
And we want to make this +1 one button
above the image but to the right.
3:08
And it's gonna be next to the share
button as well, so let's go ahead and
3:15
give it a few rules here.
3:19
So first we want to line it on the top and
3:22
we want it to align with
our sharing button.
3:26
But we haven't got an ID for that,
cuz we haven't actually created it yet.
3:29
So, let's go ahead and
use the ID we're gonna use in a minute.
3:33
It's gonna be listing_share_btn and
we don't have that yet,
3:36
so let's go ahead and add that next.
3:41
And the share button is actually
just gonna be an image button,
3:43
so the Google+ Library that's part of
3:46
Google+ Services doesn't have
a share button included.
3:49
I'm just gonna use
a regular image button and
3:52
I'm just gonna give it an icon that I've
generated using Android Assets Studio.
3:55
So you can see that I have dropped it
right in here under ic_social_share and
4:00
we can see what that looks like,
it's a standard Android share icon and
4:06
I've colored it red.
4:10
I use Android Asset Studio
to generate this icon for
4:12
me, you can go ahead and do that.
4:15
Just check out the link in teacher's
notes and creat an icon yourself,
4:16
I'm gonna go ahead and
make this 48dps as well.
4:20
The source for this is going
to be our drawable, our icon.
4:25
And let's make sure we include
that id/listing_share_btn.
4:31
And now let's go ahead and
align this where we want it.
4:38
So we'd like this to be in the far
top right of our relative layout, so
4:41
we're gonna align parent true,
and alignParentRight true and
4:45
for support, we need to include
alignParentEnd true as well.
4:52
And now this will be
aligned with the top and
4:58
we also want it to be to
the left of the image button.
5:00
So lets do that to the left
of listing_share_btn, and
5:04
for support, let's make sure we
include run to be to the left so
5:09
that's gonna be to start
of That looks pretty good.
5:15
Now this view doesn't have any children,
so
5:23
I'm just gonna close it using this
short hand tag close for XML.
5:26
And we can just go ahead and
check design view real quick,
5:33
and see if this is aligned like
we want to and we see that.
5:35
Yeah, we're gonna have our image here,
5:39
and even though it doesn't
show up in the custom view.
5:42
You can see the outline of where it'll
be measured out there, and our share
5:44
button is here as well and that looks
pretty good, that's where we want it.
5:48
Ok so, now we need to go back
to our listing adapter and
5:53
we're gonna add these views to our
listing holder, so we have a +1 button.
5:55
And we also have our image button
which is our share button.
6:02
Let's go ahead and add these by getting
a reference to them from our item,
6:07
view we can sure to cast
to the appropriate type
6:12
That looks pretty good.
6:30
And now up here in our onBindViewHolder.
6:33
We can actually go ahead and set up
these views to show, or be enabled or
6:37
not enabled.
6:42
So, if Google Play Service is enabled,
6:42
we want our listening holder and
we want the plus button to be visible.
6:45
And if it's not, if Google Play Service is
not available, we're gonna go ahead and
6:50
not show that, so set visibility to gone.
6:54
And we want to initialize it and
to initialize it
6:58
we need to give it the content that
we want to initialize it with.
7:03
So +1 button we can call initialize and
7:07
what we're gonna do is just get the
listing and we're gonna give it the URL.
7:09
Now, it's also asking us for
an activity request code, so
7:14
when you do the plus one
action as we discussed.
7:18
It's actually gonna call to
a Google controlled activity, so
7:21
we need to give it some kind of request
code to know what is being +1 or not.
7:24
And for this, I'm just gonna go and
7:28
pass in the value that's actually
the position of this item in the list.
7:30
And so, we know that's unique and
7:35
we'll be able to reference that when it
comes back from start activity for result.
7:37
It's gonna come back in
on activity result and
7:41
it'll give us this code
back at that point.
7:43
Now to ensure that the button
looks the way we want it to,
7:46
there's several different
variations on the +1 button.
7:49
And the variation that I wanna
use is an annotation and
7:52
it's the annotation provided by +1 button.
7:57
And there's one,
you can have it as a bubble,
8:01
you can have it with in lying content or
just not.
8:03
I'm gonna use none,
8:05
that means the +1 button is just gonna
show as the plus one button itself.
8:06
There's not gonna be any
annotations attached to it, and
8:10
this will just make it a cleaner UI.
8:12
You will simply see the button
there next to my share button and
8:14
that'll look good for me.
8:18
If you wanna include
the other annotations,
8:19
feel free to do that yourself.
8:21
Now that we've set up the +1 button,
it looks the way we want,
8:22
when the actual +1 button gets tapped,
it's initialized.
8:26
It's gonna call through to
start activity for result,
8:30
come back on an activity
result in the main activity.
8:32
So let's go in here to the main activity,
and in here we need to go ahead and
8:34
check to see if this is our
+1 button coming back to us.
8:39
So when the +1 button comes back,
it's gonna come to onActivityResult.
8:45
And what we wanna do is just make sure
that we update the state of the +1 button.
8:49
So we're gonna go ahead and
call to our adapter and
8:52
just say notify dataset changed.
8:55
And that's gonna be able to
handle redrawing the skate
8:58
of the +1 buttons that
are visible on the screen.
9:01
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