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
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