Android - Layout File (XML)

> Android

1 - About

A layout XML is a declarative way of creating an UI.

To define the GUI in android, you can do it:

The XML vocabulary maps to the subclasses of ViewGroup (UI container) and View (widgets) .

The advantage to declaring your UI in XML is that:

  • it enables you to better separate the presentation of your application from the code that controls its behavior.
  • it makes it easier to visualize the structure of the UI

Layout XML files are resources.

Advertising

3 - Syntax

Each layout file must contain:

  • exactly one root element, which must be a View or ViewGroup object
  • zero or more additional layout objects or widgets as child elements

The XML attribute reference can be found in the API References

For example, for an imageView,

4 - Example

4.1 - Linear

<?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" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

where:

Advertising

4.2 - Data-binding layout

Data-binding layout files are slightly different and start with a root tag of layout followed by a data element and a view root element.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
 
    <data>
        <!-- The variable within data describes a property that may be used within this layout. -->
        <variable name="ClassName" type="com.example.ClassName" />
        <variable name="user" type="com.example.User"/>            
    </data>
     <LinearLayout
		 <FloatingActionButton
			android:id="@+id/fab"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:clickable="true"
			android:onClick="@{ClassName::onCreateFabClick}" 
			android:tint="@android:color/white"
			app:fabSize="mini"
			app:srcCompat="@drawable/ic_create_black_24dp" />
                <!-- Expressions within the layout are written in the attribute properties using the "@{}" syntax -->
		<TextView android:layout_width="wrap_content"
			android:layout_height="wrap_content"
                        android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"
			android:text="@{user.lastName}"/>
    </LinearLayout>
</layout>

5 - Location

5.1 - Default

All XML layout file are saved in the following directory:

res/layout/

5.2 - Multiple Screens support

5.2.1 - Directories

In the case of Multiple Screens support (see Configuration example), the main activity layout must be saved in the following directories:

  • Handsets and tablets
res/layout/main_activity.xml           # For handsets, phone
res/layout-land/main_activity.xml      # For phone on landscape orientation
res/layout-sw600dp/main_activity.xml   # For tablets (sw means smallest width)
  • Handset and two tablets:
res/layout/main_activity.xml           # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger)
res/layout-sw720dp/main_activity.xml   # For 10” tablets (720dp wide and bigger)
Advertising

5.2.2 - Layout file decision

The layout are chosen in a cascade way. For instance, with this directory structure:

res/layout
     main.xml
     detail.xml
     item.xml
res/layout-sw600dp
    detail.xml
    item.xml
res/layout-sw720dp
   item.xml

The following layout file will be chosen:

Application is running on Height Width Smallest Width (sw) main.xml Directory detail.xml directory item.xml directory
Nexus 5 640 dp 360 dp 360 dp res/layout res/detail.xml res/item.xml
Nexus 7 960 dp 600 dp 600 dp res/layout res/layout-sw600dp/detail.xml res/layout-sw600dp/item.xml
Nexus 10 800 dp 1280 dp 800 dp res/layout res/layout-sw600dp/detail.xml res/layout-sw720dp/item.xml

5.2.3 - Alias

The smallest-width qualifier is available only on Android 3.2 and above. Therefore, you should also still use the abstract size bins (small, normal, large and xlarge) to be compatible with earlier versions. See Layout Aliases

You can use refs.xml for your alias because it’a a more descriptive name thant layout.xml

Example from refs.xml

<resources>
    <!--
    For more on layout aliases, see:
    http://developer.android.com/training/multiscreen/screensizes.html#TaskUseAliasFilters
    -->
    <!-- Replace fragment detail view with layout that takes advantage of more available width.-->
    <item type="layout" name="fragment_detail">@layout/fragment_detail_wide</item>
</resources>

6 - Built-in

Android has standard layout. They all begins with android.R.layout. See android/R.layout

7 - Load the XML Layout

To use the layout XML, you inflate it from an activity. See Android - Inflate (a layout XML to a view UI object).

8 - Attribute Namespace

8.1 - App

App Attributes are custom attributes defined in your app, whether by your code or by libraries you import.

It's a single global namespace for custom attributes - i.e., attributes not defined by the android system.

App attributes that don't exist are silently ignored.

For example:

  • android:showAsAction was only added in API11 and will work only on all API above or equal to this level.
  • app:showAsAction will work on all API levels

For instance, the appcompat-v7 library uses this app custom attributes mirroring the android: namespace ones to support all prior versions of android.

<FloatingActionButton
   app:srcCompat="@drawable/ic_add_black_24dp" />

8.2 - Android

The android namespace are attribute defined by the android system.

8.3 - Tools

the tools namespace that enable design-time features (such as which layout to show in a fragment) or compile-time behaviors (such as which shrinking mode to apply to your XML resources).

See Tools Attributes Reference

  • tools:context declares which activity this layout is associated with by default.