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
Preview
So far we've been adding our custom View in code, but in this video we'll see how we can add it using XML instead!
This video doesn't have any notes.
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
Now that we've got our chart, let's see
how we can add it to our layout in XML.
0:00
It's actually pretty easy.
0:05
Inside our layout file, Let's just add
our ChartView inside our RelativeLayout.
0:06
And then let's set width and
height to match_parent, and there we go.
0:21
Now let's just set
android:id=@+id/chartView.
0:26
And then over in MainActivity, let's
delete these three lines of layout code.
0:38
And instead, let's set our chartView
0:45
= (ChartView)findViewById(R.id.chartView).
0:50
Then let's run the app, And
yikes, we got an error!
0:58
And if we look through this, It looks
like we got a NoSuchMethodException.
1:09
It's looking for an init method.
1:16
That takes on a Context and
an AttributeSet, but it's not finding it.
1:20
Over in our ChartView class,
1:25
let's take another look at
the warning on our class name.
1:27
This is the issue it's warning us about.
1:31
When we add view in XML, they end up
calling one of these three constructors.
1:33
And since we added some attributes,
like the ID, to our ChartView,
1:38
we need to use the constructor that
takes in a Context and an AttributeSet.
1:42
So instead of taking in a resId,
1:47
let's change our constructor
to take in an AttributeSet.
1:49
And let's name it attributesSet.
1:53
And let's also update the call to super
to call through to context, attributeSet.
1:54
Now we just need to add our resId to
the AttributeSet, and we'll be good to go.
1:59
Unfortunately, there's not a good
default attribute for this.
2:04
So we'll need to make our own.
2:07
To do this, we first need to create
a values file for our custom attributes.
2:09
So let's right-click on values
> New > Values resource file.
2:13
Then let's name it attrs and
create the file.
2:19
Next, inside the resources tags,
let's add a declare-styleable element,
2:25
give it a name of ChartView, and
then close the tag with a >.
2:29
Then, inside our styleable,
let's add an attribute, <attra.
2:34
And then let's name it data.
2:40
And let's set its format to reference,
meaning it refers to another resource.
2:43
Then let's close this tag and
head over to our layout to use it.
2:49
Let's add a line below
where we set the ID.
2:54
And then let's type custom:, and use
Alt-Enter to import the custom name space.
2:56
And then let's finish up by setting our
data attribute = @raw/goog, perfect.
3:03
Now that we're passing in the resId and
3:12
our AttributeSet,
the only thing left to do is retrieve it.
3:14
Back in ChartView's constructor,
after the call to super,
3:17
let's create a new TypedArray
variable named typedArray.
3:21
And let's set it =
context.getTheme().obtainStyledAttributes.
3:25
And then on a new line, let's pass in our
3:34
AttributeSet followed by
our styleable resource,
3:38
R.styleable.ChartView, and then 00.
3:43
And I'll hit Delete to make
this only two lines long.
3:48
Finally, on the next line, let's create
a new int variable for our resId.
3:51
And set it = typedArray.getResourceId.
3:56
And then let's pass in R.styleable,
4:02
.ChartView_data for the resource and
0 for the default value.
4:07
Also, now that we're done with our
typedArray, we're supposed to recycle it.
4:14
Let's do that on the next line.
4:18
typedArray.recycle, cool.
4:21
Now let's run the app and see if it works.
4:24
And it does, awesome!
4:29
We just finished updating our app to add
our custom view in XML instead of in
4:34
the code.
4:39
We've come a long way from
the beginning of this workshop.
4:40
And we've created a really
cool charting app.
4:43
But before I let you go,
I want to make one thing very clear.
4:45
Adding your views in XML is not any
better than adding them in code.
4:50
It's just different.
4:54
There's no one-size-fits-all
approach to this stuff.
4:55
If you wanna add your views in code,
go for it.
4:59
If you wanna stick with XML,
that's fine too.
5:01
It's your thing, do what you wanna do.
5:04
And on that note,
if you've got any questions, or
5:07
you'd like to share one of your own custom
views, be sure to check out the community.
5:09
Until next time,
5:13
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