A Guide to the Android Studio Designer Tool - Android 6

From Techotopia
Revision as of 19:59, 27 October 2016 by Neil (Talk | contribs) (Text replacement - "<table border="0" cellspacing="0">" to "<table border="0" cellspacing="0" width="100%">")

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
PreviousTable of ContentsNext
The Basics of the Android Studio Code EditorDesigning a User Interface using the Android Studio Designer Tool


You are reading a sample chapter from the Android Studio 1.x / Android 6 Edition 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.


Contents


Blank 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 Designer 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 Blank Activity and Empty Activity templates. Although these seem similar at first glance, there are actually considerable differences between the two options.

The Empty Activity template creates a single layout file consisting of a RelativeLayout manager instance containing a TextView object as shown in Figure 15-1:


Android empty activity 6.0.png

Figure 15-1

You are reading a sample chapter from the Android Studio 1.x / Android 6 Edition 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

The Blank Activity, on the other hand, consists of two layout files. The top level layout file has a CoordinatorLayout as the root view, a configurable app bar, a menu preconfigured with a single menu item (A in Figure 15 2), a floating action button (B) and a reference to the second layout file in which the layout for the content area of the activity user interface is declared:


Android blank activity 6.0.png

Figure 15-2


Clearly the Empty Activity template is useful if you need neither a floating action button nor a menu in your activity and do not need the special app bar behavior provided by the CoordinatorLayout such as options to make the app bar and toolbar collapse from view during certain scrolling operations (a topic covered in the chapter entitled Working with the AppBar and Collapsing Toolbar Layouts). The Blank Activity is useful, however, in that it provides these elements by default. In fact, it is often quicker to create a new activity using the Blank Activity template and delete the elements you do not require than to use the Empty Activity template and manually implement behavior such as collapsing toolbars, a menu or floating action button.

Since not all of the examples in this book require the features of the Blank Activity template, however, most of the examples in this chapter will use the Empty Activity template unless the example requires one or other of the features provided by the Blank Activity template.

For future reference, if you need a menu but not a floating action button, use the Blank Activity and follow these steps to delete the floating action button:

1. Double-click on the main activity layout file located in the Project tool window under app -> res -> layout to load it into the Designer. This will be the layout file prefixed with activity_ and not the content file prefixed with content_.
2. With the layout loaded into the Designer tool, select the floating action button and tap the keyboard Delete key to remove the object from the layout.
3. Locate and edit the Java code for the activity (located under app -> java -> <package name> -> <activity class name> and remove the floating action button code from the onCreate method as follows:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

If you need a floating action button but no menu, use the Blank Activity template and follow these steps:

1. Edit the activity class file and delete the onCreateOptionsMenu and onOptionsItemSelected methods.
2. Select the res -> menu item in the Project tool window and tap the keyboard Delete key to remove the folder and corresponding menu resource files from the project.

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


Android studio designer tool 1.4.png

Figure 15-3

You are reading a sample chapter from the Android Studio 1.x / Android 6 Edition 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

  • 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-4 highlights the key areas of the Android Studio Designer tool in text mode:


Android studio designer tool text1.4.png

Figure 15-4


  • 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. While 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.

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.

You are reading a sample chapter from the Android Studio 1.x / Android 6 Edition 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

While 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-5:


Android studio designer property editor 1.4.png

Figure 15-5


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-6) from which a selection may be made.


Android studio property editor 1.4.png

Figure 15-6


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-7:


Switching the Android Studio Designer Properties panel into Expert mode

Figure 15-7

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. While 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-8, for example, shows the morphing options available for an ImageButton component:


Morphing a view type in Android Studio Designer

Figure 15-8

Creating a Custom Device Definition

The device menu in the Designer toolbar (Figure 15 9) 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.


Android studio devices menu 1.4.png

Figure 15-9

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 reading a sample chapter from the Android Studio 1.x / Android 6 Edition 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
The Basics of the Android Studio Code EditorDesigning a User Interface using the Android Studio Designer Tool