DAY 14: Nested View Groups in Android

Hello guys! Welcome back after a small break. Due to my short trip (I will write about it in the next post) I haven’t created a single post since the last day of April. That’s unthinkable! 😛




Today I will start from what I learned three days ago. This will also be a great knowledge refresher for me. I have so far learned about three basic views in Android, View Groups, Relative Layout and Linear Layout. Today I am going one step deeper to talk about nested ViewGroups in Android, something that we meet in almost any app we use (I didn’t realize that before). Let’s start!

What Are Nested ViewGroups In Android?

Let’s use the simplest definition possible (I know it’s a bit boring to start from a definition but it’s a must in this case).

As the name suggests, nested ViewGroups are simply ViewGroups placed inside other ViewGroups to create more complex and functional layouts of an app.

Nested ViewGroups are an ideal way of building app layouts (taking into account my current state of knowledge they seem to be the best and only reliable solution) that will be fully functional, more interesting and will meet all of our needs.

In the case of LinearLayout or RelativeLayout, we are limited to either placing children according to the rules of LinearLayout or RelativeLayout, i.e. we cannot overlap views in LinearLayout. Thanks to nested ViewGroups, we aren’t limited by anything and can combine different types of layouts and views when building our app.

We can have practically countless combinations of ViewGroups placed within other ViewGroups. Both Relative and Linear Layouts can be the root view for the app and can contain other RelativeLayouts or LinearLayouts as their children. It’s totally up to us what kind of a “family” of ViewGroups we create within our app and how many “generations” it will have (i.e. how many other view groups we will nest inside other ViewGroups).

Of course, we shouldn’t go overboard because our app will become too complicated to correctly display on all Android devices.

Examples Of Nested ViewGroups In Android

Let’s now analyze a few examples of nested ViewGroups in Android: an imaginary app (and its genealogical tree), real-life examples and the code

Nested ViewGroups In An Imaginary App (My Drawing)

Below is my imaginary app I have just drawn (partially in Paint and Pixlr). Drawing it really let me better understand the whole concept of nested View Groups!

In this app the root view is the vertical LinearLayout which has one ViewGroup (child) nested inside of it and two other children (let’s say they are TextViews). In the nested ViewGroup there are two other View Groups nested: RelativeLayout (with and ImageView and TextView in it) and LinearLayout (with three other vertically-placed views inside of it) without the background image.

Nested View Groups in Android

Genealogical Tree Of My Imaginary App

This is how the above app would look if we translated it into a genealogical tree. Funny, isn’t it? 🙂 Nevertheless, it is a great practice to draw such a tree when we are still in the planning stage of our app and haven’t started coding yet.

Nested View Groups in Android: Tree

Real-life examples of nested ViewGroups

After quickly browsing the apps installed on my Android phone, I realized that almost all of them must make use of nested ViewGroups.

Let’s analyze as example one of the homes screens of my new phone and a small drawing I created for it. We could also build a similar genealogical tree for this layout!

Nested View Groups in Android

Nested ViewGroups In Code

That’s enough for drawing. Let’s now get into the real thing, that is, coding! The way we nest ViewGroups into other ViewGroups is actually very simple. This is how you do it:

  1. The first thing to do is define the root view for the app. At this point I would use either LinearLayout or Relative Layout.
  2. Within the root view, we add children which can be  specific views (e.g. ImageView or TextView).
  3. We can also nest other ViewGroups within our root view and to do it we simply start and end (once again) either LinearLayout or RelativeLayout and place their children within them.

This is how the code for layouts of my imaginary app would look like (it’s, of course, abbreviated):

<LinearLayout...>
    <LinearLayout...>
        <RelativeLayout...>
            <ImageView.../>
            <TextView.../>
        </RelativeLayout>
        <LinearLayout>
            <TextView.../>
            <TextView.../>
            <TextView.../>
        </LinearLayout>
    </LinearLayout>
    <TextView.../>
    <TextView.../>
</LinearLayout>

And here is the code for the app I am currently building with the Udacity course.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.android.justjava.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="Quantity"
        android:textAllCaps="true" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="increment"
            android:text="+" />

        <TextView
            android:id="@+id/quantity_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:text="0"
            android:textColor="#000000"
            android:textSize="16sp" />

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:onClick="decrement"
            android:text="-" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Price"
        android:textAllCaps="true"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/price_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="0$"
        android:textColor="#000000"
        android:textSize="16sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:onClick="submitOrder"
        android:text="order" />
</LinearLayout>

Aas you can see this app has five children views in the root view and one of these children is a GroupView (LinearLayout made of three views). And this is how the app looks on the device.

nested-view-groups-example

Summary Of Day 14

Day 14 of my Android development journey has come to an end  (since it’s a public holiday here in Poland I finished a bit earlier than at midnight).

What I want to say: I deserve a beer now! ?
Level of motivation: Extremely high
Level of fatigue: Low
Level of experience: 0.0045%
What I have learned: I have already created a few simple apps. It feels great!

Share Your Thoughts

Are you an Android developer? Did you notice any errors in this post? Do you have any questions or comments?

I am only beginning my journey of becoming an Android developer and I would really like to hear from you (and learn form you). Feel free to either contact me directly or leave me your comments in the comment box below.

Add Comment