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.