tools:title=”LayoutPreview” Android Development

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 TextViewswithout texts, ImageViews without images, etc. And then I discovered the power of tools:. Fast forward one year and I had layouts full of tools:text="Test text", tools:text="Jake Wharton", 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:

<TextView
    android:id="@+id/text_user"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:drawableLeft="@drawable/ic_random_res"
    tools:text="Jake Wharton"/>

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:

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:

<FrameLayout 
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:menu="menu_test">

    <RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/item_test"
        tools:layoutManager="GridLayoutManager"
        tools:spanCount="2"/>
        
</FrameLayout>

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:layoutManager=”GridLayoutManager” and 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 Toolbarneeds to be defined in a theme and not added in layout’s XML. The final result looks like this:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin_normal"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="@tools:sample/lorem"/>

        <TextView
            android:id="@+id/text_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="@tools:sample/lorem/random"
            tools:lines="2"/>
            
    </LinearLayout>
</android.support.v7.widget.CardView>

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.