Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Finish up your app with some additional polish to the user interface!
Downloads
Download the drawable files for highlights and add them to the drawable
folder in your project. This download includes:
- highlight_selector.xml
- highlight_selector.xml (v21)
- highlight_solid.xml
Advanced UI API Options
Okay. Now that we got the Google+ integration 0:01 working, want to go back and 0:05 finish up this app by adding some polished to our u.i. 0:07 So to do that, let's go ahead and check out the listings. 0:10 In our listing layout, there's a lot of room for improvement here. 0:13 One thing I'd like to do is make sure that our image 0:17 goes all the way across the full width, so let's make it match_parent for width. 0:20 And we're gonna use the scale type of centerCrop to make sure that 0:24 that full amount of space is gonna be taken up with some image. 0:28 And we're gonna give it also a minimum height. 0:32 So by using minHeight, we ensure that each item in the list has some amount of 0:36 certain space that's going to be taken up here and that'll make it consistent. 0:40 It could be larger, but at least it'll be that height and 0:44 we wont have really tiny items. 0:47 Okay, along with this, I want to go ahead and add some padding around the text. 0:49 Let's go ahead and add padding. 0:56 I'm just gonna add four dips of padding around 0:58 all the text that's in this relative layout. 1:01 And we want the background behind that to be white. 1:03 Just to differentiate it from the image and 1:07 from the background gray color of our activity. 1:09 Gonna use the built-in Android color themes. 1:13 White is built in there. 1:16 And for the text, we wanna go ahead and give these each a different color, 1:18 that way they're differentiated to the eye when we're looking at the screen. 1:23 Make the title black. 1:27 We'll make the shop name a darker gray color. 1:34 And, finally, let's make the price a green color. 1:38 There's a few different greens. 1:42 Let's use this darker green from the hollow theme. 1:43 Okay, that should help. 1:47 I'm gonna look at the design preview real quick, and we'll be able to see, 1:47 that yeah, we're using the min height in the background of this, so 1:51 this looks better already. 1:54 When we load it up we'll be able to see with the text later on. 1:55 Okay, finally when we select an item by tapping on it. 1:59 We gotta make sure we provide feedback so what we wanna do is go ahead and 2:03 wrap this entire layout in a frame layout and 2:07 the frame layout is great because it has a property. 2:10 I'm gonna make it just match parent for 2:13 the width and the height is going to be match parent as well. 2:15 And we need to make sure that we move the name space tag to the very first view. 2:21 We're wrapping the entire layout in this frame layout. 2:26 And the frame layout has a foreground attribute and what this is gonna do is 2:35 provide a selector so that when we touch that whole listing we're gonna get some 2:40 feedback and the feedback we're gonna get is this highlight selector and 2:45 what I've done is created a highlight selector as a drawable. 2:51 And there's two versions, there's default selector and 2:54 when a state is selected, it's going to show color. 2:58 And then I also created a version 21 that's lollipop and in lollipop, 3:01 we have ripples. 3:05 So, I created one here and 3:06 it uses the color control highlight found in the theme, the material theme. 3:07 And that's either the default material theme or the app compat material theme. 3:12 And I'll talk about that more in just one second. 3:17 For now, lets go ahead and go to our listing adapter. 3:20 Cuz we want to set an on click listener, so that when we tap 3:23 on a listing it's going to open up that listing through the URL that's provided. 3:26 So, here we are in our listing adapter on bind view. 3:30 Let's go to our listing holder and let's get the item view, 3:34 that's the root view which is our frame layout. 3:36 We're gonna set onClickListener. 3:40 And this one we're gonna create an Intent and it's called openListing, new intent, 3:42 and the intent action is ACTION_VIEW And on the open listing, we can set data. 3:50 So we're gonna parse the URL that was included as the listing object. 3:55 And then we can call activity.startactvity with the open listing. 4:01 Okay, a few other things of polish that I've done here is I've included in 4:07 my theme a few updates. 4:12 I included a colors file with some colors. 4:15 And then in my theme, you can use whatever colors you want for your app by the way. 4:18 I've included some here that kind of match the Etsy theme. 4:23 I like these colors. 4:26 They go well together. 4:26 You can feel free to include whatever you want. 4:27 In the styles.xml file you'll find our theme, and here, 4:29 I've just specified these primary, accent, and control highlight colors, and 4:34 a custom text style that makes the text my accent color and a certain size. 4:39 And these are all documented in the app compat game 4:45 you can check that out in the link in the teachers notes. 4:48 So now that I've done this lets go ahead and run the app again and 4:51 see how this looks a little bit different. 4:54 Wow, that's really beautiful. 5:01 Just a few changes and you can really read the text a lot better. 5:03 The title really stands out. 5:06 The text of the price really stands out being green. 5:08 And images look great. 5:12 Now let's go ahead and we can see that when we select on one, 5:14 we can see that ripple effect we're getting, which is really great. 5:18 That's what we wanted. 5:21 We get some feedback to the user. 5:22 So this is looking really good. 5:25 We can see here that tapping on an item will go ahead and 5:28 open that item in the browser. 5:31 You first needed to accept some permissions that are specific to 5:33 our browser on the Google Play Services emulator. 5:38 Once you just click through that you'll see that it just eventually opens up 5:42 the browser to the URL we supplied in the intent. 5:44
You need to sign up for Treehouse in order to download course files.
Sign up