With Android Studio Layout Editor we can build layouts by dragging components onto the screen instead of writing the layout XML by hand. Don’t worry; you can still switch view and edit XML with Text editor if you want, see below.
Layout Editor is one of the companions in Android Studio, that will follow us through the whole journey of app design. For a beginner, this is one of the places where 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.
Google (aka Android) officially calls components widgets, but we think that component is a more appropriate word for elements like Button, TextView etc. We will call all those elements components throughout the article. So let us at CodeBrainer explain a little bit about Layout Editor.
With Android Studio Layout Editor, you can:
- Add components to the layout using drag and drop
- Add and change all the attributes (properties) for components
- View and Edit constraints for layouts
- Prepare a responsive design with a preview
- Edit XML code for layout
Parts of Layout Editor
Palette
Provides a list of components and layouts that you can drag into your layout in the editor. Here you find Buttons, TextViews, Spinners, ImageViews etc.
Component Tree
Shows the view hierarchy for your layout. Click an item here to see it selected in the editor. The component tree is important when you have some nested components.
Toolbar
Provides buttons to configure your layout design in the editor and helps you change some layout attributes. In addition, here you can change the size of the display to check if constraints work as expected. Here you can also find alignments and connection tools.
Design Editor
The Design Editor displays your layout in a combination of the Design and Blueprint views. Moreover, this is the main part of Android Studio Layout Editor, and here you see what you have done visually.
Attributes
Attributes are properties for components in your layout. Most of the time, attributes will describe visual aspects of components, but sometimes they are used to set layout behaviour as well and set parameters for tools.
The Attributes window is a list of properties you can set for your component. Typical properties are Text, Hint, ID, Background. All the aspects of components can be set with attributes found here.
All attributes
When you start using layout editor, the “All attributes” section will be hidden in a separate section (for older versions you will see a link at the bottom of the attributes palette). All attributes is great, furthermore you can use it to search for attributes that you know you want to set but are not a part of commonly used attributes. Also for searching (see below) is best to have your view switched to all attributes.
There are two "Toggle all attributes" buttons to switch between most used attributes and all attributes. First is a link button at the bottom of the Attributes tooltip window. Second is left/right arrow button at the top of Attributes tooltip window.
When you select all attributes, the list is divided into two parts. The first one shows the most recently used attributes. The second one shows all the other attributes in alphabetical order.
Declared Attributes
Declared Attributes is a section, which lists attributes specified in the layout file. When you add a value to a new attribute for a component on the layout, this attribute will become a part of this list. In addition, this means that it will be quicker to find all the used attributes.
Searching for attributes
Above the attributes, there is a search field you can use; this is an excellent way of looking for those “hidden” attributes. You have to remember one thing, that it is best to be in view all attributes mode for searching since Android Studio searches only within visible attributes. For example, we have a search for the Gravity attribute (first search with filtered attributes and second with all attributes).
Text editor for XML code
In the Text Editor, you can define the visual aspects of components with the XML code. When using a text editor for your XML, you can also see a preview of that screen in real-time as you write the code.
A great way to learn about XML is to use Layout Editor and design your layouts (screens) and check the XML code, with every change you will understand more. Nice practice can be a simple app like Love Calculator on our blog.
If you want to learn more on how XML looks, there is a good source for that at Android, Resource types overview it has descriptions for all resource types with their XML attributes and structures.
Learn how you can start creating apps with Flutter.
Learn more
Common actions you can do in the Layout Editor
Let us describe a few common actions you can do in the Layout Editor.
Adding a component to the screen
All the components you can add to the screen are visible in the Pallete.
Drag & Drop
Drag & drop is a visual approach since you have control over the position of a component on the screen. With drag & drop, you can also control constraints if you have the Autoconnect tool turned on. See the explanation below.
Drag & Drop to the Component Tree
This one is great since you have more control over the hierarchy of components. However, you have to set all the constraints afterwards in the Attributes window or by dragging anchors.
Views, widgets or Components
Like we said before, we at CodeBrainer decided to use the name: “component” for all the elements that go on layouts or views, but you can also hear other names for them like views and widgets in some cases even controls. No matter the name, they are elements that will help us make a user interface for our apps.
There are a lot of components. Most used components (views) are:
Naming a component
Since you link elements from Layout to Activity in most cases, naming them for reference makes sense. The ID is a field in Attributes used for naming your elements. Your name then appears in the code under R.id.”name”.
Changing text
Many components have text as part of their visual presentation. You can change this text in “text” field. For example, TextView displays text as an integral part. You can style it later. The button has text inside, to explain what it does.
Solid background
Let us show you how to set a solid background for a control. You can do this by using a hash colour string in the background field. For the best colour out there, magenta :D, you write “#ff00ff”.
If you want to set a solid background using values, you must add a new colour value. Adding a colour as a resource value is useful because you can reuse it everywhere in the app. Imagine that the first version of your app has all the texts in red, but you later decide to change it to blue. You need to change this value, and the whole app has a blue colour for the texts. Here is an example of a red colour.
- Click the button “Pick a Resource”
- Change to “Color” in the selection on the left
- Add new resource
- Select a red color of your choice
Constraints
Constraints are great for making your layout work on different display sizes. With constraints, you are describing the position of components on the screen. Also, because these are not fixed values, Android can resize and move them around with rules you have set. Using constraints, you are actually making a ConstraintLayout, that is the best way of making your apps responsive.
Naming is important for linking of objects to work. Without names, Android Studio Layout Editor is unable to create constraints.
-
Autoconnect Tool
The autoconnect tool is a button with a magnet inside. Autoconnect draws guidelines for you. This way, you can see which constraints are made for us automatically. Usually, it is helpful to leave it on, but sometimes it makes constraints, that are not applicable to you and you have to reconnect them.
-
Clear all constraints
Clear all constraint is a button that removes all constraints for selected components. Don’t press it :D It removes all the constraints, and it is better to have control over it.
-
Button with number
Button with a number (usually “8”) is a default margin of constraints. The margin is a minimum spacing from the border to the component itself. You can see this margin in the Attributes window as well as in the top part, where you can see all the connections.
-
Make connections in the Attributes window
To add connections, you can press the plus button in the Attributes tool window. There is a button for each border: left, right, top and bottom. After pressing the button, the constraint is drawn with a blue line. The number that appears for that constraint is a margin in dp.
-
Change margins within the Attributes window
To set a margin for, e.g. the left margin, select it and enter a number (it is in dp). Furthermore, this is a margin from the start left side of the constraint. The margin comes handy when making the spacing between components or making a border for the screen.
-
Make a connection by dragging the anchor
Make a connection by dragging and dropping the anchor. For that, you need to click on the circle for an appropriate constraint and drag it to the element or border. Android Studio makes the connection for you.
-
Chain of constraints
To start a chain, you have to select more elements, then choose it from a context menu. Put 3 buttons in a somewhat random order on the screen and try it. You can see the result on the image below.
Once you have a chain, you can toggle the chain mode and get a different alignment for elements in the chain.
Learn how you can start creating apps with Flutter.
Learn more
Responsive design
You can check the ability of your design to adapt to screen size even before you run your app. The first option is to use a device from the drop-down and check if the design applies to that device.
The second option is to manually change the design with a mouse using the anchor at the bottom right side of the design. While you drag the anchor, you see templates for the size and device sizes so that you can move it to the size of the existing device.
Guidelines
If you need help with responsive design in the way of splitting the screen into two parts, a great way to do it is by using Guidelines. With a guideline, you can set constraints for each part of the screen separately.
Responsive design is a broad topic, and you can learn more on this link about responsive design, where you can learn about design, dimensions, keeping values in resources and much more.
Conclusion
You can design most parts of the User Interface in Android Studio Layout Editor, and this article gives an explanation on quite a few pieces of Layout Editor and how to use it. Research it even more and let us at CodeBrainer know if you would like to know more about a specific part of the Layout Editor.
