Android Studio Layout Editor for Beginners

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.

Android Studio Layout Editor Palette

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.

Android Studio Layout Editor Component tree

Toolbar

Provides buttons to configure your layout design in the editor and helps you change some layout attributes. 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.
Toolbar

 

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.

Attributes

 

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.

All attributes

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

 Atribute search

 

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.

Text design

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.

 

 

 

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.

 

Palette

 

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

Naming a component

 

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.

Changing text

 

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

Solid background

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.

 

  1. Click the button “Pick a Resource”
  2. Change to “Color” in the selection on the left
    Pick a Resource

  3. Add new resource
    Add new resource

  4. Select a red color of your choice
    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 


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

  • 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


    Constraints Constraints attributes
    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


    Constraint Marins Left margin
    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.
    Dragging the anchor

  • 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.
    Chain of constraints

    Once you have a chain, you can toggle the chain mode and get a different alignment for elements in the chain.
    Toggle the chain 1
    Toggle the chain 2 Toggle the chain 3

 

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.

Responsive design


Responsive 2

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.


Manually change the design

 

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.

 

GuidelinesGuidelines 2

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.