How to optimize the recursively embedded layout?

Question

I am building a recursive hierarchical layout. Here is my message_with_replies.xml (I've removed the alignment attributes and some items to make the idea clear):

<?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" >
    <Button
        android:id="@+id/toggleReplies"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_expand_replies" />
    <LinearLayout
        android:id="@+id/replies"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
    </LinearLayout>
</RelativeLayout>

In Java code, I inflate the items with this layout and embed them into the replies layout of the parent, and then repeat this with the children, so they form a tree:

root item
- child 0 of root
- - child 0 of child 0 of root
- - child 1 of child 0 of root
- - - child 0 of child 1 of child 0 of root
- child 1 of root
- child 2 of root
- child 3 of root
- - child 0 of child 3 of root

Everything looks and performs fine when I'm on the top level or about 2-3 levels from the top, but as I go deeper, the layout responds slower and slower. The slowdown is non-linear, and on the depth of about 7 or 8 the UI completely stucks (the emulator raises an exception after thinking for about half a minute).

Obviously, the problem is embedded layouts. I embed a linear layout into the relative one, so each new level of my hierarchy means two additional embeddings in terms of UI layouts.

How to optimize this?

I could try to get rid of the linear layout, but I expect that will not solve the problem but will only postpone it to some deeper level because I will still have the embedding.

Is it generally possible to keep the hierarchy flat when I inflate a sub-item with ahother layout? Can I inflate the item and then take its contents without their container?

Added: I've bypassed the problem. Now I build my tree using margins, so the layouts are not embedded, and the UI doesn't stuck. Everything looks and works fine.

However the original question is not yet answered.

The flat view hierarchy that you've come up with *is* actually a valid answer to the original question. Your original question can be paraphrased as "I'm doing this very expensive operation, how can I optimize it?" Sometimes the correct answer to that is "Do less work." Having too many layers of layouts is always expensive in Android. — kabuko, Sep 18 '12 at 19:03

score 4 · Accepted Answer · answered Sep 18 '12 at 18:58

Everything looks and performs fine when I'm on the top level or about 2-3 levels from the top, but as I go deeper, the layout responds slower and slower. The slowdown is non-linear, and on the depth of about 7 or 8 the UI completely stucks (the emulator raises an exception after thinking for about half a minute).

As you already seen the problem is the dept of your layout file. Each time you inflate the message_with_replies.xml and add it to the LinearLayout you increase the dept of your layout by 2(which will reduce the performance). So, by the time you get to the 7-8 level you would have already exceeded the recommended maximum layout dept(10, if I'm not mistaken) by quite a lot.

How to optimize this?

If you want to continue to inflate the layout in an old view then there isn't much to do. Otherwise you would add the views to a master layout without the extra ViewGroups between.

Is it generally possible to keep the hierarchy flat when I inflate a sub-item with ahother layout? Can I inflate the item and then take its contents without their container?

You'll keep the hierarchy flat if you only add Views to the layout. As long as you add ViewGroups to ViewGroups(like you do in your code) you'll increase the hierarchy's dept. An option to avoid adding unnecessary ViewGroups(in some cases) is to use the merge tag(you can find more details here).

Added: I've bypassed the problem. Now I build my tree using margins, so the layouts are not embedded, and the UI doesn't stuck. Everything looks and works fine.

This should have been your first option instead of inflating the layout again and again as it is a much simpler solution. The layout could be obtained by using a simple LinearLayout(or a RelativeLayout, I don't know your setup as you removed the layout attributes from the layout) with orientation set to vertical. Into this layout you would add the desired views, taking in consideration to add the margin based on the level you want this child to be. If you want to simplify things even more you would create a layout file like below(this works if the Button from the layout is set to be on top of the LinearLayout):

<merge>
    <Button android:id="@+id/toggleReplies">
    <!-- content of the replies at this level -->
</merge>

After you inflate this layout you would need to set the padding(x padding for the first level, 2x for the second level, 3x for the third level etc) and then add it to the LinearLayout.

Well, the 'true' padding is not what I want because I need to draw the connection lines between children, so I build the padding by inserting some images in the layout to the left to the item. But the general idea is clear, thank you. So my final solution seems to be correct (and the only possible). — Alexander Dunaev, Sep 19 '12 at 02:14

How to optimize the recursively embedded layout?

1 Answers1

Linked