Build a UI with Layout Editor

In the Layout Editor, you can quickly build layouts by dragging UI elements
into a visual design editor instead of writing the layout XML by hand. The design
editor can preview your layout on 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.

Introduction to the Layout Editor

Corresponding to the numbers in figure 1, the regions of the editor are as
follows:

Palette: List of views and view groups that you can drag into your layout.

ComponentTree: View hierarchy for your layout.

Toolbar: Buttons to configure your layout appearance in the editor
and to change some layout attributes.

Design editor: Layout in Design or Blueprint view, or both.

Attributes: Controls for the selected view's attributes.

Figure 1. The Layout Editor

When you open an XML layout file, the design editor opens by default (as shown
in figure 1).

To edit the layout 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. The Attributes window is not available from the text editor.

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 2. Buttons in the Layout Editor toolbar that
configure the layout appearance

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

Design and blueprint: Select how you'd like to view your
layout in the editor; select either the Design view (a real-world
preview of your layout), the Blueprint view (only outlines for each
view), or Design + Blueprint for both side by side.

Tip: Press B to cycle through these views.

Screen orientation and layout variants: Select between
landscape and portrait screen orientation, or other screen modes for which
your app provides alternative layouts, such as night mode. This menu also
contains commands for creating a new layout variant.

Device type and size: Select the device type (phone/tablet, Android TV, or
Wear OS) 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.

API version: Select the version of Android on which to preview your layout.

App theme: Select which UI theme to apply to the preview.
(This works only for supported layout styles; thus many themes in this list
result in an error.)

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).

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:

In the Project window, click the module (such as app) in
which you want to add a layout.

In the main menu, select File > New > XML > Layout XML File.

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.

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:

Open your original layout file and be sure you're viewing the design editor (click the
Design tab at the bottom of the window).

Click Orientation for Preview
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.

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.

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.

Convert a view or layout

You can convert a view to another kind of view, and you can convert a layout
(view group) to another kind of layout.

Click the Design tab at the bottom of the editor window.

In the Component Tree, right-click the view or layout, and then
click Convert view.

In the dialog that appears, choose the new type of view or layout, and then
click Apply.

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 any
nested view groups.

For improved layout performance, you should convert older layouts to
ConstraintLayout.

To convert an existing layout to ConstraintLayout, do the following:

Open your existing layout in Android Studio and click the Design tab
at the bottom of the editor window.

In the Component Tree window, right-click the layout and
then click Convert layout to ConstraintLayout.

The command to specifically convert a layout to ConstraintLayout is
more intelligent about inferring constraints and preserving layout than the
simple Convert view command described in the previous section.

Find items in the Palette

To search for a view or view group by name in the Palette, click the
Search
button at the top of the palette, or just start typing the name of the item when
the Palette window is active.

You can find frequently used items in the Common category in the
Palette. To add an item to this category, right-click on a view or view group
in the Palette and click Favorite in the context menu.

Open documentation from the Palette

To open the Android Developers reference documentation for a view or view group,
select the UI element in the Palette and press Shift+F1.

To open the Material Guidelines documentation for a view or view group,
right-click the UI element in the Palette and select Material Guidelines
from the context menu. If no specific entry exists for the item, then this
command opens the home page of the
Material Guidelines documentation.

Add views to your layout

To start building your layout, simply drag views and view groups from the
Palette into the design editor. As you place a view in the layout, the
editor the editor displays information about the view's relationship with the
rest of the layout.

Edit view attributes

Figure 3. The Attributes window

Instead of editing your view attributes in XML, you can do so from the
Attributes 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—whether by clicking it in the Component Tree
or in the design editor—the Attributes window shows the following, as
indicated in figure 3:

The Declared Attributes section, which lists attributes specified in
the layout file. To add an attribute, click Add at the top right of the section.

A list of common attributes for the selected view.
To see all available attributes, expand the All Attributes section at
the bottom of the window.

The Search button. Click this to search for a specific view attribute.

The indicator to the right of each attribute value is solid
when the value is a resource reference, and empty
when it is not. This allows you to recognize
hard-coded values at a glance. Clicking this indicator in either state opens
the Resources dialog window, where you can select a resource reference
for the corresponding attribute.

Attributes with errors or warnings are highlighted, with red highlights for
errors and orange highlights for warnings. One example of an error is an
invalid entry in a layout-defining attribute (as pictured). One example of a
warning is use of a hard-coded value when a resource reference is expected (as
pictured).

Add sample data to your view

Because many Android layouts rely on runtime data, it can be difficult to
visualize the look and feel of a layout while designing your app. In Android
Studio 3.2 and later, you can add sample preview data to a TextView, an
ImageView, or a RecyclerView from within the Layout Editor.

Note: When you add sample data to a View, Android Studio makes changes to
your project as though you were using your own data. You can then modify these
changes as needed.

When you hover your mouse over a view, the design-time attributes button
appears below the view in the Design window. Click this button to display
the Design-time View Attributes window, as shown in figure 4.

Figure 4. The Design-time View Attributes window

In a TextView, you can choose between different sample text categories. When
using sample text, Android Studio populates the text attribute of the
TextView with your chosen sample data. Note that you can choose sample text
via the Design-time View Attributes window only if the text attribute is
empty.

Figure 5. A TextView with sample data

In an ImageView, you can choose between different sample images. When you
choose a sample image, Android Studio populates the tools:src attribute of the
ImageView (or tools:srcCompat if using the Support Library).

Figure 6. An ImageView with sample data

In a RecyclerView, you can choose between a set of templates that contain
sample images and texts. When using these templates, Android Studio adds a file
to your res/layout directory, recycler_view_item.xml, that contains the
layout for the sample data. Android Studio also adds metadata to the
RecyclerView to properly display the sample data.

Figure 7. A RecyclerView with sample data

Show layout warnings and errors

If any issues are detected in your layout, they are indicated in the Component
Tree with an exclamation icon
(
or
)
next to the corresponding view. To view the error details, click the icon.

To see all known issues in a window below the editor, click Show Warnings and Errors
(
or
)
in the toolbar.

From this window you can also enable Show issues on the preview, which adds a
warning or error icon to each corresponding view in the preview (in the design
view only, not the blueprint view).

Download fonts and apply them to text

When using Android 8.0 (API level 26) or Android Support Library 26.0.0 or higher,
you can select from hundreds of fonts by following these steps:

In the Layout Editor, click the Design tab to view your layout in
the design editor.

Click a text view.

In the Attributes window, expand textAppearance and then click to
expand the fontFamily box.

Scroll to the bottom of the list and click More Fonts to open
the Resources dialog.

In the Resources dialog, select a font by browsing the list or typing
into the search bar at the top.
If you select one listed under Downloadable, then you can either
click Create downloadable font to load the font at runtime (as a
downloadable font),
or click Add font to project to package the TTF font file in your APK.
(The fonts listed under Android are provided in the Android system, so
they do not need to be downloaded or bundled in your APK.)

Click OK.

Content and code samples on this page are subject to the licenses described in the Content License. Java is a registered trademark of Oracle and/or its affiliates.