1 00:00:00,360 --> 00:00:02,340 We just finished scaling our chart. 2 00:00:02,340 --> 00:00:05,030 And now, it's time to get to work on our candlesticks. 3 00:00:05,030 --> 00:00:09,340 But, before we get started, here's a quick refresher of what we're going for. 4 00:00:09,340 --> 00:00:14,870 For each day, we have the open, the close, the high, and the low. 5 00:00:14,870 --> 00:00:19,800 And, to draw a candlestick, we just draw a white line from the high to low and 6 00:00:19,800 --> 00:00:23,100 then draw a rectangle from open to the close. 7 00:00:23,100 --> 00:00:28,190 And that rectangle will be green or red depending on if the price went up or down. 8 00:00:28,190 --> 00:00:29,330 Back on the code. 9 00:00:29,330 --> 00:00:33,310 Let's start by updating our rectangle to be drawn from the open to the close. 10 00:00:34,670 --> 00:00:38,460 The first thing will need to do is figure out which of those is the bottom and 11 00:00:38,460 --> 00:00:39,078 which is the top. 12 00:00:39,078 --> 00:00:44,150 So inside onDraw right below our left variable, let's create two 13 00:00:44,150 --> 00:00:49,055 more float variables for the bottom and the top. 14 00:00:49,055 --> 00:00:53,960 Then, inside the for loop, let's add a line after we get our stock data element 15 00:00:53,960 --> 00:00:59,200 and then check if stockData.close is greater than or 16 00:00:59,200 --> 00:01:03,730 equal to stockData.open. 17 00:01:03,730 --> 00:01:06,738 And if it is, let's set our paint color to green. 18 00:01:06,738 --> 00:01:12,890 So, paint.setColor Color.GREEN and 19 00:01:12,890 --> 00:01:17,790 then let's set top = stockData.close and 20 00:01:17,790 --> 00:01:21,932 bottom = stockData.open. 21 00:01:23,330 --> 00:01:28,220 Then let's add an L statement and copy and paste in the three lines we just typed. 22 00:01:31,080 --> 00:01:36,410 And let's change the color to color.red the top to stockData.open and 23 00:01:37,660 --> 00:01:41,810 the bottom to stockData.close. 24 00:01:41,810 --> 00:01:47,530 Finally instead of passing in stockData.high and stockData.low, 25 00:01:47,530 --> 00:01:52,012 let's pass in top and 26 00:01:52,012 --> 00:01:55,830 bottom. 27 00:01:55,830 --> 00:01:59,050 Now if we run the app, we should have a bunch of colored rectangles 28 00:01:59,050 --> 00:02:00,850 that are a little shorter than they were before. 29 00:02:02,910 --> 00:02:04,770 And we do, perfect. 30 00:02:04,770 --> 00:02:07,960 Now we just need to add in the lines from the low price to the high price. 31 00:02:09,250 --> 00:02:13,330 To do that, let's start by creating a new paint field for our lines. 32 00:02:13,330 --> 00:02:16,600 Let's use command or Ctrl+D to duplicate the existing paint field. 33 00:02:17,750 --> 00:02:19,340 And then rename it to stroke paint. 34 00:02:22,080 --> 00:02:26,753 Then, in our constructor, let's set our stroke color to white. 35 00:02:26,753 --> 00:02:30,678 strokePaint.setColor(Color.WHITE). 36 00:02:30,678 --> 00:02:35,144 Also, now that we're setting our paint color, and the onDraw call, 37 00:02:35,144 --> 00:02:37,360 we can delete this set color line. 38 00:02:37,360 --> 00:02:42,366 Next inside the onDraw function above our call to draw erect, 39 00:02:42,366 --> 00:02:45,650 let's add a call to canvas.drawLine. 40 00:02:47,650 --> 00:02:54,225 And for the startX parameter, lets pass in left + rectWidth / 41 00:02:54,225 --> 00:02:59,810 2 to put it squarely in the middle of a rectangle. 42 00:02:59,810 --> 00:03:04,774 Then let's pass in, getYPosition of stockData.high for 43 00:03:04,774 --> 00:03:09,390 the startY parameter and for the stopX parameter. 44 00:03:09,390 --> 00:03:12,576 Since it's a vertical line, let's just use left, 45 00:03:17,103 --> 00:03:20,291 + rectWidth / 2 again. 46 00:03:20,291 --> 00:03:21,670 And let's put that on a new line. 47 00:03:23,340 --> 00:03:31,730 Then let's pass in getYPosition of stockeData.low for the stopY parameter. 48 00:03:32,810 --> 00:03:38,334 And finally let's pass in our strokePaint, for the paint. 49 00:03:38,334 --> 00:03:39,265 Then let's run the app. 50 00:03:42,600 --> 00:03:44,138 And there's our candlesticks. 51 00:03:44,138 --> 00:03:46,704 Though if we flip through some of these other views, 52 00:03:50,938 --> 00:03:53,580 They might be a little too skinny. 53 00:03:53,580 --> 00:03:56,870 But lucky for us there's an easy way to fix this. 54 00:03:56,870 --> 00:04:00,776 Back in the code inside the onDraw function right below where we set 55 00:04:00,776 --> 00:04:09,600 rectWidth, lets call strokePaint.setstrokeWidth and 56 00:04:09,600 --> 00:04:12,810 let's pass in rectWidth / 8. 57 00:04:12,810 --> 00:04:16,139 I've tried out a few different widths and this one looks pretty good. 58 00:04:16,139 --> 00:04:19,820 Now that we've got that, let's run the app again and see if it looks any better. 59 00:04:21,750 --> 00:04:24,290 It doesn't look so different for the all time scale, but, 60 00:04:24,290 --> 00:04:28,390 if we pick past month, then we can see it a lot better. 61 00:04:28,390 --> 00:04:29,040 Awesome. 62 00:04:29,040 --> 00:04:33,410 Also, notice that since we're drawing our rectangles, after we've drawn our lines, 63 00:04:33,410 --> 00:04:34,790 they get drawn on top. 64 00:04:34,790 --> 00:04:36,950 If we put the calls in the other order, 65 00:04:36,950 --> 00:04:39,620 we'd have the lines on top of our rectangles. 66 00:04:39,620 --> 00:04:42,590 In the next video, we'll see how to draw text on the canvas, 67 00:04:42,590 --> 00:04:43,910 by adding labels to our chart.