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:

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

You can replace the top level LinearLayout with a RelativeLayout. Use properties like `layout_below` and `layout_alignLeft` to line up the buttons properly. — ashishduh, May 05 '14 at 17:20
I tried RelativeLayout instead of the two LinearLayouts before. It caused a circular dependency. How should it look like then? — Harinus, May 05 '14 at 17:43
Added answer to post whole layout. I didn't test if this would produce the exact results you want but it should. — ashishduh, May 05 '14 at 18:26

score 0 · Accepted Answer · answered May 05 '14 at 18:26

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>

Unfortunately doesn`t produce what i need: If you increase the lenght of the upper "M" the lower "L" & "R" should fill the generated Space. But RelativeLayout ignores Weight which i used in LinearLayout. Furthermore: The Hierarchy is still 3 levels deep: `Relative>Linear>Buttons` vs `Linear>Linear>Buttons` so no improvement on the acutal problem. — Harinus, May 05 '14 at 18:43
You just need to use more RelativeLayout params like maybe adding `android:layout_alignLeft="@+id/topRow"` and `android:layout_alignRight="@+id/topRow"` to the bottom LinearLayout. That will make all 3 rows always stay same width. There's really nothing you can do with LinearLayout that you can't do with RelativeLayout. — ashishduh, May 05 '14 at 18:50
`Relative>Buttons` without the Linear Rows would be an improvement, but that ended up in a complete mess for me: "M"s should wrap content depending on lenght of text, the divider should stretch horizontally, fixed height. "L"s & "R"s fill remaining space horizontally and vertically. The Relative itself, wrap content. Maybe you can implement this? — Harinus, May 05 '14 at 19:02
I am using a slightly modified version of your Solution now. I could not get rid of the top & button as centering multiple Views horizontal ends in a mess. But Layout Weight is no longer needed so the Measuring times got significant better `450msec @ layer 18`, `60 msec @ layer 8`. Hard Limiting to 10 Nested Views (20Layer) will prevent any Stack Overflows. — Harinus, May 07 '14 at 18:34

score 0 · Answer 2 · answered May 07 '14 at 06:20

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.

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

2 Answers2