A Small Step to the Code, a BIG Step to Android UI — Reusing Layouts
Hello! Hope you’re good and I can help you with some small UI improvements. In this article you'll learn about merge, include and ViewStub, which will help you to have a better layout structure.
Everyone know, or at least should know, the importance of reusing code instead of copy and paste the same snippet all over the project, but almost nobody do the same with UI code, the XML one. But why?
Well, since you're here there is a chance that you want to make a better UI code or at least have curiosity for it. So lemme guide your first steps.
The code below will be our base to everything that we'll do here.
Include
Include is the key for code reusability in Android. With include tag you can embed layout pieces inside your current layout. Everything starts here.
Imagine that we want to add that View that we called as toolbar in the code above to others layout files and we don't want to copy and paste it for every file.
The first thing that we can do is to extract that code to another file and it would be like this:
Note that I've added a layout_height bigger than the View height and a blue background to the ConstraintLayout.
Now we need to include our toolbar layout in all files that has a toolbar. Our code and design will looks like this:
When using include we just add everything how it was in the included layout, so if instead of using layout_height="150dp" we use it match_parent everything will be blue. The code below shows exactly how include behaves.
Okay, in this case we're just reusing one component and all the layout becomes one level more complex. Is it that worthy to do something like that for just one component?
Merge
The merge tag helps to eliminate redundant view groups of our view hierarchy. I've added one more View to our toolbar_layout.xml just to show that we can use more than one component. Change the parent component to use merge tag instead of ConstraintLayout and keep the include.
Note that the merge tag has an attribute called parentTag which is a View type. It's used just to have a preview on how our layout will looks like when merged. And this is the result:
This way we don't need to use a ConstraintLayout as base and everything is included as it was always there! It almost looks like a magic trick, doesn't it?
ViewStub
Imagine that we have a screen with a piece of layout that only is shown if a specific scenario occurs, otherwise it will never be shown. If you let that piece of code there, but with visibility as invisible or gone the view will be rendered but will not be visible.
ViewStub tag is used to inflate a layout, so unless you call inflate method, the view won't be added to the View hierarchy.
After the view is inflated, ViewStub will not be accessible anymore and the view group will have a inflated id. Also ViewStub is not compatible with merge tag, sadly.
Below you can see the stub_layout.xml, it's inclusion as ViewStub on the base_layout.xml and how to work with it on our MainActivity.kt.
As you can see, the ViewStub has an android:id to be referenced before inflated, android:inflatedId to be referenced after inflated and android:layout to define which layout should be inflated.
Last but not least — IT'S BONUS TIME !
Have you ever thought that should be great if you could fold/find your code more easily? Well, your problem is over! Just use regions!
To use regions in Java/Kotlin files you just need to open a comment with //region region name and close your region with //endregion.
And to use it on XML files the idea is the same, but with XML comment tag <!--region region name--> and close your region with <!--endregion-->
Make sure to always close the regions with endregion written together.
Well that’s it! I hope you have enjoyed it and I may have taught you something useful. Now have good luck on your Android journey!
