This workshop will be retired on May 1, 2025.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Custom Views in Android!
You have completed Custom Views in Android!
Preview
In this video we'll see how we can draw our data onto our Canvas!
Menu Strings:
static final String PAST_WEEK = "Past Week";
static final String PAST_MONTH = "Past Month";
static final String PAST_YEAR = "Past Year";
static final String ALL_DATA = "All Data";
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We just finished learning that
up is down and down is up.
0:00
But don't worry,
it's really not that hard to get used to.
0:05
And to help you get used to it,
here's a helpful graphic.
0:08
This is a pixel phone and
it has a resolution of 1080 x 1920.
0:11
Meaning this width, is 1,080 pixels and
this height is Is 1,920 pixels.
0:16
And as far as our canvas goes,
the origin is up here on the left.
0:23
Meaning that this point at
the bottom left would be 0,1920.
0:28
Also, if we rotate the device, the origin
will still be at the upper left corner.
0:33
So this time, the point of
the bottom left would be (0, 1080).
0:39
Now that we've got the basics
of how to draw on our canvas,
0:43
let's see if we can draw our chart.
0:46
Let's delete this drawRect statement and
0:49
then the first thing we need to
do is loop through our data.
0:52
But before we can do that
we need to make a decision.
0:57
You see, our data is ordered with
the most recent days on top.
1:00
So if we start drawing from the left,
we'll be drawing the most recent days on
1:04
the left, and the least recent days on the
right, which isn't what we're going for.
1:07
To fix this, we can either start drawing
from the right instead of the left or
1:12
we can just loop through
our data backwards.
1:16
Either way works.
1:18
But I'm going with looping backwards.
1:19
So, for int i equals data dot size.
1:21
Minus one to give us the last index.
1:28
While i is greater than or equal to zero
which is the first index, i minus minus.
1:32
And let's start off by trying to draw
a rectangle from the low to the high
1:41
of that day.
1:45
First let's create a variable
to hold the days stock data,
1:46
StockData and let's call it stockData
equals data.get at index i.
1:52
Then let's type canvas.drawRect.
1:58
And now we just need to pass in
the values for our rectangle.
2:03
But first we need to know the width of
our rectangles so outside our loop.
2:06
Let's create a new float
named rectWidth and
2:12
set it equal to width
divided by data.size.
2:18
Then let's create another new
float name to left to represent
2:26
the left edge of the current rectangle and
let's set it equal to zero.
2:31
Now inside our drawRect call,
2:38
let's pass in left for the left,
2:42
height- stockData.high for the top.
2:47
Left + rectWidith for the right.
2:55
Height Minus stockData.low for the bottom.
3:01
And finally paint for the paint.
3:07
Last but not least, on the next line
let's update our left variable.
3:10
Left += rectWidth.
3:13
Now if we run the app, we can see
two years of stock data, awesome!
3:19
And if we rotate the device,
it looks even more awesome.
3:27
Though it is kind of a lot of data, and
the green on red is definitely a bit much.
3:33
Also, I'm going to make my emulator
a little bigger so it's easier to see.
3:39
Back in our chart view, let's go ahead and
get rid of that red background.
3:44
And while we're at it,
3:50
let's also give the user the option
to look at different amounts of data.
3:51
If you're only interested in the past
month our chart isn't very useful.
3:56
Over in main activity, let's add an
options menu to let users select data from
4:00
the past week, Month or
they can select to see all the data.
4:05
Start by copying in the form menu
strings from the teacher's notes below.
4:11
Also let's change our
ChartView to be a field.
4:16
Nice, next let's use control o to override
the on create options menu function.
4:25
And make it return true.
4:34
To tell Android that
we're handling the menu,
4:41
then let's add a line above the return,
and add in our menu items.
4:43
Menu.add, and
pass in our past week string.
4:49
Then lets use command or control D to
4:55
duplicate this line three times, and
4:59
then change these to past
month past year and all data.
5:04
Now that that's done.
5:12
We just need to handle what happens
when a user selects an option.
5:13
Let's use control o again.
5:17
But this time lets override the on
options item selected method.
5:19
And just like last time,
let's start by making it return true.
5:24
Then let's add a line above the return and
5:30
add a switch statement on
the title of the menu item,
5:35
on item.getTitle Which
5:41
gives us an incompatible types error,
get title is giving us a car sequence
5:46
which isn't allowed in a switch statement,
but luckily strings are allowed.
5:51
So let's just add .tostring and
there we go.
5:56
Inside the switch statement let's
add a case for the past week.
6:02
Case PAST_WEEK: and
if past week was the selected option
6:06
let's call a function on our chart view
that doesn't exist yet called showLast.
6:13
And let's pass in a value of 7.
6:20
Coming soon this will update our
chart view to show the last seven
6:23
days of trading.
6:26
But right now,
we need to finish up our switch statement.
6:27
So let's add a break, and then let's copy
and paste these three lines three times.
6:30
And then update the string constants
6:40
to PAST_MONTH, past year and all data.
6:46
And also the values so
this should be showLast,
6:52
let's go with 30 and 365 and
let's make this last one empty.
6:56
Great work!
7:03
In the next video,
we'll implement the show last function and
7:04
finally be able to see less of our data.
7:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up