1 00:00:00,530 --> 00:00:04,650 Next, we're going to add in two views needed to perform the +1 and 2 00:00:04,650 --> 00:00:06,290 sharing actions. 3 00:00:06,290 --> 00:00:08,710 Let's talk about how these views will work. 4 00:00:08,710 --> 00:00:12,470 The +1 button is bundled with Google Play Services Plus Library. 5 00:00:13,470 --> 00:00:17,460 The +1 button is always associated with some content. 6 00:00:17,460 --> 00:00:21,360 That could be a movie, an app, or in our case, a listing on etsy. 7 00:00:22,380 --> 00:00:27,100 The +1 button shows to the user's followers they recommend the content. 8 00:00:27,100 --> 00:00:30,820 To set the content on the +1 button you supply the URL. 9 00:00:30,820 --> 00:00:34,140 In our case, we're giving it the URL of the listing on Etsy. 10 00:00:34,140 --> 00:00:36,900 This way whether we show the button in an app or 11 00:00:36,900 --> 00:00:41,710 on the web the user's +1 recommendation will be reflected there. 12 00:00:41,710 --> 00:00:45,930 What happens once the user taps the button, is the plus library performs 13 00:00:45,930 --> 00:00:50,470 the plus one action by communicating with the Google+ API. 14 00:00:50,470 --> 00:00:55,190 It does this by calling start activity for result to a Google controlled activity. 15 00:00:55,190 --> 00:00:59,630 To ensure that the button state is correct, you need to initialize the +1 16 00:00:59,630 --> 00:01:03,330 button again, once you think the state may have changed. 17 00:01:03,330 --> 00:01:06,220 We'll need to handle the call to onActivityResult 18 00:01:06,220 --> 00:01:08,350 in our activity when this happens. 19 00:01:08,350 --> 00:01:10,640 Now, let's consider sharing. 20 00:01:10,640 --> 00:01:14,060 Sharing doesn't provide a view in the plus library. 21 00:01:14,060 --> 00:01:17,620 To create a button, I simply use the Android Assets Studio 22 00:01:17,620 --> 00:01:22,070 to generate a share icon using the standard Android iconography. 23 00:01:22,070 --> 00:01:25,490 I provided a link in teacher's notes so you can create an icon yourself. 24 00:01:26,500 --> 00:01:27,970 Once I have a button set up, 25 00:01:27,970 --> 00:01:32,070 I simply set an onClickListener to know when the user wants to share. 26 00:01:33,070 --> 00:01:37,610 Sharing is a standard action on Android and it's done using Intents. 27 00:01:37,610 --> 00:01:41,820 You could create a generic share intent and provide some data along with it. 28 00:01:41,820 --> 00:01:43,450 Using an intent chooser, 29 00:01:43,450 --> 00:01:46,960 we can provide the user the choice of what app they want to share with. 30 00:01:46,960 --> 00:01:50,180 In our app, we're going to use this as a fallback mechanism 31 00:01:50,180 --> 00:01:53,490 when sharing directly to Google+ isn't possible. 32 00:01:53,490 --> 00:01:56,380 Let's take a short break, and then dive into the code and 33 00:01:56,380 --> 00:01:57,570 get these views wired up. 34 00:01:59,110 --> 00:02:02,020 First, let's set up the +1 button. 35 00:02:02,020 --> 00:02:06,330 Let's open up the XML file for our layout and our listing. 36 00:02:06,330 --> 00:02:08,590 Okay, we're gonna add in the +1 button here, and remember, 37 00:02:08,590 --> 00:02:12,020 because it's a custom view, we need to refer to it by the full package name. 38 00:02:12,020 --> 00:02:15,450 So I'm gonna go ahead and put it along with this image ImageView, and 39 00:02:15,450 --> 00:02:19,980 what I'm gonna do is wrap the ImageView and the +1 button and 40 00:02:19,980 --> 00:02:22,610 the share button all around with this relative layout. 41 00:02:22,610 --> 00:02:28,060 And then we're gonna center the buttons over the top of the image view. 42 00:02:28,060 --> 00:02:32,010 So the RelativeLayout will be full width, match_parent. 43 00:02:32,010 --> 00:02:35,490 Height will be wrap_content and then we're gonna put the image view inside. 44 00:02:35,490 --> 00:02:40,395 And then we're gonna add in our PlusOneButton and it's found right where, 45 00:02:40,395 --> 00:02:44,480 com.google.android.gms.plus.PlusOneButton. 46 00:02:44,480 --> 00:02:46,680 So we got our PlusOneButton. 47 00:02:48,190 --> 00:02:50,580 And with our +1 button let's just go ahead and 48 00:02:50,580 --> 00:02:54,470 give it, the minimum size target for touch targets is 48dp. 49 00:02:54,470 --> 00:02:58,500 We're just gonna go and give it 48dp touch target size. 50 00:02:58,500 --> 00:03:02,180 And let's not forget that we want to include an ID here so 51 00:03:02,180 --> 00:03:08,720 that we can reference this later on, listing_plus_one_btn. 52 00:03:08,720 --> 00:03:15,690 And we want to make this +1 one button above the image but to the right. 53 00:03:15,690 --> 00:03:19,870 And it's gonna be next to the share button as well, so let's go ahead and 54 00:03:19,870 --> 00:03:21,050 give it a few rules here. 55 00:03:22,100 --> 00:03:26,620 So first we want to line it on the top and 56 00:03:26,620 --> 00:03:29,580 we want it to align with our sharing button. 57 00:03:29,580 --> 00:03:33,120 But we haven't got an ID for that, cuz we haven't actually created it yet. 58 00:03:33,120 --> 00:03:36,870 So, let's go ahead and use the ID we're gonna use in a minute. 59 00:03:36,870 --> 00:03:41,260 It's gonna be listing_share_btn and we don't have that yet, 60 00:03:41,260 --> 00:03:42,700 so let's go ahead and add that next. 61 00:03:43,770 --> 00:03:46,530 And the share button is actually just gonna be an image button, 62 00:03:46,530 --> 00:03:49,505 so the Google+ Library that's part of 63 00:03:49,505 --> 00:03:52,000 Google+ Services doesn't have a share button included. 64 00:03:52,000 --> 00:03:55,550 I'm just gonna use a regular image button and 65 00:03:55,550 --> 00:04:00,715 I'm just gonna give it an icon that I've generated using Android Assets Studio. 66 00:04:00,715 --> 00:04:06,105 So you can see that I have dropped it right in here under ic_social_share and 67 00:04:06,105 --> 00:04:10,885 we can see what that looks like, it's a standard Android share icon and 68 00:04:10,885 --> 00:04:12,615 I've colored it red. 69 00:04:12,615 --> 00:04:15,025 I use Android Asset Studio to generate this icon for 70 00:04:15,025 --> 00:04:16,705 me, you can go ahead and do that. 71 00:04:16,705 --> 00:04:20,185 Just check out the link in teacher's notes and creat an icon yourself, 72 00:04:20,185 --> 00:04:22,630 I'm gonna go ahead and make this 48dps as well. 73 00:04:25,590 --> 00:04:28,090 The source for this is going to be our drawable, our icon. 74 00:04:31,500 --> 00:04:37,964 And let's make sure we include that id/listing_share_btn. 75 00:04:38,970 --> 00:04:41,190 And now let's go ahead and align this where we want it. 76 00:04:41,190 --> 00:04:45,330 So we'd like this to be in the far top right of our relative layout, so 77 00:04:45,330 --> 00:04:52,600 we're gonna align parent true, and alignParentRight true and 78 00:04:52,600 --> 00:04:58,580 for support, we need to include alignParentEnd true as well. 79 00:04:58,580 --> 00:05:00,900 And now this will be aligned with the top and 80 00:05:00,900 --> 00:05:04,260 we also want it to be to the left of the image button. 81 00:05:04,260 --> 00:05:09,348 So lets do that to the left of listing_share_btn, and 82 00:05:09,348 --> 00:05:15,084 for support, let's make sure we include run to be to the left so 83 00:05:15,084 --> 00:05:23,220 that's gonna be to start of That looks pretty good. 84 00:05:23,220 --> 00:05:26,553 Now this view doesn't have any children, so 85 00:05:26,553 --> 00:05:31,300 I'm just gonna close it using this short hand tag close for XML. 86 00:05:33,470 --> 00:05:35,580 And we can just go ahead and check design view real quick, 87 00:05:35,580 --> 00:05:39,990 and see if this is aligned like we want to and we see that. 88 00:05:39,990 --> 00:05:42,120 Yeah, we're gonna have our image here, 89 00:05:42,120 --> 00:05:44,120 and even though it doesn't show up in the custom view. 90 00:05:44,120 --> 00:05:48,950 You can see the outline of where it'll be measured out there, and our share 91 00:05:48,950 --> 00:05:51,460 button is here as well and that looks pretty good, that's where we want it. 92 00:05:53,230 --> 00:05:55,770 Ok so, now we need to go back to our listing adapter and 93 00:05:55,770 --> 00:06:01,130 we're gonna add these views to our listing holder, so we have a +1 button. 94 00:06:02,350 --> 00:06:07,335 And we also have our image button which is our share button. 95 00:06:07,335 --> 00:06:12,448 Let's go ahead and add these by getting a reference to them from our item, 96 00:06:12,448 --> 00:06:15,675 view we can sure to cast to the appropriate type 97 00:06:30,760 --> 00:06:31,470 That looks pretty good. 98 00:06:33,470 --> 00:06:37,530 And now up here in our onBindViewHolder. 99 00:06:37,530 --> 00:06:42,010 We can actually go ahead and set up these views to show, or be enabled or 100 00:06:42,010 --> 00:06:42,530 not enabled. 101 00:06:42,530 --> 00:06:45,050 So, if Google Play Service is enabled, 102 00:06:45,050 --> 00:06:50,700 we want our listening holder and we want the plus button to be visible. 103 00:06:50,700 --> 00:06:54,900 And if it's not, if Google Play Service is not available, we're gonna go ahead and 104 00:06:54,900 --> 00:06:58,790 not show that, so set visibility to gone. 105 00:06:58,790 --> 00:07:03,220 And we want to initialize it and to initialize it 106 00:07:03,220 --> 00:07:07,060 we need to give it the content that we want to initialize it with. 107 00:07:07,060 --> 00:07:09,820 So +1 button we can call initialize and 108 00:07:09,820 --> 00:07:13,270 what we're gonna do is just get the listing and we're gonna give it the URL. 109 00:07:14,300 --> 00:07:18,660 Now, it's also asking us for an activity request code, so 110 00:07:18,660 --> 00:07:21,930 when you do the plus one action as we discussed. 111 00:07:21,930 --> 00:07:24,500 It's actually gonna call to a Google controlled activity, so 112 00:07:24,500 --> 00:07:28,820 we need to give it some kind of request code to know what is being +1 or not. 113 00:07:28,820 --> 00:07:30,310 And for this, I'm just gonna go and 114 00:07:30,310 --> 00:07:35,800 pass in the value that's actually the position of this item in the list. 115 00:07:35,800 --> 00:07:37,210 And so, we know that's unique and 116 00:07:37,210 --> 00:07:41,230 we'll be able to reference that when it comes back from start activity for result. 117 00:07:41,230 --> 00:07:43,410 It's gonna come back in on activity result and 118 00:07:43,410 --> 00:07:46,530 it'll give us this code back at that point. 119 00:07:46,530 --> 00:07:49,190 Now to ensure that the button looks the way we want it to, 120 00:07:49,190 --> 00:07:52,320 there's several different variations on the +1 button. 121 00:07:52,320 --> 00:07:57,077 And the variation that I wanna use is an annotation and 122 00:07:57,077 --> 00:08:01,380 it's the annotation provided by +1 button. 123 00:08:01,380 --> 00:08:03,010 And there's one, you can have it as a bubble, 124 00:08:03,010 --> 00:08:05,360 you can have it with in lying content or just not. 125 00:08:05,360 --> 00:08:06,570 I'm gonna use none, 126 00:08:06,570 --> 00:08:10,388 that means the +1 button is just gonna show as the plus one button itself. 127 00:08:10,388 --> 00:08:12,990 There's not gonna be any annotations attached to it, and 128 00:08:12,990 --> 00:08:14,220 this will just make it a cleaner UI. 129 00:08:14,220 --> 00:08:18,940 You will simply see the button there next to my share button and 130 00:08:18,940 --> 00:08:19,778 that'll look good for me. 131 00:08:19,778 --> 00:08:21,340 If you wanna include the other annotations, 132 00:08:21,340 --> 00:08:22,390 feel free to do that yourself. 133 00:08:22,390 --> 00:08:26,670 Now that we've set up the +1 button, it looks the way we want, 134 00:08:26,670 --> 00:08:30,230 when the actual +1 button gets tapped, it's initialized. 135 00:08:30,230 --> 00:08:32,060 It's gonna call through to start activity for result, 136 00:08:32,060 --> 00:08:34,900 come back on an activity result in the main activity. 137 00:08:34,900 --> 00:08:39,510 So let's go in here to the main activity, and in here we need to go ahead and 138 00:08:39,510 --> 00:08:45,940 check to see if this is our +1 button coming back to us. 139 00:08:45,940 --> 00:08:49,340 So when the +1 button comes back, it's gonna come to onActivityResult. 140 00:08:49,340 --> 00:08:52,740 And what we wanna do is just make sure that we update the state of the +1 button. 141 00:08:52,740 --> 00:08:55,280 So we're gonna go ahead and call to our adapter and 142 00:08:55,280 --> 00:08:57,100 just say notify dataset changed. 143 00:08:58,230 --> 00:09:01,050 And that's gonna be able to handle redrawing the skate 144 00:09:01,050 --> 00:09:03,600 of the +1 buttons that are visible on the screen.