Setup the PlusOneButton

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