Thursday, November 29, 2012

Android beginner tutorial: Part 5 - Layouts in Android

Today we'll start learning how to design Android application layouts.

As I said in earlier tutorials, a layout is an xml file that descibes how an Action looks like. It is similar to MXML files in Adobe AIR projects.

The default layout for the main Activity in our Android project is located in the res>layout folder and is called whatever you specified the activity name to be. In my case its activity_main.xml.

When designing Android applications, it is important to remember that it's not a website or a desktop application - there are many different device screen sizes and your application should look well on all of them, which means our design has to be flexible. The buttons and other UI elements also have to be pretty big, so that the user is comfortable with using them.

In Android applications, visual elements are created using just 2 classes - View and ViewGroup. View is an object that is displayed and can have some sort of functionality, whereas ViewGroup is a container that can contain multiple Views and/or other ViewGroups.

Of course, there are a lot of UI components of different sorts - buttons, sliders, images, etc., but they all are subclasses of the View class.

There are two ways to create layouts. One is using the xml file I mentioned earlier. The other one is to generate them programmatically in Java class. Once again, this is similar to how AS3 and MXML work in Flex/AIR.

Today we'll look into the xml layout files. When possible, it is always better to keep layout and program code in different files.

It is possible to edit layout xml files in two ways - using the WYSIWYG (What You See Is What You Get) visual editor, or by manually editing the xml file. Both are useful, since the visual editor is an easy and quick way to see how your application looks. However, I prefer writing the xml code myself.

Open the activity_main.xml (or whatever your layout is called) file now and switch to the xml viewing mode by clicking a tab underneath the work area labeled "activity_main.xml", next to the currently selected Graphical Layout tab.

You'll see that it has 1 root tag node RelativeLayout with a bunch of attributes, and contains a child node TextView. There can be only 1 root node in a layout file, and in this case its RelativeLayout.

There are 4 layout containers in Android - FrameLayout, LinearLayout, TableLayout and RelativeLayout.

The first and most simple layout type is FrameLayout. It is similar to a Group container in Flex - it's just a container that doesn't position its children in any special way. All children are spawned with 0,0 coordinates one on top of another. This is the most rarely used layout type since it isn't flexible.

The LinearLayout container can have 2 orientations - horizontal or vertical. Its children will be positioned in order in the specified orientation. This is similar to VGroup and HGroup containers in Flex.

The next layout, TableLayout, is basically a grid, which displays children in rows and columns. It works similarly to table tags in HTML.

And the final layout, RelativeLayout, is the container that is all about flexibility - all the children are positioned relatively to its parent. This means that if this is the root node of an Activity, the layout will look different on devices with different screen sizes.

In this lesson I've covered the basics of layouts in Android application, and next time we will delve deeper into specific types of layouts and try to code something on our own.

Thanks for reading!

No comments:

Post a Comment