Build a UI with Layout Editor

In Android Studio's Layout Editor, you can quickly build layouts by dragging widgets into a visual design editor instead of writing the layout XML by hand. The editor can preview your layout in different Android devices and versions, and you can dynamically resize the layout to be sure it works well on different screen sizes. The Layout Editor is especially powerful when building a new layout with ConstraintLayout—a layout manager provided in a support library that's compatible with Android 2.3 (API level 9) and higher.

This page provides an overview of the Layout Editor's interface and features. To learn more about how to build a layout with ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

Introduction to the editor

The Layout Editor appears when you open an XML layout file. Corresponding to the numbers in figure 1, the regions of the editor are as follows:

1. Palette: Provides a list of widgets and layouts that you can drag into your layout in the editor.
2. Component Tree: Shows the view hierarchy for your layout. Click an item here to see it selected in the editor.
3. Toolbar: Provides buttons to configure your layout appearance in the editor and to edit the layout properties.
4. Design Editor: Displays your layout in a combination of the Design and Blueprint views.
5. Properties: Provides property controls for the currently selected view.

Figure 1. The Layout Editor showing the design editor

When you open an XML layout file, the design editor opens by default (as shown in figure 1). To instead edit the XML in the text editor, click the Text tab at the bottom of the window. While in the text editor, you can also view the Palette, Component Tree, and design editor by clicking Preview on the right side of the window. However, the Properties window is not available from the text editor.

Tip: You can switch between design and text editors by pressing Control+Shift+Right/Left arrow.

Figure 2. The text editor with the Preview window open

Change the preview appearance

The buttons in the top row of the design editor allow you to configure the appearance of your layout in the editor. This toolbar is also available in the text editor's Preview window.

Figure 3. Buttons in the Layout Editor toolbar that configure the layout appearance

Corresponding to the numbers in figure 3, the buttons available are as follows:

1. Design and blueprint: Select how you'd like to view your layout in the editor. The Design view displays a color preview of your layout, while the Blueprint view shows only outlines for each view. Or you can view both Design + Blueprint side by side.

   Tip: You can toggle between these views by pressing B.

2. Screen orientation: Rotate the device between landscape and portrait.
3. Device type and size: Select the device type (phone/tablet, Android TV, or Android Wear) and screen configuration (size and density). You can select from several pre-configured device types and your own AVD definitions, or start a new AVD by selecting Add Device Definition from the list.

   Tip: You can resize the device size by dragging the bottom-right corner of the layout.

4. API version: Select the version of Android on which to preview your layout.
5. App theme: Select which UI theme to apply to the preview. Note: This works only for supported layout styles; thus many themes in this list result in an error.
6. Language: Select the language to show for your UI strings. This list displays only the languages available in your string resources. If you'd like to edit your translations, click Edit Translations from the drop-down menu (see Localize the UI with Translations Editor).
7. Layout Variants: Switch to one of your alternative layouts for this file, or create a new one (see Create a layout variant below).

Note: These configurations have no effect on your app's code or manifest (unless you chose to add a new layout file from Layout Variants); they affect only the layout preview.

Create a new layout

When adding a new layout for your app, begin by creating a layout file in your project's default layout/ directory so that it applies to all device configurations. Once you have a default layout, you can create layout variations for specific device configurations (such as for xlarge screens).

There are a few different ways to create a new layout, depending on your Project window view, but the following procedure is accessible from any view:

1. In the Project window, click the module (such as app) in which you want to add a layout.
2. In the main menu, select File > New > XML > Layout XML File.
3. In the dialog that appears, enter a name for the file, the root layout tag, and the source set in which the layout belongs. Then click Finish.

Figure 4. The dialog to add a new layout XML file

A couple other ways to start a new layout file (although the dialogs that appear are different) are the following:

• If you've selected the Project view in the Project window: open the res directory for your app module, right-click the layout directory where you'd like to add the layout and then click New > Layout resource file.
• If you've selected the Android view in the Project window: right-click the layout folder and then select New > Layout resource file.

Create a layout variant

If you already have a layout and want to create an alternative version to optimize the layout for different screen sizes or orientations, follow these steps:

1. Open your original layout file and be sure you're viewing the design editor (click the Design tab at the bottom of the window).
2. Click Layout Variants in the toolbar. In the dropdown list, either click a suggested variant such as Create Landscape Variant and you're done, or click Create Other and continue to the next step.
3. In the dialog that appears, you simply need to define the resource qualifiers for the directory name. You can type it in Directory name or select from the Available qualifiers list, one at a time, and click Add .
4. Once you've added all your qualifiers, click OK.

When you have multiple variations of the same layout, you can easily switch between them from the list that appears when you click Layout Variants .

For more information about how to create layouts for different screens, see Supporting Different Screen Sizes.

Convert a layout to ConstraintLayout

ConstraintLayout is a view group available in the Constraint Layout library, which is included with Android Studio 2.2 and higher. It was built from the ground up along with the Layout Editor, so everything is accessible from the design editor and you never need to edit the XML by hand. Best of all, its constraint-based layout system allows you to build most layouts without nested any view groups.

For improved layout performance, you should convert older layouts to ConstraintLayout. Android Studio has a built-in converter to help you do this:

1. Open your existing layout in Android Studio and click the Design tab at the bottom of the editor window.
2. In the Component Tree window, right-click the layout and then click Convert layout to ConstraintLayout.

To learn more about how to build a layout with ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

Add views to your layout

Building a layout for your app requires that you understand the layout fundamentals, but Android Studio takes away many of the complexities of working directly in the XML files. The Layout Editor helps you accomplish a lot of work by dragging widgets into the design editor and refining layout attributes in the Properties window.

To start building your layout, simply drag views from the Palette pane into the design editor. As you place a view in the layout, the editor indicates the view's relationship with the rest of the layout in a manner appropriate to the type of layout in which you place it.

For example, video 1 shows how dragging a TextView into a ConstraintLayout creates constraints below and aligned left to the above TextView (this is with Autoconnect enabled).

Video 1.The Layout Editor can add constraints for your view when you drag it into the editor

When dragging views into a layout other than ConstraintLayout, the Layout Editor responds differently, as appropriate for the layout properties available for that layout.

Any errors detected in your layout are counted in the toolbar. To view them, click Show Warnings and Errors .

The appearance in the design editor is for preview only. Although editing your layout in the design editor can get you far with accurate appearances, you should run your app on an emulator or real device to verify the results.

For more information about how Android's View APIs work to build a layout, see Layout Fundamentals. Or for a guide to using ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

Edit the view properties

Instead of editing your view properties in XML, you can do so from the Properties window (on the right side of the Layout Editor). This window is available only when the design editor is open, so be sure you've selected the Design tab at the bottom of the window.

When you select a view, the Properties window shows the following, as indicated in figure 5:

1. View inspector with controls for width/height style, margins, and bias (available only for views in a ConstraintLayout). For more information, see Build a Responsive UI with ConstraintLayout.
2. A list of common properties for the selected view. To see all available properties, click View all properties at the top of the window.
3. Favorite properties you've selected. To add properties, click View All Properties and then click the star that appears when you hover your mouse over the left side of a property name.

To search for a specific view property, click View All Properties and then click Search at the top of the window.