In this video, learn how to switch from using a XML layout to an AnkoComponent. See how to update the createView method of a Fragment, as well as how to expose the AnkoComponent's views.
- [Instructor] Once you havr your Anko component created, you can start to use it in your Android views. Let's move over to our fragment and wire it up to use your component over its XML layout. So the first thing we want to do is create an instance of our planet detail UI component. Now since we're not going to be using the XML layout anymore, we can actually remove the lines from 22 to 25 because we're not going to be setting the text views by means of the find view by ID call.
So instead, we're going to replace it with a private val, and let's call our component UI, and we're going to create it lazily, so that we only create it the first that it's accessed, and then we'll just provide a call to our constructor, PlanetDetailUi. Okay, perfect. So next, we can go ahead and update the onCreateView method. So everything from line 31 all the way down to 38 is no longer needed.
So we can simply delete all of this. And for our return value, we're now going to use the view that's generated from our Anko component. So we'll make a call to our ui.createView method. And this is going to take in our Anko context. So we can create an Anko context using the create method, and for our context, we're going to provide the fragments context. So we can use a shortcut for that, ctx.
And then for the owner, it's going to be this, or the fragment, as we want that to be the owner of our view. But now you see that down here on the onResume method, we have a few complaints because we don't have access to those views anymore. But we can get them by adding a few properties to our Anko component. So let's do that now. We'll switch back over there, and we're going to create all of our text views as late init variables because they won't be available at the time of component creation.
So right here inside of our Anko component, we're going to create a few variables starting here on line nine, and as I mentioned, they're going to be lateint variables, and the first one we're going to call it planetDescription. This is going to be a text view. And to speed things up a bit, I'm just going to go ahead and duplicate this line for the other text views that we're going to need. And the second one is going to be the composition.
The third is the number of moons, and then finally, we're going to have the orbit. Okay, so with our variables created, we can now set each text view inside of our DSL to each of these variables. So the first one is here on line 19, that's the planet description. And so we'll set it equal to their text view. And then we'll do likewise for the remainder of the elements.
So we have the planet composition, the number of moons, and then here on line 35, our final one is the orbit. Great. So we can now go back to our fragment and update the onResume method to take advantage of these new variables. So here, starting on line 52, we just going to set this equal to ui., and we have access to all of them.
The description, the composition, the moons, and the orbit. So let's run our application and make sure we can still see the information about our planet to detail. Okay, we can switch over to the emulator, and let's click on one of the planets. And indeed, we can still see our layout. Creating layouts in Anko can be tedious, but depending on your needs, it can help you to reuse code effectively.
- 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