1
00:00:01,680 --> 00:00:05,421
Okay.
Now that we got the Google+ integration

2
00:00:05,421 --> 00:00:07,500
working, want to go back and

3
00:00:07,500 --> 00:00:10,870
finish up this app by adding
some polished to our u.i.

4
00:00:10,870 --> 00:00:13,990
So to do that, let's go ahead and
check out the listings.

5
00:00:13,990 --> 00:00:17,580
In our listing layout, there's
a lot of room for improvement here.

6
00:00:17,580 --> 00:00:20,160
One thing I'd like to do
is make sure that our image

7
00:00:20,160 --> 00:00:24,050
goes all the way across the full width,
so let's make it match_parent for width.

8
00:00:24,050 --> 00:00:28,600
And we're gonna use the scale type
of centerCrop to make sure that

9
00:00:28,600 --> 00:00:32,920
that full amount of space is gonna
be taken up with some image.

10
00:00:32,920 --> 00:00:35,440
And we're gonna give it
also a minimum height.

11
00:00:36,610 --> 00:00:40,570
So by using minHeight, we ensure that
each item in the list has some amount of

12
00:00:40,570 --> 00:00:44,150
certain space that's going to be taken
up here and that'll make it consistent.

13
00:00:44,150 --> 00:00:47,270
It could be larger, but
at least it'll be that height and

14
00:00:47,270 --> 00:00:49,830
we wont have really tiny items.

15
00:00:49,830 --> 00:00:55,000
Okay, along with this, I want to go ahead
and add some padding around the text.

16
00:00:56,160 --> 00:00:58,260
Let's go ahead and add padding.

17
00:00:58,260 --> 00:01:01,230
I'm just gonna add four
dips of padding around

18
00:01:01,230 --> 00:01:03,810
all the text that's in
this relative layout.

19
00:01:03,810 --> 00:01:07,930
And we want the background
behind that to be white.

20
00:01:07,930 --> 00:01:09,720
Just to differentiate
it from the image and

21
00:01:09,720 --> 00:01:13,590
from the background gray
color of our activity.

22
00:01:13,590 --> 00:01:16,370
Gonna use the built-in
Android color themes.

23
00:01:16,370 --> 00:01:18,310
White is built in there.

24
00:01:18,310 --> 00:01:23,170
And for the text, we wanna go ahead and
give these each a different color,

25
00:01:23,170 --> 00:01:27,720
that way they're differentiated to
the eye when we're looking at the screen.

26
00:01:27,720 --> 00:01:29,550
Make the title black.

27
00:01:34,301 --> 00:01:36,860
We'll make the shop name
a darker gray color.

28
00:01:38,070 --> 00:01:42,230
And, finally,
let's make the price a green color.

29
00:01:42,230 --> 00:01:43,990
There's a few different greens.

30
00:01:43,990 --> 00:01:47,050
Let's use this darker green
from the hollow theme.

31
00:01:47,050 --> 00:01:47,890
Okay, that should help.

32
00:01:47,890 --> 00:01:51,807
I'm gonna look at the design preview
real quick, and we'll be able to see,

33
00:01:51,807 --> 00:01:54,390
that yeah, we're using the min
height in the background of this, so

34
00:01:54,390 --> 00:01:55,860
this looks better already.

35
00:01:55,860 --> 00:01:58,710
When we load it up we'll be able
to see with the text later on.

36
00:01:59,820 --> 00:02:03,518
Okay, finally when we select
an item by tapping on it.

37
00:02:03,518 --> 00:02:07,110
We gotta make sure we provide feedback so
what we wanna do is go ahead and

38
00:02:07,110 --> 00:02:10,800
wrap this entire layout
in a frame layout and

39
00:02:10,800 --> 00:02:13,180
the frame layout is great
because it has a property.

40
00:02:13,180 --> 00:02:15,370
I'm gonna make it just match parent for

41
00:02:15,370 --> 00:02:21,650
the width and the height is going
to be match parent as well.

42
00:02:21,650 --> 00:02:26,180
And we need to make sure that we move
the name space tag to the very first view.

43
00:02:26,180 --> 00:02:32,710
We're wrapping the entire
layout in this frame layout.

44
00:02:35,810 --> 00:02:40,930
And the frame layout has a foreground
attribute and what this is gonna do is

45
00:02:40,930 --> 00:02:45,990
provide a selector so that when we touch
that whole listing we're gonna get some

46
00:02:45,990 --> 00:02:51,230
feedback and the feedback we're gonna
get is this highlight selector and

47
00:02:51,230 --> 00:02:54,420
what I've done is created
a highlight selector as a drawable.

48
00:02:54,420 --> 00:02:58,660
And there's two versions,
there's default selector and

