Making a layout

Open app/res/layout/activity_main.xml. You’ll see the layout designer, with a “Hello World!” text at the center of a device screen. The text is an example of a so-called view. Technically, a view is just a class that extends View and draws something on the screen. A view whose purpose is to display other views is called a view group.

The classic way of creating Android layouts is to use various ViewGroup classes, such as LinearLayout, FrameLayout and so on. Each of these perform some simple task, such as stacking views after each other horizontally or vertically. To create your layout, you just combine these in creative ways.

A newer, fancier technique is the constraint-based layout. Here, you put everything you wish to display into a special ConstraintLayout view group, and then apply constraints telling the system how the views are supposed to be placed relative to each other. Think about them as springs holding the views in place. It’s easier to understand if you just try it out:

  1. Click the “Hello World!” text. Notice how the four “springs” that show up, these are the view’s constraints. As you see, the constraints hold the view in the center of the screen.
  2. Let’s make the text bigger! On the right-hand side of Studio (the “Attributes” panel), find the textAppearance attribute, and select AppCompat.Display1 from the dropdown menu. You can also enter your own text size manually in the textSize attribute if you prefer.
  3. Find a Button in the left-hand overview of available views, and drag it onto the layout somewhere below the text.
  4. Create constraints: grab the handle at the top of the button and connect the spring to the bottom of the text.
  5. Connect the other sides to the edges of the screen. The button will end up centered horizontally, in the middle between the hello text and navigation bar(=the thing with back/home/recents buttons).
  6. Replace the text of the button to “Change deadline” by typing the new text into the text attribute in the attributes panel. (Yes, there are two attributes named text. Use the one without the wrench icon on it.)

Now, run the app again to see your brand new layout in action!

Protip: whenever the lightning bolt next to the play button is yellow, click the lightning bolt to see your changes “instantly”.

Next: Interactivity (Java) or Interactivity (Kotlin)