34,333
edits
Changes
no edit summary
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 1315-1 highlights the key areas of the Android Studio Designer tool in design mode:
[[Image:android_studio_designer_overview.png|The key areas of the Android Studio Designer tool in Design mode]]
Figure 1315-1
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 1315-2 highlights the key areas of the Android Studio Designer tool in text mode:
[[Image:android_studio_designer_text_mode_labelled.png|The key areas of the Android Studio Designer tool in Text mode]]
Figure 1315-2
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 1315-3:
[[Image:android_studio_designer_property_quick_access.png|Quick access to properties in the Android Studio Designer tool]]
Figure 1315-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 1315-4) from which a selection may be made.
[[Image:android_studio_designer_property_menu.png|A drop down menu in the Android Studio Designer Properties panel]]
Figure 1315-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 1315-5:
[[Image:android_studio_designer_expert_mode.png|Switching the Android Studio Designer Properties panel into Expert mode]]
Figure 1315-5
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 13 15-6, for example, shows the morphing options available for an ImageButton component:
[[Image:android_studio_designer_morphing.png|Morphing a view type in Android Studio Designer]]
Figure 1315-6
== Creating a Custom Device Definition ==
