UI Polish for your App5:48 with Jamie Huson
Finish up your app with some additional polish to the user interface!
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