Android: How to bulid a complex nested Layout without Stackoverflows and a good performance

Question

I am building a quite complex layout which represents the following structure:

Desired Layout

It has the following Layout XML:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button01"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="L" />

        <Button
            android:id="@+id/button2"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M" />

        <Button
            android:id="@+id/Button03"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="R" />
    </LinearLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="--------------------" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="100"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button05"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="L" />

        <Button
            android:id="@+id/Button02"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M" />

        <Button
            android:id="@+id/Button04"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="R" />
    </LinearLayout>
</LinearLayout>

Now i need to nest this piece several times like this:

Nested Layout

The Structure was even more complex in the past and caused a Stack Overflow on the 3rd nested Level due to the Call Stack Size of 8/16 KB. The Current Layout can handle 12 nested Levels without Overflow but the Measuring Times are extremely high (ANR also) because i am using nested weights:

Measuring Time in msec: from Parent to Child

• 2000 1950 970 1200 500 500 240 245 135 120 70 70 35 45 21 15 8 8 4 3 1 1 0.3 0.01

  • Is there a way to flatten the Hierarchy even more?
  • Is there a way to get rid of nested weights?
  • Measure in a seperate thread and Display a waiting circle in the mean time -> how?
  • Call parent.addView from a seperate thread and do the whole work in a thread to prevent Stack Overflows.. which will appear somewhere beyond the 12 nested Levels. How to implement this? it was already mentioned here: Android: Increase call stack size

Answer 1

You can replace the top level LinearLayout with a RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/topRow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Button01"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="L" />

        <Button
            android:id="@+id/button2"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M" />

        <Button
            android:id="@+id/Button03"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="R" />
    </LinearLayout>

    <Button
        android:id="@+id/button1"
        android:layout_below="@+id/topRow"
        android:layout_alignLeft="@+id/topRow"
        android:layout_alignRight="@+id/topRow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="--------------------" />

    <LinearLayout
        android:id="@+id/bottomRow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/Button05"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="L" />

        <Button
            android:id="@+id/Button02"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M" />

        <Button
            android:id="@+id/Button04"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="0.1"
            android:text="R" />
    </LinearLayout>
</RelativeLayout>

Answer 2

In android, The flatter your layouts, the smoother and faster your application, and by "flatter" I mean using nested layout as least as possible. for the second photo that you posted (Nested Layout) I'd recommend using html/css , because implementing such a layout will definitely pose a HUGE strain on performance, even if it runs successfully. If you want to implement a game, try other workarounds for such heavy layouts.