Introduction to Layouts

Learn the importance of different layouts in Android and understand how to use them.

We'll cover the following

Introduction

Layouts in Android are used to define the way we want a screen to be shown. Layouts can be built by using a combination of View and ViewGroup. A View—like a Button or an EditText–is an entity that the user can directly interact with. A ViewGroup, on the other hand, is an invisible container that defines the alignment of View entities and other ViewGroup containers to define the way we want to show our screen. The Android framework allows us to either declare the UI elements in the form of an XML file or instantiate them at runtime. Speaking in terms of performance, both ways are equally efficient, but the former is usually preferred because it allows us to separate the code for a presentation from what controls the behavior.

How to define a layout

Layouts are defined in the form of XML files. For the framework to recognize this layout and render it as View, we need to define these files in our project’s res/layout directory. Below is an example of a layout that displays a sample screen with an image and text below it. We’ll save this layout with the name example_layout.xml.

Press + to interact
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <androidx.appcompat.widget.AppCompatImageView
        android:src="@mipmap/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tv_counter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="I am a dummy text"/>
</LinearLayout>

Layout files are saved with the .xml extension.

How to use a layout

Once we have defined the layout in the corresponding XML file, we need to pass the reference to this to the appropriate method for it to get the object of the View objects that’s rendered by the layout. Rendering a View comes with the responsibility of handling the lifecycle associated with that. The lifecycle can be thought of as a representation of the current display state of the UI. The Activity and Fragment components are the most common and the most capable of managing lifecycles on their own and of rendering a View. In order to make our lives easier, most of these lifecycle-aware components come with predefined callback methods that can be used to define the current screen’s behavior. Now that we know that we can use an Activity or a Fragment to render a View onto the current screen, we can load the layout we defined in the previous section and render the appropriate View for our user in an Activity.

Press + to interact
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.example_layout)
}
  • The name of the layout file should be the same as the name of the file name where the layout file has been saved.
  • It’s important to inflate the layout in the appropriate lifecycle method of the Fragment or the Activity.

Attributes of layouts in Android

Attributes are used to define the appearance of our elements in the layout. We can use the attributes to define the appearance of a single View element and its position and alignment with other elements in the layout. Below are some of the most common attributes:

  • android:id: An ID associated with a View that uniquely identifies it within its layout tree.

  • android:layout_width: This defines the width of the View. Its value can either be wrap_content, match_parent, or a static value in density pixels.

  • android:layout_height: This defines the height of the View. Similar to layout_width, its value can either be wrap_content, match_parent, or a static value in density pixels.

  • android:layout_margin: This defines the amount of surrounding space desired around the View.

  • android:layout_padding: This defines the inner padding space within the View.

Other than these, several other attributes can be used to define our user interface. We’ll learn about them gradually throughout this course.

Types of layouts in Android

The Android framework provides us with various kinds of layouts to help us implement the user interface based on our design requirements. Some of the most commonly used layouts are below.

  • LinearLayout: This is the layout that renders its elements one by one either vertically or horizontally based on the orientation specified by the orientation attribute.

  • RelativeLayout: This is used when we want to specify the position of the elements with respect to one another or to the parent container.

  • FrameLayout: This is usually used when we want to render a single View

  • ListView: This is used to render a list of elements.

  • WebView: This is used when we want to display web pages inside our application.

Conclusion

In this lesson, we briefly touched upon a few of the most commonly used layouts in Android. There are several other layouts provided by the framework, which we can use based on the kind of UI we want to render. We can also create custom View entities and ViewGroup containers by extending the base classes.