Google+

Android4Beginners.com

Apps development for Android step by step

Lesson 2.3: How to put layout into layout to create advanced app interface (layout tree in Android)?

In the previous lessons we were using LinearLayout with TextViews inside. This time we would create more complicated structure: layout built of other layouts. LinearLayout could contain many LinearLayouts (or other types of layout), and they could contain more layouts and so on. But be careful – too complicated layout tree could negatively influence performance.

Step 1. Add some layouts to root layout

In our example we would use LinearLayout as root XML tag (main tag wrapping other tags). You could read more about that in the lesson 2.1.

Let’s put two LinearLayouts inside (below is only a structure draft, not a real code).

LinearLayout is just a container. If we don’t put any content inside, it would be empty so invisible. To see anything without a content we have to define a size of it and add some background.

As you probably remember default orientation of LinearLayout is horizontal, so elements are placed from left to right. To divide the screen between those two inner LinearLayouts we would use layout_weight attribute (read more about it here).

This is a sample code:

And here is the effect.

This is simple layout tree – root LinearLayout has two children LinearLayouts. Without content it looks simple. (Android Studio)

This is simple layout tree – root LinearLayout has two children LinearLayouts. Without content it looks simple. (Android Studio)

Just some comment: our inner layouts has 0dp width, but due to layout_weight they divide a free space between them. And they are as high as parent so root LinearLayout. IDs are not necessary, but it’s easier to find specific layout element in the code thanks to them.

By the way: we don’t have to set layout orientation if we want to stay with default (horizontal) setting. Nevertheless, Android Studio displays warning about that. It is “just” a warning, but if you want to avoid it always add android:orientation attribute (even with default value).

Step 2. Add some TextViews to inner layout tags

Now it’s time to add some content. In the following example (this is not a real code, just a structure draft) all five TextViews would be in one row (because of horizontal orientation of all layouts).

That we could achieve without using additional LinearLayout tags. But if we change orientation of LinearLayout 1 from horizontal to vertical the effect would be completely different. And finally let’s see what would happen if we also change orientation of LinearLayout 2.

Let’s see it on the print screen (to make it clear we added various background colors to TextView elements).

The same layout structure, but different orientation of inner LinearLayout elements – both horizontal, first vertical, both vertical (Android Studio)

The same layout structure, but different orientation of inner LinearLayout elements – both horizontal, first vertical, both vertical (Android Studio)

Step 3. Mixed TextViews and LinearLayouts on various layout levels

Let’s make our layout structure a bit more complicated. On the same level of the layout we could use various layout elements, for instance some TextViews and some LinearLayouts containing further TextViews and LinearLayouts.

So let’s add a TextView with title and one more LinearLayout. Mind that we’ve changed root and LinearLayout orientation to vertical. Again below is only a structure not a real code:

To make our layout a bit more clear we would add margins for TextViews (attribute layout_margin) and make them a bit bigger (layout_width, layout_height and layout_weight).

This is a result.

Mixing various layout elements we could arrange layout in different ways (Android Studio)

Mixing various layout elements we could arrange layout in different ways (Android Studio)

And this is a final layout code.

Summary: You could create very complex app’s layout using layout tree and mixing various layout elements. LinearLayout is not the best for very flexible elements positioning, but still it allows to easily build many sophisticated layouts.

Previous: