Tutorials on Various Layout Used In Android Platform

There are two ways for creating a user interface (UI) in Android. One of them is declarative and another one is programmatic. They are very different but are often used as one for getting the job done.

Declarative User Interface

The declarative approaches will involves using XML for declaring what UI will look like and it is very similar to creating a web page with the use HTML. One can write tags and one need to specify elements for appearing right on the screen. If one can hand-coded an HTML page, one did to pretty much the same work like creating an Android screen. There is one advantage of the declarative approach by using what-you-see-is-what-you-get (WYSIWYG) tools. There is some of the tools ship right with Eclipse Android Development Tools (ADT) extension and there are others which come from third parties. XML is a readable platform for human and people who are not familiar with the Android platform as well as framework can determine the intent of the user interface.

There is one disadvantage of declarative UI approach one can get so far with XML. XML is surely great for declaring the look as well as feel of the user interface and it does not provide a way of handling user input. This is where the programmatic approach comes in.

Programmatic User Interface

A programmatic user interface certainly involves writing down Java code for developing UI. If one have ever done any Java AWT or Java Swing development, Android is surely the pretty much same in that respect. It is similar to various UI in other languages as well.

Basically one want to create a button, one will have to declare the button variable creating the instance of it adding it to the container and set any button properties making sense like color, text, text, size and background and many more. One can probably declare the button once it is clicked and another piece of code. All in all, one can end writing quite a few lines of Java. Everything one can do declaratively, one can also do programmatically. Java will also allow one to specify what happens when that button is clicked. This is the main advantage of programmatic approach to the user interface.

The Best Of Both Worlds

Which approach to use? The best practice is to surely use both. One would use a declarative (XML) approach for declaring everything about user interface which is static like the layout of the screen, all widgets and many more. One would then switch for programmatic approach for defining what the user will interact with various widgets etc. One would switch right to programmatic (Java) approach for defining what goes on when user interacts with various widgets in user interface. One can use XML for declaring the “button” looks like and Java for specifying what it does.

Views And Layouts

Android will organize the UI elements right into layouts and views. Everything one see, such as a button, label or text box is surely a view. Layouts will organize views such as grouping together a button as well as label or any group of the elements. Now if one has prior experience with Java AWT or Swing and layouts which are similar to Java containers and views then they are similar to Java components. Views in Android are in some cases referred to as widgets.

Just keep in mind, layout have other children. Those children are layouts themselves allowing for a complex user interface structure. A layout is responsible for allocating space for each particular child. Different layouts use various approaches to laying child widgets.

There are several main layouts which one use more frequently than others such as Linear Layout, Table Layout, Frame Layout, Relative layout and Absolute Layout.

Linear Layout

Linear Layout is one of the simplest and most commonly used layouts. It simply lays out its children right next to each other, either vertically or horizontally. The order and arrangement of the children matters. As Linear Layout asks its children how much space they actually need and it allocates the desired space for each child right in the order they are added. So if there is an “older” child comes along and asks for the space on the screen, there would not be much left for the subsequent widgets in the layout. Another important property for linear layout is layout orientation. Its valid options are horizontal and vertical.

Table Layout

Table Layout will lay out its children right across a table and will consist of only other Table Row widgets. Table Row will represent a row in a table and can contain UI widgets. Table Row widgets are kept next to each other horizontally very like Linear Layout with a horizontal orientation.

For those familiar with HTML, Table Layout is very similar to the <table> element and Table Row is very similar to <tr> element. Whereas in HTML we will also have <td> for representing each cell in the table, in Android the columns are determined dynamically based on the number of views one add to the table row. Another important property for Table Layout is stretch columns which will indicate the column of the table right to stretch. One can use *to stretch all columns.

Frame Layout

Frame Layout will place its children right on top of each other so that latest child is covering the previous like a deck of cards. This layout policy is very useful for tabs, for example. Frame layout is used as a placeholder for various other widgets adding programmatically at some other point in time

Relative Layout

Relative Layout will lay out the children relative to each other. As such, it is very powerful as it does not require nesting unnecessary layouts for achieving certain look. Using Relative Layout will minimize the total number of widgets which needs to be drawn improving the overall performance of the application. Relative Layout will require each of the child views to have an ID set so that one can position it relative to other children.

Absolute Layout

Absolute Layout usually positions the children at different coordinates on the screen. It is the favorite layout for WYSIWYG tools and though it is very simple, it is not flexible. The user interface will surely look good on a particular screen but as the screen size, orientation or density changes, Absolute Layout will not be able to adjust.

These tutorials will give you a detailed idea about different layouts used in Android platforms for your better understanding.

Also Read,


Ayan Sarkar

Ayan Sarkar is one of the youngest entrepreneurs of India. Possessing the talent of creative designing and development, Ayan is also interested in innovative technologies and believes in compiling them together to build unique digital solutions. He has worked as a consultant for various companies and has proved to be a value-added asset for each of them. With years of experience in web development, product managing and building domains for customers, he currently holds the position of the CTO in Webskitters Technology Solutions Pvt. Ltd.