Using an XML Layout5:14 with Ben Deitch
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!
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 up