A Guide to the Android Studio Designer Tool

PreviousTable of ContentsNext
Understanding Android Views, View Groups and Layouts in Android StudioDesigning a User Interface using the Android Studio Designer Tool


You are currently reading the Android Studio 1.x - Android 5 Edition of this book.

Purchase the fully updated Android Studio Hedgehog Edition of this publication in eBook ($32.99) or Print ($49.99) format

Android Studio Hedgehog Essentials - Java Edition Print and eBook (PDF) editions contain 87 chapters and over 800 pages
Buy Print Preview Book


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 Designer tool significantly simplifies the task of designing and implementing Android user interfaces.

The Android Studio Designer

As has been demonstrated in previous chapters, the Designer 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 Properties panel.

Under the surface, the Designer tool actually constructs an XML resource file containing the definition of the user interface that is being designed. As such, the Designer tool operates in two distinct modes referred to as Design mode and Text mode.

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 15-1 highlights the key areas of the Android Studio Designer tool in design mode:


The key areas of the Android Studio Designer tool in Design mode

Figure 15-1


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 either by dragging a view component from the palette and dropping it at the desired position on the layout, or by clicking on a widget in the palette and then clicking at the location on the layout where it is to be positioned.

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 in the toolbar. Note that if you find the image of the device frame surrounding the display layout distracting, it can be turned off by selecting the settings menu in the toolbar (represented by the gear icon) and toggling off the Include Device Frames (if available) option.

C – Component Tree – As outlined in the previous chapter (Understanding Android Views, View Groups and Layouts) user interfaces are constructed using a hierarchical structure. The component tree provides a visual overview of the hierarchy of the user interface design. Selecting an element from the component tree will cause the corresponding view in the layout to be selected. Similarly, selecting a view from the device screen layout will select that view in the component tree hierarchy.

D – Properties – All of the component views listed in the palette have associated with them a set of properties that can be used to adjust the behavior and appearance of that view. The Designer’s properties panel provides access to the properties of the currently selected view in the layout allowing changes to be made.

E – Toolbar – The Designer toolbar provides quick access to a wide range of options including, amongst other options, the ability to zoom in and out of the device screen layout, change the device model currently displayed, rotate the layout between portrait and landscape and switch to a different Android SDK API level. The toolbar also has a set of context sensitive buttons which will appear when relevant view types are selected in the device screen layout.

F – Mode Switching Tabs – The tabs located along the lower edge of the Designer provide a way to switch back and forth between the Designer tool’s text and design modes.


Text Mode

It is important to keep in mind when using the Android Studio Designer 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 Text tab located at the bottom of the Designer tool panel. To return to design mode, simply click on the Design tab.

Figure 15-2 highlights the key areas of the Android Studio Designer tool in text mode:


The key areas of the Android Studio Designer tool in Text mode

Figure 15-2


A – Editor – The editor panel displays the XML that makes up the current user interface layout design. This is the full Android Studio editor environment containing all of the features previously outlined in the The Basics of the Android Studio Code Editor chapter of this book.

B – Preview – As changes are made to the XML in the editor, these changes are visually reflected in the preview window. This provides instant visual feedback on the XML changes as they are made in the editor, thereby avoiding the need to switch back and forth between text and design mode to see changes. Whilst the preview does not allow direct manipulation of the views, double clicking on a view in the preview will automatically switch to design mode and preselect the corresponding view in the device screen layout.

C – Toolbar – The toolbar in text mode provides a subset of those functions available in design mode with the addition of a button to take a screenshot of the current device screen layout.

D - Mode Switching Tabs – The tabs located along the lower edge of the Designer provide a way to switch back and forth between the Designer tool’s text and design modes.

You are currently reading the Android Studio 1.x - Android 5 Edition of this book.

Purchase the fully updated Android Studio Hedgehog Edition of this publication in eBook ($32.99) or Print ($49.99) format

Android Studio Hedgehog Essentials - Java Edition Print and eBook (PDF) editions contain 87 chapters and over 800 pages
Buy Print Preview Book

Setting Properties

The properties panel provides access to all of the available settings for the currently selected component. Clicking in the panel and typing characters will begin a search process to highlight and select the closest match to the typed characters.

Whilst the properties panel provides access to the full list of properties for the currently selected component, quick access to a subset of common properties can be gained by double clicking on the component view in the layout. Double clicking on a TextView component, for example, provides quick access to the text and id properties for the view as shown in Figure 15-3:


Quick access to properties in the Android Studio Designer tool

Figure 15-3


Some properties, both in the main properties and quick access panels contain a button displaying three dots. This indicates that a settings dialog is available to assist in selecting a suitable property value. To display the dialog, simply click on the button. Properties for which a finite number of valid options are available will present a drop down menu (Figure 15-4) from which a selection may be made.


A drop down menu in the Android Studio Designer Properties panel

Figure 15-4


By default, the properties panel only lists the most commonly used properties. Access to the full range of properties for the currently selected component type is available by switching the panel into expert mode. This mode can be toggled on and off by clicking on the funnel button in the toolbar as indicated by the arrow in Figure 15-5:


Switching the Android Studio Designer Properties panel into Expert mode

Figure 15-5


In most instances, access to the expert mode properties will not be needed, though it is useful to be aware of this mode in the event that the property you are looking for is not listed in standard mode.

Type Morphing

The morphing feature of the Designer tool allows a component view that is already part of the user interface layout to be changed from one type to another. Morphing can, for example, be used to change a TextView component into an EditText view component. Whilst morphing is limited in terms of the types of conversion that can be performed (it is not possible, for example, to morph a TextView into a ProgressBar), this does provide a quicker alternative to deleting and adding components in many cases.

To morph a component, simply right-click on the view in the layout and select the Morphing menu option followed by the type to which the view is to be changed. Figure 15-6, for example, shows the morphing options available for an ImageButton component:


Morphing a view type in Android Studio Designer

Figure 15-6

Creating a Custom Device Definition

The device menu in the Designer toolbar 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

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 Designer tool which operates in two 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 properties. In text mode, the underlying XML that represents the user interface layout can be directly edited, with changes reflected in a preview screen. These modes combine to provide an extensive and intuitive user interface design environment.


You are currently reading the Android Studio 1.x - Android 5 Edition of this book.

Purchase the fully updated Android Studio Hedgehog Edition of this publication in eBook ($32.99) or Print ($49.99) format

Android Studio Hedgehog Essentials - Java Edition Print and eBook (PDF) editions contain 87 chapters and over 800 pages
Buy Print Preview Book



PreviousTable of ContentsNext
Understanding Android Views, View Groups and Layouts in Android StudioDesigning a User Interface using the Android Studio Designer Tool