Add view display into top of screen andoid năm 2024

The Layout Editor enables you to quickly build View-based layouts by dragging UI elements into a visual design editor instead of writing layout XML. 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 properly on different screen sizes.

The Layout Editor is especially powerful when building a layout with ConstraintLayout.

This page provides an overview of the Layout Editor. To learn more about layout fundamentals, see Layouts.

Introduction to the Layout Editor

The Layout Editor appears when you open an XML layout file.

Figure 1. The Layout Editor.

1. Palette: contains various views and view groups that you can drag into your layout.
2. Component Tree: shows the hierarchy of components in your layout.
3. Toolbar: has buttons that configure your layout appearance in the editor and change layout attributes.
4. Design editor: lets you edit your layout in Design view, Blueprint view, or both.
5. Attributes: has controls for the selected view's attributes.
6. View mode: lets you view your layout in either Code
   , Split
   , or Design
   modes. Split mode shows the Code and Design windows at the same time.
7. Zoom and pan controls: control the preview size and position within the 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 Code

button in the top-right corner of the window. Note that the Palette, Component Tree, and Attributes panels are not available while editing your layout in Code view.

Tip: To switch between design and text editors, press`Alt` (Control on macOS) plus Shift and the right or left arrow key.

Change the preview appearance

The buttons in the top row of the design editor let you configure the appearance of your layout in the editor.

