A common use-case when we’re designing a layout containing a RecyclerView (or, if you’re a glutton for punishment: ListView) is that we may have to display data that is either generated or obtained at runtime. For example, we retrieve the data for the list items from a cloud API. This can make it difficult to properly visualise the data during development so often we’ll find ourselves having to fire up the to obtain real data each we make a minor tweak to the item layout. There are actually some neat helpers build in to the tools: namespace which can help us quite considerably. In this short series we’ll take a look at these tools and see how they can speed up our layout development.

- tools - Tool Time – Part 2 – Styling AndroidPreviously we saw how we can use sample data to enable us to much better visualise how out RecyclerView layouts will look, which should help us to speed up out layout development quite considerably, but things do not end there. There will often be times when the standard sample data does not fit what we require. Moreover there may also be edge-cases that we need to visualise to understand thing such as how our layout will behave if the name of a person in out list item exceeds the length of a single line. There is also a mechanism to custom sample data, and that it what we’ll look at in this concluding article.

Let’s begin by tacking the issue of long names. If the existing set of names do not provide the precise data we require, then we can create our own. First we need to create a sample data directory which we can do in Android Studio:

- add sample data directory - Tool Time – Part 2 – Styling Android

All this actually does is create the correctly named folder (sampledata) in the correct location which is a direct child of the module directory, in this case the app directory:

- sampledata directory - Tool Time – Part 2 – Styling Android

Next we create a text file named “names” and add a different name on each line:

On the third line I have included Pablo Picasso’s full name as the requirement here is to see how a really long name would affect our layout.

Next we can use this file instead of the sample data provided by Android Studio by replacing the tools:text="@tools:sample/full_names" attribute on the TextView which displays the person’s name in the item layout:

It is important to remove the tools namespace from the resource ID of our sample data. This is now part of our app namespace rather than the tools namespace. If we now look at the preview we can see that our custom names name now been used:

- custom names - Tool Time – Part 2 – Styling Android

The third item shows how a long name is rendered in the layout and we are now in a far better position to determine if we need to tweak the layout to handle long names.

The next thing we can look at is providing custom avatar images. Once again we need to add these to the sampledata directory and we’ll create them in a subfolder named avatars:

- avatars folder - Tool Time – Part 2 – Styling Android

The folder name is arbitrary – it can be anything we like. We can now reference this folder in exactly the same way as we did with our custom names:

This is where there appears to be something weird going on (in Android Studio 3.1 Canary 9, that is). Although I added four distinct avatar VectorDrawables (all of which we imported from the material icon set in Asset Studio), only two of them are actually displayed:

- avatars bug - Tool Time – Part 2 – Styling Android

The first and third images are picked up but the second and fourth are not. The bug appears to be that the assets at odd numbered positions in the directory list are included, but those at even positions are not. The fix is to duplicate each image so that 1 & 2 are both the first asset, 3 & 4 are both the second asset, 5 & 6 are both the third asset, and 7 & 8 are both the fourth asset:

- duplicate avatars - Tool Time – Part 2 – Styling Android

Now we can see that we are getting all of the avatar assets used in the preview:

- avatars fixed - Tool Time – Part 2 – Styling Android

While we can easily create separate string lists as we did for the names, we can also aggregate data in to a JSON file which we can then address as sample data. To do this we create a JSON file in the sampledata folder:

- users - Tool Time – Part 2 – Styling Android

Next we populate this with some JSON. The structure of this needs to be an enclosing JSON object, containing one or more named lists of items – in this case we have a single list named “data”:

Note how we can reference our avatars sample data from within this JSON.

As a quick side note: Those are all real place names – I haven’t made them up, honest! Us are particularly good at giving places stupid names, and there are many more rather more, erm…shall we say: indelicate, names I could have chosen. But yes, I really do live in a place named “Hemel Hempstead”.

We can now apply this to our item layout. Note how we can mix and match data provided by Android Studio, our custom names, and data from the JSON file:

If we now look at the preview we can see all of our data being used, once again without a working Adapter implementation:

- custom data - Tool Time – Part 2 – Styling Android

Despite the oddities with getting working image asserts, being able to quickly and easily define custom data sets can really help to speed up our layout creation for list items.

The source code for this article is available here.

© 2018, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0  - 88x31 - Tool Time – Part 2 – Styling Android
Tool Time – Part 2 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Permissions beyond the scope of this license may be available at

Source link


Please enter your comment!
Please enter your name here