Layouts in Android

Layout Managers (or simply layouts) are extensions of the ViewGroup class and are used to position child Views within your UI. Layouts can be nested, letting you create arbitrarily complex UIs using a combination of layouts.

The Android SDK includes a number of layout classes. You can use these, modify them, or create your own to construct the UI for your Views, Fragments, and Activities. It’s up to you to select and use the right combination of layouts to make your UI aesthetically pleasing, easy to use, and efficient to display

The following list includes some of the most commonly used layout classes available in the Android SDK:

FrameLayout — The simplest of the Layout Managers, the Frame Layout pins each child view within its frame. The default position is the top-left corner, though you can use the gravity attribute to alter its location. Adding multiple children stacks each new child on top of the one before, with each new View potentially obscuring the previous ones

LinearLayout — A Linear Layout aligns each child View in either a vertical or a horizontal line. A vertical layout has a column of Views, whereas a horizontal layout has a row of Views. The Linear Layout supports a weight attribute for each child View that can control the relative size of each child View within the available space

RelativeLayout — One of the most flexible of the native layouts, the Relative Layout lets you define the positions of each child View relative to the others and to the screen boundaries

RelativeLayout — One of the most flexible of the native layouts, the Relative Layout lets you define the positions of each child View relative to the others and to the screen boundaries

GridLayout — Introduced in Android 4.0 (API level 14), the Grid Layout uses a rectangular grid of infinitely thin lines to lay out Views in a series of rows and columns. The Grid Layout is incredibly flexible and can be used to greatly simplify layouts and reduce or eliminate the complex nesting often required to construct UIs using the layouts described above. It’s good practice to use the Layout Editor to construct your Grid Layouts rather than relying on tweaking the XML manually

Defining Layouts in Android

The following snippet shows a simple layout that places a TextView above an EditText control using a vertical LinearLayout.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
 android:orientation=”vertical”
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”>
 <TextView 
 android:layout_width=”match_parent”
 android:layout_height=”wrap_content”
 android:text=”Enter Text Below”
 />
 <EditText 
 android:layout_width=”match_parent”
 android:layout_height=”wrap_content”
 android:text=”Text Goes Here!”
 />
</LinearLayout>

Using Layouts to Create Device Independent User Interfaces in Android

A defining feature of the layout classes described previously, and the techniques described for using them within your apps, is their ability to scale and adapt to a wide range of screen sizes, resolutions, and orientations.

The variety of Android devices is a critical part of its success. For developers, this diversity introduces a challenge for designing UIs to ensure that they provide the best possible experience for users, regardless of which Android device they own.

Using a Linear Layout

The Linear Layout is one of the simplest layout classes. It allows you to create simple UIs (or UI elements) that align a sequence of child Views in either a vertical or a horizontal line.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout 
 xmlns:android=”http://schemas.android.com/apk/res/android”
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:orientation=”vertical”>
 <LinearLayout
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:orientation=”horizontal”
 android:padding=”5dp”>
 <Button
 android:text=”@string/cancel_button_text”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 <Button
 android:text=”@string/ok_button_text”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 </LinearLayout>
 <ListView
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”/>
</LinearLayout>

Using a Relative Layout

The Relative Layout provides a great deal of flexibility for your layouts, allowing you to define the position of each element within the layout in terms of its parent and the other Views.

<?xml version=”1.0” encoding=”utf-8”?>
<RelativeLayout 
 xmlns:android=”http://schemas.android.com/apk/res/android”
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”>
 <LinearLayout
 android:id=”@+id/button_bar”
 android:layout_alignParentBottom=”true”
android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:orientation=”horizontal”
 android:padding=”5dp”>
 <Button
 android:text=”@string/cancel_button_text”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 <Button
 android:text=”@string/ok_button_text”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 </LinearLayout>
 <ListView
 android:layout_above=”@id/button_bar”
 android:layout_alignParentLeft=”true”
 android:layout_width=”match_parent”
 android:layout_height=”match_parent”>
 </ListView>
</RelativeLayout>

Using a Grid Layout

The Grid Layout was introduced in Android 3.0 (API level 11) and provides the most flexibility of any of the Layout Managers

The Grid Layout is particularly useful for constructing layouts that require alignment in two directions — for example, a form whose rows and columns must be aligned but which also includes elements that don’t fi t neatly into a standard grid pattern.

<?xml version=”1.0” encoding=”utf-8”?>
<GridLayout 
 xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:orientation=”vertical”>
 <ListView
 android:background=”#FF444444”
 android:layout_gravity=”fill”>
 </ListView>
 <LinearLayout
 android:layout_gravity=”fill_horizontal”
 android:orientation=”horizontal”
 android:padding=”5dp”>
 <Button
 android:text=”Cancel”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 <Button
 android:text=”OK”
 android:layout_width=”fill_parent”
 android:layout_height=”wrap_content”
 android:layout_weight=”1”/>
 </LinearLayout>
</GridLayout>

Leave a Comment