Lesson Weekend

As we'll see firsthand when we create our first layout in the next lesson, Android layouts are written in eXtensible Markup Language, also known as XML. Much like HTML (or HyperText Markup Language), XML is also a markup language. It was created as a standard way to encode data in internet-based applications. However, unlike HTML, XML is case-sensitive, requires each tag is closed properly, and preserves whitespace.

Much like creating an HTML layout and later altering it with jQuery, as we've done in previous courses, we can create XML layouts in Android, and later alter them using Java logic.

Android XML layouts are also part of a larger umbrella of Android files and components called resources. Resources are the additional files and static content an application needs, such as animations, color schemes, layouts, menu layouts.

Anatomy of Android XML Layouts

Each layout file must contain one (and only one!) root element. Linear Layouts, Relative Layouts, and Frame Layouts (see Root Views section below) may all be root elements. Other layouts may not be. All other XML elements will reside within this root object.

A View is simply an object from Android's built-in View class. It represents a rectangular area of the screen, and is responsible for displaying information or content, and event handling. Text, images, and buttons are all Views in Android.

A ViewGroup is a subclass of View, and is essentially an 'invisible container' that holds multiple Views or ViewGroups together, and defines their layout properties.

Root Views

The following three layout types may be the root element in an Android XML Layout:

  • A Linear Layout aligns its contents into a single direction, whether vertical or horizontal.

  • A Relative Layout displays its child content in positions relative to the parent. (ie: lining an element up to the top edge of a parent, centering it within a parent, etc.)

  • A Frame Layout is a placeholder on a screen that can display only a single view. (For this reason, Frame Layouts should be used sparingly; usually as a placeholder for Fragments, which we will cover later.)

Common ViewGroups

Other commonly used ViewGroups are as follows. These may not be the root element of a layout, but they may reside within the root element:

  • A List View displays a list of scrollable items.

  • A Grid View displays items in a two-dimensional, scrollable grid.

  • A Table Layout groups views into rows and columns.

Layout Attributes

Every type of layout has attributes that define the way its elements appear. There are both common attributes that all layouts share, and attributes specific to some of the layout types listed above. The following are attributes that apply to all layouts:

  • android:id: A unique ID that corresponds to the view.
  • android:layout_width: The width of the layout. (required for every view)
  • android:layout_height: The height of the layout. (required for every view)
  • android:layout_marginTop: Extra space on the top of the layout.
  • android:layout_marginBottom: Extra space on the bottom of the layout.
  • android:layout_marginLeft: Extra space to the left of the layout.
  • android:layout_marginRight: Extra space to the right of the layout.
  • android:layout_weight: Specifies how much of the extra space in the layout should be allocated to the view.
  • android:paddingLeft: Padding to the left of the view.
  • android:paddingRight: Padding to the right of the view.
  • android:paddingTop: Padding at the top of the view.
  • android:paddingBottom: Padding at the bottom of the view.

Relative Sizing

Height and width properties can be set to specific measurements, but the following are much more common:

  • android:layout_width=wrap_content: Sets the width of the view to whatever size is required by its contents. This may also be used with height.
  • android:layout_width=match_parent: Sets the width of the view to the width of its parent. This may also be used with height.

Setting Properties and IDs

Much like in HTML, we can also add id attributes to XML elements. You'll often need to do this in order to later locate and interact with a specific view. However, the syntax for assigning an ID differs from that in HTML.

Assigning an id attribute looks something like this:

android:id="@+id/search_button"

Here, the @+id/ portion indicates that the name following is a string containing this element's ID, and that it is a new resource that should be created and added to our resources.

For instance, the following XML will create a Button with the id search_button:

<Button android:id="@+id/search_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>

Targeting Views by ID

Similar to the way we used jQuery to target individual HTML elements and alter them in some fashion, we can also target individual XML elements and interact with them. The following code can be used to target the example XML button from above:

Button myButton = (Button) findViewById(R.id.search_button);

The findViewById() method can locate both Views and root views. Don't worry too much about this specific syntax quite yet; we'll explore this more in future lessons. Just notice that we're re-using the same id attribute we assigned in the XML to later locate this element in our Java logic.

In the next lesson, we'll walk through creating an Android XML layout from scratch in our MyRestaurants application.

Note on Constraint Layouts

Newer versions of Android Studio may create default layouts called ConstraintLayouts instead of LinearLayouts or RelativeLayouts. ConstraintLayouts are a newer layout format that is more powerful, but also more complex for beginners to work with.

In the next lesson we'll walk through how to turn a default ConstraintLayout back into a Linear or Relative layout, so you may gain practice with these standard layouts in your own application. Then later this week, when we become more and more comfortable with layouts in general, we'll learn how to create and use Constraint layouts too!

Keep in mind that just because a newer option, feature, or version of a tool or technology exists, doesn't mean all companies and products immediately migrate to the newer option! Especially if older versions or features are still successfully serving their needs. This goes both for Android layouts, and any other web development technology. You'll undoubtedly still see these standard layouts out in the field. So, to best prepare for your internship and eventual employment, it's important to learn both the original and new layout options.

Terminology


  • eXtensible Markup Language, or XML: A markup language created as a standard way to encode data in internet-based applications. Android applications use XML to create layout files. Unlike HTML, XML is case-sensitive, requires each tag be closed, and preserves whitespace.

  • View: An object from Android's built-in View class. It represents a rectangular area of the screen.

  • Resources: The additional files and static content an application needs, such as animations, color schemes, layouts, menu layouts.

View Groups


  • Linear Layout: Aligns its contents into a single direction, whether vertical or horizontal.

  • Relative Layout: Displays its child content in positions relative to the parent. (ie: lining an element up to the top edge of a parent, centering it within a parent, etc.)

  • List View: displays a list of scrollable items.

  • Grid View: displays items in a two-dimensional, scrollable grid.

  • Table Layout groups views into rows and columns.

  • Absolute Layout specifies the exact location of all children elements within it.

  • Frame Layout is a placeholder on a screen that can display a single view.

Layout Attributes


  • android:id: A unique ID that corresponds to the view.
  • android:layout_width: The width of the layout.
  • android:layout_height: The height of the layout.
  • android:layout_marginTop: Extra space on the top of the layout.
  • android:layout_marginBottom: Extra space on the bottom of the layout.
  • android:layout_marginLeft: Extra space to the left of the layout.
  • android:layout_marginRight: Extra space to the right of the layout.
  • android:layout_weight: Specifies how much of the extra space in the layout should be allocated to the view.
  • android:paddingLeft: Padding to the left of the view.
  • android:paddingRight: Padding to the right of the view.
  • android:paddingTop: Padding at the top of the view.
  • android:paddingBottom: Padding at the bottom of the view.