Android Studio: Layout preview

Versão em português aqui.

One of my major goals for the next months is to become a more productive Android Developer. To achieve that, nothing better than knowing the tools that the Android Platform offers. In this series of posts, I will talk shortly about some tips for Android Studio that can make the development easier. For the start, the layout preview.

All the features presented in this post where tested in the Android Studio 2.0, Preview 6. They should work in different versions, but some differences may happen.

There are many improvements been included in screen layout preview from the Android Studio. Since the initial versions, there are options for visualizing how the screens are going to be displayed in different devices and system versions. But, sometimes, just adding components to the screen is not enough. To better understand, let’s start adding a RecyclerView to a layout.

RecyclerView preview.

We don’t know for sure how this screen will behave in a device. Let’s improve this, starting with a step back: let’s create the layout used in the rows of this list. Each line will be compound by a TextView inside a CardView. We don’t know for sure how this row will behave at a device, again.

I can’t see a row.

Let’s improve this adding some attributes. We want that these attributes support our layout preview, but they also should not have any effect at runtime. For that reason, instead of adding attributes with the android namespace, we will add attributes with the namespace tools. These attributes will be analyzed by the Android Studio layout preview, but ignored in runtime. Let’s start adding some text and image to our TextView, using the attributes tools:text=”Line number” and tools:drawableLeft=”@mipmap/ic_launcher”. Typing tools will make the editor suggest the inclusion of the namespace.

Now we can see a row.

As we can see, the attributes available at tools are the same available at android, but their effect occurs in the preview time only. That makes possible apply many attributes to preview how the screens will behave at runtime.

Back to our RecyclerView, now we can apply our line adding the attribute tools:listitem=”@layout/row_person”. We can go further, indicating the layout manager to be used and the orientating, adding app:layoutManager=”LinearLayoutManager” and android:orientation=”vertical”. This will avoid the need to define the layout manager in the Java code, simplifying our classes.

A more precise preview.

Now it is much easier to see how the list will be displayed in different device configurations. We just need to switch between the available device configurations by choosing in the options above the preview.

Preview in a different device.

We can also create a broad preview from multiple devices at the same time, selecting the option Preview all screen sizes.

A bit confusing, maybe useful sometimes.

Now that we just explored some basic attributes from tools, we can expand it’s use for multiple situations. Do you have an ImageView with an image loaded in run time by a library? Add the attribute tools:src and check how it will be displayed. Do you have a component with dynamic colors? Add the attribute tools:tint and check how it will behave.

Do you want to see the code from these samples, check it out at GitHub.

Soon I will post more tips about the Android Studio and other tools to support the application’s development.