Android Studio's Layout Editor enables us to build layouts by dragging components onto the screen instead of writing the layout XML by hand. Layout Editor is one of the companions, that will follow us through the whole journey of app design. For a beginner, this is one of the places to start building apps. In Layout Editor you can design screens and add components, that you will use later in the code. So we have to get used to it to start building our apps.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.
Android Layout Editor allows us to build UI design by dragging and dropping components on screen. In the world of Android each screen which we see and interact on mobile is called Activity.
And each component seen on it like buttons, images, text, input text boxes are called widgets or views.
Each widget or view is actually contains inside a container view and this container view called Layout. one view contained within another view called child view and its container is called parent view. And this invisible container is called ViewGroup. The whole concept of Android User Interface is defined using the hierarchy of View and ViewGroup objects. A ViewGroup is an invisible container that organizes child views. These child views are other widgets which are used to make the different parts of UI. One ViewGroup can have another ViewGroup as an child element as shown in the figure given below:
Actually Layout view actually determines the position, size, alignment and arrangements on the Screen. Different Android Layouts we will discuss in our later topic.
Before using Android Studio Layout Editor it is better to get familiar with the different parts of the Layout Editor and their purpose.
Consider the below figure of the Android 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.
- Component Tree: 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.
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:1. 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.
2. 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.
2. 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
3. API version: Select the version of Android on which to preview your layout.
4. 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.)
5. 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
In our Next lesson we will disscuss the following.
- We will create a simple project and discuss the Structure of Android App project
- We will build a simple UI and get familiar with it.
- Next we will learn about different XML files used in An Android
- We discuss the Different Layout Used in an Android Application
- After that we will move to our next part of Android Application Development.