49
00:02:58,660 --> 00:03:01,840
when a state is selected,
it's going to show color.

50
00:03:01,840 --> 00:03:05,400
And then I also created a version
21 that's lollipop and in lollipop,

51
00:03:05,400 --> 00:03:06,600
we have ripples.

52
00:03:06,600 --> 00:03:07,890
So, I created one here and

53
00:03:07,890 --> 00:03:12,970
it uses the color control highlight
found in the theme, the material theme.

54
00:03:12,970 --> 00:03:17,880
And that's either the default material
theme or the app compat material theme.

55
00:03:17,880 --> 00:03:20,370
And I'll talk about that
more in just one second.

56
00:03:20,370 --> 00:03:23,670
For now, lets go ahead and
go to our listing adapter.

57
00:03:23,670 --> 00:03:26,850
Cuz we want to set an on click listener,
so that when we tap

58
00:03:26,850 --> 00:03:30,960
on a listing it's going to open up that
listing through the URL that's provided.

59
00:03:30,960 --> 00:03:34,200
So, here we are in our
listing adapter on bind view.

60
00:03:34,200 --> 00:03:36,880
Let's go to our listing holder and
let's get the item view,

61
00:03:36,880 --> 00:03:40,230
that's the root view which
is our frame layout.

62
00:03:40,230 --> 00:03:41,520
We're gonna set onClickListener.

63
00:03:42,950 --> 00:03:50,040
And this one we're gonna create an Intent
and it's called openListing, new intent,

64
00:03:50,040 --> 00:03:55,230
and the intent action is ACTION_VIEW And
on the open listing, we can set data.

65
00:03:55,230 --> 00:04:01,480
So we're gonna parse the URL that
was included as the listing object.

66
00:04:01,480 --> 00:04:06,630
And then we can call activity.startactvity
with the open listing.

67
00:04:07,650 --> 00:04:12,377
Okay, a few other things of polish that
I've done here is I've included in

68
00:04:12,377 --> 00:04:15,040
my theme a few updates.

69
00:04:15,040 --> 00:04:18,880
I included a colors file with some colors.

70
00:04:18,880 --> 00:04:23,360
And then in my theme, you can use whatever
colors you want for your app by the way.

71
00:04:23,360 --> 00:04:26,300
I've included some here that
kind of match the Etsy theme.

72
00:04:26,300 --> 00:04:26,960
I like these colors.

73
00:04:26,960 --> 00:04:27,740
They go well together.

74
00:04:27,740 --> 00:04:29,808
You can feel free to
include whatever you want.

75
00:04:29,808 --> 00:04:34,190
In the styles.xml file you'll
find our theme, and here,

76
00:04:34,190 --> 00:04:39,330
I've just specified these primary,
accent, and control highlight colors, and

77
00:04:39,330 --> 00:04:45,110
a custom text style that makes the text
my accent color and a certain size.

78
00:04:45,110 --> 00:04:48,810
And these are all documented
in the app compat game

79
00:04:48,810 --> 00:04:51,235
you can check that out in
the link in the teachers notes.

80
00:04:51,235 --> 00:04:54,230
So now that I've done this lets go
ahead and run the app again and

81
00:04:54,230 --> 00:04:55,840
see how this looks a little bit different.

82
00:05:01,821 --> 00:05:03,130
Wow, that's really beautiful.

83
00:05:03,130 --> 00:05:06,650
Just a few changes and
you can really read the text a lot better.

84
00:05:06,650 --> 00:05:08,390
The title really stands out.

85
00:05:08,390 --> 00:05:12,190
The text of the price really
stands out being green.

86
00:05:12,190 --> 00:05:14,290
And images look great.

87
00:05:14,290 --> 00:05:18,490
Now let's go ahead and
we can see that when we select on one,

88
00:05:18,490 --> 00:05:21,790
we can see that ripple effect we're
getting, which is really great.

89
00:05:21,790 --> 00:05:22,720
That's what we wanted.

90
00:05:22,720 --> 00:05:25,400
We get some feedback to the user.

91
00:05:25,400 --> 00:05:26,810
So this is looking really good.

92
00:05:28,460 --> 00:05:31,800
We can see here that tapping
on an item will go ahead and

93
00:05:31,800 --> 00:05:33,690
open that item in the browser.

94
00:05:33,690 --> 00:05:38,490
You first needed to accept some
permissions that are specific to

95
00:05:38,490 --> 00:05:42,080
our browser on
the Google Play Services emulator.

96
00:05:42,080 --> 00:05:44,740
Once you just click through that you'll
see that it just eventually opens up

97
00:05:44,740 --> 00:05:47,240
the browser to the URL we
supplied in the intent.