The Layout Editor

If there were only one reason to use Android Studio, it would be the Layout Editor and its associated tools and preview system. The differences are apparent as soon as you open a project. The difference between layout and blueprint view is also shown in the following figure:

The blueprint mode is new to Android Studio 2.0 and portrays a simplified, outlined view of our UI. This is particularly useful when it comes to editing the spacing and proportions of complex layouts without the distraction of content. By default, the IDE displays both design and blueprint views side by side, but the editor's own toolbar allows us to view only one, and in most cases one would select the mode most suitable to the task in hand.

It would be perfectly possible to generate every layout required for a project using these graphical views without any knowledge of the underlying code. This is not a very professional approach though, and a good understanding of the XML under the hood is essential for good testing and debugging and, if we know what we are doing, very often tweaking the code is faster than dragging and dropping objects.

The XML responsible for the previous layout is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/layout_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 
 
    <TextView 
        android:id="@+id/text_view_top" 
        android:layout_width="match_parent" 
        android:layout_height="0dp" 
        android:layout_weight="1" /> 
 
    <TextView 
        android:id="@+id/text_view_center" 
        android:layout_width="match_parent" 
        android:layout_height="0dp" 
        android:layout_weight="3" /> 
 
    <TextView 
        android:id="@+id/text_view_bottom" 
        android:layout_width="match_parent" 
        android:layout_height="0dp" 
        android:layout_weight="2" /> 
 
</LinearLayout> 

Hopefully, the terms used in the preceding code will be familiar to you. The use of layout_weight is frequently used with linear layouts to assign proportion, a great time saver when developing for screens with slightly different aspect ratios.

Until recently, the only choice we had for creating more complex UIs were the linear and relative layouts. Both of these are less than ideal, being either unnecessarily expensive or fiddly. Android Studio 2 introduced the constraint layout, which offers an elegant solution to these problems. To best appreciate its value, it makes sense here to first take a look at the older classes, which still have their place in many simpler designs.