![Buttons in the Layout Editor toolbar that configure the layout

  appearance](https://developer.android.com/static/studio/images/write/layout-editor-toolbar.png) Figure 2\. Buttons in the Layout Editor toolbar that configure the layout appearance.

1. Design and Blueprint: Select how you want to view your layout in the editor. You can also press B to cycle through these view types.
   • Choose Design to see a rendered preview of your layout.
   • Choose Blueprint to see only outlines for each view.
   • Choose Design + Blueprint to see both views side by side.
2. Screen orientation and layout variants: Choose between landscape or portrait screen orientation or choose other screen modes that your app provides alternative layouts for, such as night mode. This menu also contains commands for , as described in a section on this page. You can also press the letter O on your keyboard to change orientation.
3. System UI Mode: If you've enabled dynamic color in your app, switch wallpapers and see how your layouts react to different users chosen wallpaper. Note that you must first change the theme to a Material dynamic color theme, then change the wallpaper.
4. 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, and you can create a new AVD by selecting Add Device Definition from the list, as shown in figure 3.
   • To resize the device, drag the bottom-right corner of the layout.
   • Press D to cycle through the device list. Testing your layout against the Reference Devices in this menu helps your app scale well to layout states on real devices.
     Figure 3. The device list showing Reference Devices.
5. API version: Select the version of Android to preview your layout. The list of available Android versions depends on which SDK platform versions you have installed using SDK Manager.
6. App theme: Select which UI theme to apply to the preview. This works only for supported layout styles, so many themes in this list result in an error.
7. 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 menu. For more information on working with translations, see Localize the UI with Translations Editor.

Create a new layout

When adding a new layout for your app, first create a default 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 , as described in a section on this page, for specific device configurations, such as for large screens.

You can create a new layout in one of the following ways:

1. In the Project window, click the module you want to add a layout to.
2. In the main menu, select File > New > XML > Layout XML File.
3. In the dialog that appears, provide the filename, the root layout tag, and the source set where the layout belongs.
4. Click Finish to create the layout.

Use the Project view

1. Choose the Project view from within the Project window.
2. Right-click the layout directory where you'd like to add the layout.
3. In the context menu that appears, click New > Layout Resource File.

Use the Android view

1. Choose the Android view from within the Project window.
2. Right-click the layout folder.
3. In the context menu that appears, select New > Layout Resource File.

Use the Resource Manager

1. In the Resource Manager, select the Layout tab.
2. Click the `ConstraintLayout`0 button, and then click Layout Resource File.

Use layout variants to optimize for different screens

A layout variant is an alternative version of an existing layout that is optimized for a certain screen size or orientation.

Use a suggested layout variant

Android Studio includes common layout variants that you can use in your project. To use a suggested layout variant, do the following:

1. Open your default layout file.
2. Click the Design
   icon in the top-right corner of the window.
3. The name of the layout file appears in the Action to switch and create qualifiers for layout files drop-down. Select the drop-down.
4. In the drop-down list, select a variant such as Create Landscape Qualifier or Create Tablet Qualifier.
   Figure 4. Drop-down list of layout qualifiers.

A new layout directory is created.

Create your own layout variant

If you'd like to create your own layout variant, do the following:

1. Open your default layout file.
2. Click the Design
   icon in the top-right corner of the window.
3. The name of the layout file appears in the Action to switch and create qualifiers for layout files drop-down. Select the drop-down.
4. In the drop-down list, select Add Resource Qualifier. (See figure 4 above.) The Select Resource Directory dialog appears.
5. In the Select Resource Directory dialog, define the resource qualifiers for the variant:
   1. Select a qualifier from the Available qualifiers list.
   2. Click the Add
      button.
   3. Enter any required values.
   4. Repeat these steps to add other qualifiers.
6. Once you've added all of your qualifiers, click OK.

When you have multiple variations of the same layout, you can switch between them by selecting a variant from the Action to switch and create qualifiers for layout files drop-down.

For more information about how to create layouts for different screens, see Support different screen sizes.

Convert a view or layout

You can convert a view to another kind of view, and you can convert a layout to another kind of layout:

1. Click the Design button in the top-right corner of the editor window.
2. In the Component Tree, right-click the view or layout, and then click Convert view.
3. In the dialog that appears, choose the new type of view or layout, and then click Apply.

Convert a layout to ConstraintLayout

For improved layout performance, convert older layouts to`ConstraintLayout`.ConstraintLayout uses a constraint-based layout system that lets you build most layouts without any nested view groups.

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

1. Open an existing layout in Android Studio.
2. Click the Design
   icon in the top-right corner of the editor window.
3. In the Component Tree, right-click the layout, and then click Convert `ConstraintLayout`4 to ConstraintLayout.

To learn more about ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

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. Alternatively, you can type the name of the item whenever the Palette window has focus.

In the Palette, you can find frequently used items in the Common category. To add an item to this category, right-click a view or view group in the Palette and then 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+`ConstraintLayout`7.

To view 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 the command opens the homepage of the Material Guidelines documentation.

Add views to your layout

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

If you are using ConstraintLayout, you can using the Infer Constraints and Autoconnect features.

Edit view attributes

Figure 5. The Attributes panel.

You can edit view attributes from the Attributes panel in the Layout Editor. This window is available only when the design editor is open, so view your layout in either Design or Split mode to use it.

When you select a view, whether by clicking the view in the Component Tree or in the design editor, the Attributes panel shows the following, as indicated in figure 5:

1. Declared Attributes: Lists attributes specified in the layout file. To add an attribute, click the Add
   button at the top of the section.
2. Layout: Contains controls for the width and height of the view. If the view is in a ConstraintLayout, this section also shows constraint bias and lists the constraints that the view uses. For more information on controlling the size of views with ConstraintLayout, see .
3. Common Attributes: Lists common attributes for the selected view. To see all available attributes, expand the All Attributes section at the bottom of the window.
4. Search: Lets you search for a specific view attribute.
5. The icons to the right of each attribute value indicate whether the attribute values are resource references. These indicators are solid
   when the value is a resource reference and empty
   when the value is hardcoded to help you recognize hardcoded values at a glance. Click indicators in either state to open the Resources dialog, where you can select a resource reference for the corresponding attribute.
6. A red highlight around an attribute value indicates an error with the value. For example, an error might indicate an invalid entry for a layout-defining attribute. An orange highlight indicates a warning for the value. For example, a warning might appear when you use a hardcoded value where a resource reference is expected.

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. You can add sample preview data to a `Alt`1, an`Alt`2, or a `Alt`3 from within the Layout Editor.

To display the Design-time View Attributes window, right-click one of these view types and choose Set Sample Data, as shown in figure 6.

Figure 6. The Design-time View Attributes window.

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

Figure 7. A `Alt`1 with sample data.

For an `Alt`2, you can choose between different sample images. When you choose a sample image, Android Studio populates the `Control`0 attribute of the`Alt`2 (or `Control`2 if using AndroidX).

Figure 8. An `Alt`2 with sample data.

For a `Alt`3, you can choose from a set of templates that contain sample images and texts. When using these templates, Android Studio adds a file to your `Control`5 directory, `Control`6, that contains the layout for the sample data. Android Studio also adds metadata to the`Alt`3 to properly display the sample data.

Figure 9. A `Alt`3 with sample data.

Show layout warnings and errors

The Layout Editor notifies you of any layout issues next to the corresponding view in the Component Tree by using a red circle exclamation icon

for errors or an orange triangle exclamation iconfor warnings. Click the icon to see more details.

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

or) in the toolbar.

Download fonts and apply them to text

When using Android 8.0 (API level 26) or the Jetpack Core library, you can select from hundreds of fonts by following these steps: