9
Creating User Interfaces with Layouts and Widgets

In this chapter, you will learn more about layouts and widgets while adding some style to your list items in the RecyclerView. You will also learn about a new tool called ConstraintLayout. Figure 9.1 shows what CrimeListFragment’s view will look like once you chisel down your existing app to build up your masterpiece.

Figure 9.1  CriminalIntent, now with beautiful pictures

Screenshot shows CriminalIntent Screen in Android. The screen shows a list of Crime ID and Crime Date and Time on the left. Corresponding widgets are placed on the right.

Before you dive in to ConstraintLayout, you must do a little legwork. You will need a copy of that fancy handcuff image from Figure 9.1 in your project. Navigate to the solutions file and open the 09_LayoutsAndWidgets/CriminalIntent/app/src/main/res directory. Copy each density version of ic_solved.png into the appropriate drawable folder in your project. For information on how to access the solutions files, refer back to the section called Adding an Icon in Chapter 2.

Using the Graphical Layout Tool

So far, you have created layouts by typing XML. In this section, you will use Android Studio’s graphical layout tool.

Open list_item_crime.xml and select the Design tab at the bottom of the file.

In the middle of the graphical layout tool is the preview you have already seen. Just to the right of the preview is the blueprint. The blueprint view is like the preview but shows an outline of each of your views. This can be useful when you need to see how big each view is, not just what it is displaying.

On the lefthand side of the screen is the palette. This view contains all the widgets you could wish for, organized by category (Figure 9.2).

Figure 9.2  Views in the graphical layout tool

Screenshot shows Graphical Layout tool with parts labeled.

The component tree is in the bottom left. The tree shows how the widgets are organized in the layout.

On the right side of the screen is the properties view. In this view, you can view and edit the attributes of the widget selected in the component tree.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.146.37.35