1
00:00:00,490 --> 00:00:04,870
We just finished turning our boring stock
chart into an exciting candlestick chart.

2
00:00:04,870 --> 00:00:08,850
But without knowing what prices these are,
it's not a very useful chart.

3
00:00:08,850 --> 00:00:11,100
So let's add a few labels
to give us some price info.

4
00:00:12,920 --> 00:00:16,930
Let's start at the top of the class by
creating a new paint object for our text.

5
00:00:16,930 --> 00:00:18,660
And let's name it textPaint.

6
00:00:18,660 --> 00:00:21,370
So Ctrl or Cmd + D to duplicate this.

7
00:00:21,370 --> 00:00:24,451
And then name it textPaint.

8
00:00:24,451 --> 00:00:27,797
Then, inside the constructor we need
to set a few properties of our new

9
00:00:27,797 --> 00:00:29,440
paint object.

10
00:00:29,440 --> 00:00:31,326
The first property we
need to set is the color.

11
00:00:31,326 --> 00:00:39,180
So let's type textPaint.setColor
then pass in Color.WHITE.

12
00:00:39,180 --> 00:00:42,130
The next property we need
to set is the text size.

13
00:00:42,130 --> 00:00:44,525
We can do that with
the setTextSize function.

14
00:00:44,525 --> 00:00:47,644
So textPaint.setTextSize and

15
00:00:47,644 --> 00:00:53,930
let's pass in 40f to make our
text about 40 pixels tall.

16
00:00:53,930 --> 00:00:57,370
Finally, since we want our labels to
go on the right side of the screen,

17
00:00:57,370 --> 00:00:59,880
we need to have our text be right aligned.

18
00:00:59,880 --> 00:01:07,427
To do this,
we can call textPaint.setTextAlign and

19
00:01:07,427 --> 00:01:11,963
pass in Paint.Align.RIGHT.

20
00:01:11,963 --> 00:01:13,920
And now that we've got our textPaint,

21
00:01:13,920 --> 00:01:16,580
all that's left is to use
it to draw our labels.

22
00:01:16,580 --> 00:01:23,521
Inside the onDraw function, below our for
loop where we draw our candlesticks.

23
00:01:23,521 --> 00:01:28,047
Let's add another loop to loop
from the minPrice to the maxPrice.

