17. A Guide to the Android Studio Layout Editor Tool

It is difficult to think of an Android application concept that does not require some form of user interface. Most Android devices come equipped with a touch screen and keyboard (either virtual or physical) and taps and swipes are the primary form of interaction between the user and application. Invariably these interactions take place through the application’s user interface.

A well designed and implemented user interface, an important factor in creating a successful and popular Android application, can vary from simple to extremely complex, depending on the design requirements of the individual application. Regardless of the level of complexity, the Android Studio Layout Editor tool significantly simplifies the task of designing and implementing Android user interfaces.

17.1 Basic vs. Empty Activity Templates

As outlined in the chapter entitled “The Anatomy of an Android Application”, Android applications are made up of one or more activities. An activity is a standalone module of application functionality that usually correlates directly to a single user interface screen. As such, when working with the Android Studio Layout Editor we are invariably working on the layout for an activity.

When creating a new Android Studio project, a number of different templates are available to be used as the starting point for the user interface of the main activity. The most basic of these templates are the Basic Activity and Empty Activity templates. Although these seem similar at first glance, there are actually considerable differences between the two options. To see these differences within the layout editor, use the View Options menu to enable Show System UI as shown in Figure 17-1 below:

Figure 17-1

The Empty Activity template creates...

17.2 The Android Studio Layout Editor

As has been demonstrated in previous chapters, the Layout Editor tool provides a “what you see is what you get” (WYSIWYG) environment in which views can be selected from a palette and then placed onto a canvas representing the display of an Android device. Once a view has been placed on the canvas, it can be moved, deleted and resized (subject to the constraints of the parent view). Further, a wide variety of properties relating to the selected view may be modified using the Attributes tool window.

Under the surface, the Layout Editor tool actually constructs an XML resource file containing the definition of the user interface that is being designed. As such, the Layout Editor tool operates in three distinct modes referred to as Design, Code and Split modes.

17.3 Design Mode

In design mode, the user interface can be visually manipulated by directly working with the view palette and the graphical representation of the layout. Figure 17-5 highlights the key areas of the Android Studio Layout Editor tool in design mode:

Figure 17-5

A – Palette – The palette provides access to the range of view components provided by the Android SDK. These are grouped into categories for easy navigation. Items may be added to the layout by dragging a view component from the palette and dropping it at the desired position on the layout.

B – Device Screen – The device screen provides a visual “what you see is what you get” representation of the user interface layout as it is being designed. This layout allows for direct manipulation of the design in terms of allowing views to be selected, deleted, moved and resized. The device model represented by the layout can be changed at any time using a menu located...

17.4 The Palette

The Layout Editor palette is organized into two panels designed to make it easy to locate and preview view components for addition to a layout design. The category panel (marked A in Figure 17-6) lists the different categories of view components supported by the Android SDK. When a category is selected from the list, the second panel (B) updates to display a list of the components that fall into that category:

Figure 17-6

To add a component from the palette onto the layout canvas, simply select the item either from the component list or the preview panel, drag it to the desired location on the canvas and drop it into place.

A search for a specific component within the currently selected category may be initiated by clicking on the search button (marked C in Figure 17-6 above) in the palette toolbar and typing in the component name. As characters are typed, matching results will appear in real-time within the component list panel. If you are unsure of the...

17.5 Design Mode and Layout Views

By default, the layout editor will appear in Design mode as is the case in Figure 17-5 above. This mode provides a visual representation of the user interface. Design mode can be selected at any time by clicking on the rightmost mode switching control has shown in Figure 17-7:

Figure 17-7

When the Layout Editor tool is in Design mode, the layout can be viewed in two different ways. The view shown in Figure 17-5 above is the Design view and shows the layout and widgets as they will appear in the running app. A second mode, referred to as the Blueprint view can be shown either instead of, or concurrently with the Design view. The toolbar menu shown in Figure 17-8 provides options to display the Design, Blueprint, or both views. A fourth option, Force Refresh Layout, causes the layout to rebuild and redraw. This can be useful when the layout enters an unexpected state or is not accurately reflecting the current design settings:

Figure...

17.6 Code Mode

It is important to keep in mind when using the Android Studio Layout Editor tool that all it is really doing is providing a user friendly approach to creating XML layout resource files. At any time during the design process, the underlying XML can be viewed and directly edited simply by clicking on the Code button located in the top right-hand corner of the Layout Editor tool panel as shown in Figure 17-10:

Figure 17-10

Figure 17-11 shows the Android Studio Layout Editor tool in Code mode, allowing changes to be made to the user interface declaration by making changes to the XML:

Figure 17-11

17.7 Split Mode

In Split mode, the editor shows the Design and Code views side by side allowing the user interface to be modified both visually using the design canvas and by making changes directly to the XML declarations. To enter Split mode, click on the middle button shown in Figure 17-12 below:

