Android - Layout File (XML)

Card Puncher Data Processing

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.

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,

Android Xml Layout Attribute Reference

Example

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:

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>

Location

Default

All XML layout file are saved in the following directory:

res/layout/

Multiple Screens support

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)

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

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>

Built-in

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

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).

Attribute Namespace

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" />

Android

The android namespace are attribute defined by the android system.

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.





Discover More
Card Puncher Data Processing
Android - (App) Resources (R)

The /res subdirectories contain the resources for your application: drawable-/: Directories for drawable resources, other than launcher icons, designed for various densities. layout: Directory...
Card Puncher Data Processing
Android - Context

android/content/Context: Interface to global information an application environment. An activity is a subclass of context and is therefore a context. displaying different kind of data of switching...
Card Puncher Data Processing
Android - Custom View

Custom view To get access to the AccessibilityManager instance, use this code: topics/graphics/2d-graphicsCanvas and Drawables guide custom-views/custom-drawingCustom Drawing guide. ...
Card Puncher Data Processing
Android - Data Binding (ViewDataBinding)

Data Binding want you to minimize the glue code necessary to bind your application logic and layouts. By default, a Binding class will be generated based on the name of the layout file, converting it...
Android Ui Hierarchy
Android - GUI (Layout)

The graphical user interface for an Android app is built using a hierarchy of UI elements where: ViewGroup (Layout) objects are invisible container element (and therefore one is at the top). Layouts...
Card Puncher Data Processing
Android - Inflate (a layout XML to a view UI object)

In Android, you can create an UI: decoratively through a layout XML with Java object view (viewgroup for container and views for widget) In this context, Inflate means reading a layout XML (often...
Card Puncher Data Processing
Android - ListView

ListView is a view group that shows items in a vertically scrolling list. The items come from the android/widget/ListAdapterListAdapter associated with this view. The list items are automatically inserted...



Share this page:
Follow us:
Task Runner