24
00:01:28,047 --> 00:01:32,583
for (int i =, and we'll have to

25
00:01:32,583 --> 00:01:36,960
cast this as an int, minPrice.

26
00:01:36,960 --> 00:01:42,305
While i is less than maxPrice, i++.

27
00:01:46,546 --> 00:01:52,480
Then, inside this loop, let's add a line
and label for every $20 increment.

28
00:01:52,480 --> 00:01:55,720
Let's start by checking if
i divides evenly into 20.

29
00:01:55,720 --> 00:02:02,270
We can do this by saying if (i %20 == 0).

30
00:02:02,270 --> 00:02:07,544
And if it is then we'll draw our label and
add a horizontal line.

31
00:02:07,544 --> 00:02:13,265
Starting with the horizontal line
let's type canvas.drawLine and

32
00:02:13,265 --> 00:02:15,740
pass in 0 for the starting x.

33
00:02:17,710 --> 00:02:22,035
getYPosition of i for the starting y.

34
00:02:22,035 --> 00:02:25,249
Then width for the stopX and

35
00:02:25,249 --> 00:02:29,867
getYPosition of i again for the stopY.

36
00:02:29,867 --> 00:02:34,880
And finally strokePaint for the paint.

37
00:02:34,880 --> 00:02:38,752
Also we don't want these lines to be
quite as wide as our candle lines.

38
00:02:38,752 --> 00:02:45,715
So let's add a line above this one and
call strokePaint.setStrokeWidth.

39
00:02:45,715 --> 00:02:50,360
And only make this one pixel wide, nice.

40
00:02:50,360 --> 00:02:53,430
Last but not least,
we just need to draw our text.

41
00:02:53,430 --> 00:02:55,366
Let's add a line below
where we draw our line.

42
00:02:55,366 --> 00:03:00,540
Ad then call canvas.drawText.

43
00:03:00,540 --> 00:03:07,760
And then let's pass in our text as i +
an empty string to cast it to a string.

44
00:03:07,760 --> 00:03:10,410
And then let's pass in width for
the x value.

45
00:03:11,840 --> 00:03:17,930
And getYPosition of i for the Y value.

46
00:03:17,930 --> 00:03:19,810
And then our textPaint for the paint.

47
00:03:21,940 --> 00:03:23,061
Then let's run the app.

48
00:03:27,668 --> 00:03:30,540
And there are our labels, but
it doesn't look that good.

49
00:03:30,540 --> 00:03:32,890
Our labels are covering
up part of the chart.

50
00:03:32,890 --> 00:03:36,930
And also it'd be nice if the labels
were centered on their lines,

51
00:03:36,930 --> 00:03:38,950
instead of being above them.

52
00:03:38,950 --> 00:03:43,510
Back in the code, let's first fix the
issue of our labels covering up the chart.

53
00:03:43,510 --> 00:03:47,740
To do this, we're just going to
make our chart a little less wide.

54
00:03:47,740 --> 00:03:52,280
Inside the onDraw method above where we
set rectWidth let's create a new float

55
00:03:52,280 --> 00:03:53,465
named chartWidth.

56
00:03:57,150 --> 00:04:01,995
And let's set that equal to width,
minus the size of our text.

57
00:04:01,995 --> 00:04:05,906
Which we can find by using
textPaint.measureText and

58
00:04:05,906 --> 00:04:09,310
passing in the text we'd like to measure.

59
00:04:09,310 --> 00:04:14,110
Let's go with 1000 as a string to make
sure we have enough room for the price.

60
00:04:15,200 --> 00:04:18,514
Once we've got our chartWidth variable
we just need to update rectWidth to

61
00:04:18,514 --> 00:04:19,782
use it instead of our width.

62
00:04:26,030 --> 00:04:29,085
Also we should update our horizontal
lines to use chartWidth as well.

63
00:04:32,650 --> 00:04:36,860
So here we should change
width to chartWidth, awesome.

64
00:04:36,860 --> 00:04:38,860
Now that we've made some space for
our text.

65
00:04:38,860 --> 00:04:43,340
Let's also lower it a bit to make each
label match up with its own line.

66
00:04:43,340 --> 00:04:47,740
To do this we just need to add half
of the text's height to its Y value.

67
00:04:47,740 --> 00:04:52,590
Unfortunately to get the text height,
we first need to get a textBounds object.

68
00:04:52,590 --> 00:04:57,231
So up at the top of the class
let's add two new fields.

69
00:04:57,231 --> 00:05:02,994
One float for our textHeight and
one Rect which we'll need to import.

70
00:05:02,994 --> 00:05:05,500
And we'll call it textBounds.

71
00:05:07,480 --> 00:05:09,130
And we also need to initialize it.

72
00:05:09,130 --> 00:05:11,721
So let's set it equal to a new Rect.

73
00:05:11,721 --> 00:05:17,490
Then at the bottom of our constructor
after our textPaint has been set up.

74
00:05:17,490 --> 00:05:20,220
Let's call textPaint.getTexBounds.

75
00:05:21,750 --> 00:05:26,370
This function takes in a string, and
a start and end point of that string.

76
00:05:26,370 --> 00:05:31,140
It also takes in a rectangle which updates
to be a bounding box around our string

77
00:05:31,140 --> 00:05:32,620
from start to end.

78
00:05:32,620 --> 00:05:35,370
Since we're only concerned
with the height of our text.

79
00:05:35,370 --> 00:05:41,007
Let's just pass in 0 as a string for
the text and then 0 and

80
00:05:41,007 --> 00:05:45,740
1 for the start and end and
also our textBounds.

81
00:05:47,430 --> 00:05:51,512
Then on the next line let's set

82
00:05:51,512 --> 00:05:56,550
textHeight = textBounds.height.

83
00:05:56,550 --> 00:06:02,324
Finally back on the bottom of onDraw,
let's add,

84
00:06:02,324 --> 00:06:07,810
textHeight / 2 to the y value of our text.

85
00:06:07,810 --> 00:06:09,889
Then let's run the app and
see if we got it.

86
00:06:13,620 --> 00:06:16,030
Nice, great job!

87
00:06:16,030 --> 00:06:18,390
Those are some awesome
looking candlesticks.

88
00:06:18,390 --> 00:06:21,150
Coming up,
we'll see how we can modify our code and

89
00:06:21,150 --> 00:06:24,030
add our chart view in XML
instead of in MainActivity.