Android Studio Layout Editor for Beginners

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.

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 explain a little bit about Layout Editor.

Parts of Layout Editor

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

    Palette

  2. Component Tree
    Shows the view hierarchy for your layout. Click an item here to see it selected in the editor. Component tree is important when you have some nested components.

    Component tree

  3. Toolbar
    Provides buttons to configure your layout design in the editor and to change some layout attributes. Here you can change the size of the display to check if constraints work as expected. You can also find alignments and connection tools here.

    Toolbar

  4. Design Editor
    Design Editor displays your layout in a combination of the Design and Blueprint views. This is the main part of Layout Editor, and here you see what you have done visually.

    • Attributes
      Attributes window is a list of properties you can set for your component. Common properties are Text, Hint, ID, Background. All the aspects of components can be set with attributes found here.
      Attributes
    • Toggle 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 most recently used attributes. The second one shows all the other attributes in alphabetical order.
    • Text editor
      In Text Editor, you can define the visual aspects of components with XML code. When using text editor for your XML, you can also see a preview of that screen in real-time as you write the code.
      Text design

Common actions you can do in the Layout Editor

Let us describe a few common actions you can do in the Layout Editor.

  1. 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 where the component is positioned on the screen. With drag & drop, you can also control constraints if you have 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.

  2. Naming a component
    Since you link elements from Layout to Activity in most cases, naming them for reference makes sense. ID is a field in Attributes used for naming your elements. Your name then appears in code under R.id.”name”.
    Naming a component

  3. Changing text
    Many components have text as part of their visual presentation. You can change this text in field “text”. For example, TextView displays text as an integral part. You can style it later. Button has text inside, to explain what it does.
    Changing text

  4. 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 texts in red, but you later decide to change it to blue. You need to change only this value, and the whole app has a blue colour for the texts. Here is an example of red colour.

    • Click button “Pick a Resource”
    • Change to “Color” in the selection on the left
      Pick a Resource
    • Add new resource
      Add new resource
    • Select a red color of your choice
      Select a red color of your choice

  5. Constraints
    Constraints are great for making your layout work on different display sizes. With constraints, you are describing a 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.

    Naming is important for linking of objects to work. Without names, 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, 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, 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). This is a margin from the start left side of the constraint. The margin comes in 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



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

  7. 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). 
    Searching for attributes Searching for attributes 2

    You can do a lot of work here in Layout Editor, and now you have quite a few pieces of information on how to do it. Research it even more and let us know if you would like to know more about a specific part of the Layout Editor.