User Interfaces Using XML Layouts

The View class represents the basic building block for user interface components.
View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.).
All of the views in a window are arranged in a single tree.
To arrange the views in one window we use different types of Layouts like :

  1. Linear Layout: A LinearLayout is a GroupView that will lay child View elements vertically or horizontally.
  2. Relative Layout: A RelativeLayout is a ViewGroup that allows you to layout child elements in positions relative to the parent or siblings elements.
  3. Table Layout: A TableLayout is a ViewGroup that will lay child View elements into rows and columns.

A brief sample of UI components:

Time / Date picker: 

A DatePicker is a widget that allows the user to select a month, day and year. And a TimePicker is a widget that allows the user to select an hour, minute and second.

Form Controls:
Includes a variety of typical form widgets, like: image buttons, text fields, checkboxes and radio buttons.
you can use other views
like: GalleryView, TabWidget, Spinner, AutoCompleteTextView, ListView, WebView, MapView …
To see all UI components see the palette of the Graphical Layout in the XML Layout located under res/layout (i will say more about the xml layout after that) like that:
What is an XML Layout?
An XML-based layout is a specification of the various UIcomponents (widgets) and the relationships to each other – and to
their containers – all written in XML format.

Android considers XML-based layouts to be resources, and as such layout files are stored in the res/layout directory inside your Android project.
The attributes of the XML elements are properties, describing how a widget should look or how a container should behave.
Example:
If a Button element has an attribute value of
          android:textStyle = “bold”
that means that the text appearing on the face of the button should be rendered in a boldface font style.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s