tools:title=”LayoutPreview”- 3 mins
As every Android developer, I also started building my layouts by hard-coding values into them. Later on, I have realized that I should probably extract them into resources. Next step was not to have values in layouts if they are going to be changed from the code (always keep the state of your view in code). But at that point, my layout preview got broken. The layouts were full of TextViews without texts,
ImageViews without images, etc. And then I discovered the power of
tools:. Fast forward one year and I had layouts full of
tools:src="@drawable/ic_random_res" … you get the point. Is there a better way to do this, you may ask?
Actually, there is. And it’s pretty easy. There are predefined sample resources that you can use to make your layout preview nice and clean. By using these, we can go from this:
And why is this better? If your
TextView is inside a repeatable element like, for example, an item inside
RecyclerView, and you set up your preview correctly, then your
TextView will have a different text in every item. Speaking of
RecyclerView, let’s make a deep dive into making a preview of your
RecyclerView as sleek as possible, using this and some other tricks.
It all starts with a normal and rather ugly
RecyclerView in your layout XML file. In a preview, it looks like this:
It would look much nicer if we could show the real item used in our
RecyclerView, and even more so if that item uses sample texts
TextViews inside. And as a result, we get the following preview:
It looks much better, almost like a real application. The only problem is that our application in horizontal orientation has
GridLayout with two spans. Can we do something in that regard? Of course, we can. By adding
tools:spanCount=”2", we are getting exactly what we want.
Well, almost. Our
Activity has some menu items in the
Toolbar, and if we could display these as well, it would be perfect. Accomplishing this isn’t really that difficult. Simply adding
tools:menu=”menu_test” to the root element of your layout does the trick. It’s important to know that for this to work you need to have predefined menu item
@menu/menu_test.xml, and your
Toolbar needs to be defined in a theme and not added in layout’s XML. The final result looks like this:
The final code looks like this (minus some margins, styles etc., that are removed to make it a bit more compact):
As you can see,
tools: gives you great power to prototype and experiment with your layout without writing a single line of Java or Kotlin code or adding unnecessary states to your view’s XML. If you start using it now, you will have a much more pleasant time developing UI on your new project, and it will be a breeze to modify it later on.
Documentation for all tools attributes is available here.
The full source code of this and some other examples can be found in the GitHub repository.
Thanks for reading! If you enjoyed this story, please share it! Also, feel free to leave a comment 💬 below.