Styling your views is key to having a pleasing Android user interface. Anko provides a helpful function to let you style multiple views in one go. In this video, learn how to use Anko's applyRecursively function.
- When working with layouts in XML you could set the styling on each individual element or create a style to be reused across them. NCO allows you to do something similar. We want to be able to support the styles and layout decisions that we've made already. For instance, here's our text view that contains the planet's composition. We've already set a style for it we specified the type of heading that we would like as well as that the text is selectable. In using NCO, we want to be able to support the same exact things.
So let's move over to our NCO component and add in these styles. So we're going to move to the planet detail UI class. And here's our first text view that has the compound drawable. So let's start by supplying our padding. And if you recall the padding was equal to 16 dips so we're going to use the VIP function. We also had padding around the compound drawable and it was exactly the same compound drawable padding.
It was also 16. And then we had that the text was selectable. And so in this case we have to use one of the functions as the same element is not available as an extension. So we'll just add it to true. Now, if you recall, all of the text views that had compound drawables had the exact same things. So then we'd have to copy this code from lines 21 to 23 and then paste it into the text view that starts on line 26.
As well as the text view that starts on line 31. But adding it to each one separately will cause a lot of code duplication. So instead, we can take advantage of a function available in NCO called apply recursively. This lets you make changes in one place to multiple child views. So since we want to target the child views of our vertical layout we're going to assign it to a variable, so then we can apply recursively on it. So let's call this one the container 'cause that's basically what it is.
The container for all of our text views. And we can go ahead and delete these extra lines underneath our last text view. And then we're going to call our container variable and apply recursively. Great. Now, apply recursively works by executing the lambda expression on the past view and then recursively going to each child of that view if it's a view group.
So what we're going to do is take in the past view that we receive and we want to filter for only text views. Because those are the only ones that we're interested in setting our styles to. So we're going to use the wind block and check that we have text view. And if that's the case, we're going to take our text view and we're going to supply all of these styles to it. So let's go ahead and copy our code that we have here on lines 22 through 24 and paste it inside of our width block starting there on line 39.
So we now have our padding specified for all text views, the compound drawable padding, the fact that the text is selectable, and then we will add our final elements. So the last thing we wanted is that each text view we wanted it to have a width of match parent so we can do that here as well. And this is just showing you yet again another way that you can set the width of your elements. And then the final bit is that the text appearance for each of those texts we use was equal to the R dot style dot text appearance app compat medium.
And that's it. So we now have the exact same styling that we had in our layout files. So if we switch over to our emulator and we click on one of these elements we've now recreated this entire layout using just NCO components.
- 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