Figure 17-12

Any changes to the XML are automatically reflected in the design canvas and vice versa. Figure 17-13 shows the editor in Split mode:

Figure 17-13

17.8 Setting Attributes

The Attributes panel provides access to all of the available settings for the currently selected component. Figure 17-14, for example, shows the attributes for the TextView widget:

Figure 17-14

The Attributes tool window is divided into the following different sections.

•id - Contains the id property which defines the name by which the currently selected object will be referenced in the source code of the app.

•Declared Attributes - Contains all of the properties which have already been assigned a value.

•Layout - The settings that define how the currently selected view object is positioned and sized in relation to the screen and other objects in the layout.

•Transforms - Contains controls allowing the currently selected object to be rotated, scaled and offset.

•Common Attributes - A list of attributes that commonly need to be changed for the class of view object currently selected.

•All...

17.9 Transforms

The transforms panel within the Attributes tool window (Figure 17-17) provides a set of controls and properties which control visual aspects of the currently selected object in terms of rotation, alpha (used to fade a view in and out), scale (size), and translation (offset from current position):

Figure 17-17

The panel contains a visual representation of the view which updates as properties are changed. These changes are also reflected on the view within layout canvas.

17.10 Tools Visibility Toggles

When reviewing the content of an Android Studio XML layout file in Code mode you will notice that many of the attributes that define how a view is to appear and behave begin with the android: prefix. This indicates that the attributes are set within the android namespace and will take effect when the app is run. The following excerpt from a layout file, for example, sets a variety of attributes on a Button view:

<Button

    android:id="@+id/button"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Button"

.

.

In addition to the android namespace, Android Studio also provides a tools namespace. When attributes are set within this namespace, they only take effect within the layout editor preview. While designing a layout you might, for example, find it helpful...

17.11 Converting Views

Changing a view in a layout from one type to another (such as converting a TextView to an EditText) can be performed easily within the Android Studio layout editor simply by right-clicking on the view either within the screen layout or Component tree window and selecting the Convert view... menu option (Figure 17-21):

Figure 17-21

Once selected, a dialog will appear containing a list of compatible view types to which the selected object is eligible for conversion. Figure 17-22, for example shows the types to which an existing TextView view may be converted:

Figure 17-22

This technique is also useful for converting layouts from one type to another (for example converting a ConstraintLayout to a LinearLayout).

17.12 Displaying Sample Data

When designing layouts in Android Studio situations will arise where the content to be displayed within the user interface will not be available until the app is completed and running. This can sometimes make it difficult to assess from within the layout editor how the layout will appear at app runtime. To address this issue, the layout editor allows sample data to be specified that will populate views within the layout editor with sample images and data. This sample data only appears within the layout editor and is not displayed when the app runs. Sample data may be configured either by directly editing the XML for the layout, or visually using the design-time helper by right-clicking on the widget in the design area and selecting the Set Sample Data menu option. The design-time helper panel will display a range of preconfigured options for sample data to be displayed on the selected view item including combinations of text and images in a variety of configurations...

17.13 Creating a Custom Device Definition

The device menu in the Layout Editor toolbar (Figure 17-24) provides a list of preconfigured device types which, when selected, will appear as the device screen canvas. In addition to the pre-configured device types, any AVD instances that have previously been configured within the Android Studio environment will also be listed within the menu. To add additional device configurations, display the device menu, select the Add Device Definition… option and follow the steps outlined in the chapter entitled “Creating an Android Virtual Device (AVD) in Android Studio”.

Figure 17-24

17.14 Changing the Current Device

As an alternative to the device selection menu, the current device format may be changed by selecting the Custom option from the device menu, clicking on the resize handle located next to the bottom right-hand corner of the device screen (Figure 17-25) and dragging to select an alternate device display format. As the screen resizes, markers will appear indicating the various size options and orientations available for selection:

Figure 17-25

17.15 Layout Validation (Multi Preview)

The layout validation (also referred to as multi preview) option allows the user interface layout to be previewed on a range of Pixel-sized screens simultaneously. To access multi preview, click on the tab located near the top right-hand corner of the Android Studio main window as indicated in Figure 17-26:

Figure 17-26

Once loaded, the panel will appear as shown in Figure 17-27 with the layout rendered on multiple Pixel device screen configurations:

Figure 17-27

17.16 Summary

A key part of developing Android applications involves the creation of the user interface. Within the Android Studio environment, this is performed using the Layout Editor tool which operates in three modes. In Design mode, view components are selected from a palette and positioned on a layout representing an Android device screen and configured using a list of attributes. In Code mode, the underlying XML that represents the user interface layout can be directly edited. Split mode, on the other hand allows the layout to be created and modified both visually and via direct XML editing. These modes combine to provide an extensive and intuitive user interface design environment.

The layout validation panel allows user interface layouts to be quickly previewed on a range of different device screen sizes.