Get started with replacing your XML layouts with AnkoComponents in this video. Annyce walks through how to choose the proper library dependency and the basics of porting over your View components.
- [Instructor] Let's create our first custom Anko component. And we're going to use it to display the user interface for our planet detail fragment. Now before we get started, we need to have the dependency for the Anko layouts SDK. That's what you see where on line 37. Now the number that you provide behind SDK is based on the the min SDK version that you specified for your application. Now since our min SDK is 21, we're going to use the SDK 21 artifact.
Now if you want to see a full listing of available artifacts, you can find those here at the Anko developer documentation, and that's at github.com/Kotlin/anko. Now, in our planet detail fragment, let's switch there now. We used the planet detail XML file in order to display the screen. What we want to do instead, is to use an Anko component. So in order to help with code separation, we're going to create a new file in the same directory which we're going to name planet detail UI.
It's going to be a Kotlin class. And it's called PlanetDetailUi. So the first thing we're going to do is create our class, and it's going to implement the Anko component interface. And for our owner, we're going to supply the planet detail fragment. Because that's who's going to host this UI element. And then you're going to see a warning about not implementing the create view function, so let's just go ahead and do that now.
We'll use a quick action. Alt + Enter. And then we can implement createView. But first, let's take a look at our original XML file to see what needs to be ported over. So we're going to look at the planet_detail.xml file. So we have a text view for the description. And then we have three text views for composition, the number of moons, and then the days of the orbit. So we're going to want to transport over all of these text views as well as the parent linear layout.
So let's go back to our component. Now, all of our extensions are going to work with our Anko context. So let's wrap that with a return, and a with ui, so that we can take advantage of the Anko context extension methods. So the parent container was a linear layout with vertical orientation. And for that, we can use the vertical layout extension function. And by default, the layout params are wrap content for all Anko component views.
So if we wanted to use match parent, for example, then we'd have to do that explicitly. So for this linear layout, we do want the with to be match parent, and we can use the lparams function in order to do that. The next component was our text view that held the planet's description. So in order to specify that, we'll use the text view component. So it's fairly straightforward. Just matches the name of the component that you're using in your XML file, is the same thing that you can use, for the most part, in your Anko layout file.
And we did have one special attribute however, and that was the line spacing. And so not all XML attributes are directly available from your code, so sometimes you'll have to use the function variant. So in this case, we'd have to do setLineSpacing, and then we'd have to provide our desired values. So in this case, it would be eight and one. And let's just switch back over to the layout file really quickly so we can make sure we're getting everything we need for this text view.
So we just took care of the line spacing extra, which was here on line 16, but we also want to make sure that we have 16 dps for our top margin. So let's go back to our Anko component to see how we could do that. And for this one, we will use a different variant of lprams. And then let's just add it on to our text view component. So in this case, we're going to set the top margin equal to 16 dps.
So notice how we're taking advantage of another Anko extension, and that's the dip function, which converts regular numbers to the necessary dps. So that's everything we need for our main planet description. Now the other text views are slightly different, because they each have compound drawables on the left side. And for that, we can use the set compound drawables method that we would use when adding drawables programatically. So we'll create our text view just like we did before.
Except this time, we're going to call that setCompoundDrawables method and we'll just provide all of the parameters that we're interested in. So the very first text view used the landscape drawable, and then there was nothing else in any of the other positions. And notice how on line 20, in Android Studio, on my little gutter, you can see that particular icon. So we know that we are on the right track.
And then we're just going to copy this and duplicate it for the other two text views. So one, and two. And that second text view used the brightness drawable, which was the moon. And then the third one used the loop. Which we're using to represent our orbit. So we now have the basis for our first custom Anko component. It contains a linear layout and four text views.
- What Kotlin has to offer
- Working with lambdas
- Common Android extension functions
- Kotlin Android Extensions overview
- Making use of the Anko library
- Working with coroutines
- Nullability and collections