50. A Layout Editor Sample Data Tutorial

The CardDemo project created in the previous chapter has provided a good example of how it can be difficult to assess from within the layout editor exactly how a user interface is going to appear until the completed app is tested. This is a problem that frequently occurs when the content to be displayed in a user interface is only generated or acquired once the user has the app installed and running.

For some time now, the Android Studio layout editor has provided the ability to specify simple attributes that are active only when the layout is being designed. A design-time only string resource could, for example, be assigned to a TextView within the layout editor that would not appear when the app runs. This capability has been extended significantly with the introduction of sample data support within the Android Studio layout editor and will be used in this chapter to improve the layout editor experience in the CardDemo project.

50.1 Adding Sample Data to a Project

During the design phase of the user interface layout, the RecyclerView instance (Figure 50-1) bears little resemblance to the running app tested at the end of the previous chapter:

Figure 50-1

In the “Modern Android App Architecture with Jetpack” chapter earlier in the book the concept of sample data was introduced. To demonstrate sample data in use, the project will now be modified so that the fully populated cards appear within the RecyclerView from within the layout editor. Before doing that, however, it is worth noting that the layout editor has a collection of preconfigured sample data templates that can be used when designing user interfaces. To see some of these in action, load the content_main.xml layout file into the layout editor and select the RecyclerView instance. Right-click on the RecyclerView and select the Set Sample Data menu option to display the Design-time View Attributes panel:

Figure 50-2

...

50.2 Using Custom Sample Data

The final step in this chapter is to demonstrate the use of custom sample data and images within the layout editor. This requires the creation of a sample data directory and the addition of some text and image files. Within the Project tool window, right-click on the app entry and select the New -> Sample Data Directory menu option, at which point a new directory named sampledata will appear within the Project tool window. If the new folder is not visible, switch the Project tool window from Android to Project mode and find the find the folder under CardDemo -> app -> build as shown in Figure 50-9:

Figure 50-9

Right-click on the sampledata directory, create a subdirectory named images and copy and paste the Android images into the new folder using the same steps outlined in the previous chapter. Display the Design-time View Attributes panel for the ImageView once again, this time clicking the Browse link and selecting the newly added...

50.3 Summary

This chapter has demonstrated the use of sample data within the layout editor to provide a more realistic representation of how the user interface will appear at runtime. The steps covered in this tutorial included the use of both pre-existing sample data templates and the integration of custom sample data.