What's the quickest way to add several views to a LinearLayout?

Question

I have a LinearLayout view that already contains several elements. I want to add a lot more Views to it, programmatically. And because this is inside a ScrollView, everything will be scrolled.

So what I do is go through my list, and add new instances of my custom View to it. That custom view inflates a XML layout and adds a few methods.

This approach works well. The problem is that it's super slow, even without any crazy code... a list with 10 items takes around 500ms to instantiate. As an user experience standpoint, this is hard to swallow.

My question is, is this the correct/best approach? Android seems to take a lot of time inflating the layout, even though "R.layout.my_list_item" is super simple. I wonder if there's a way to maybe to reuse "inflated" layouts for additional views, kinda caching the more complex parsing?

I've tried doing this with a ListView (and adapter and a wrapper) and it seems to be much faster. The problem is that I can't use a simple ListView; my layout is more complex than a simple list (the LinearLayout itself contains additional custom icons, and it has another parent with even more Views before it's wrapped by the ScrollView).

But is there a way to use an adapter for a LinearLayout? Would that be faster than trying to add the views myself?

Any help is appreciated. I'd love to make this faster.

Code follows.

Main Activity:

// The LinearLayout that will contain everything
lineList = (LinearLayout) findViewById(R.id.lineList);

// Add a lot of items for testing
for (int i = 0; i < 10; i++) {
    addListItem("Item number " + i);
}

protected void addListItem(String __title) {
    MyListItem li;
    li = new MyListItem(this);
    li.setTitle(__title);
    lineList.addView(li);       
}

MyListItem:

public class MyListItem extends RelativeLayout {

    protected TextView textTitle;

    public MyListItem(Context __context) {
        super(__context);
        init();
    }

    public MyListItem(Context __context, AttributeSet __attrs) {
        super(__context, __attrs);
        init();
    }

    public MyListItem(Context __context, AttributeSet __attrs, int __attrsdefStyle) {
        super(__context, __attrs, __attrsdefStyle);
        init();
    }

    protected void init() {
        // Inflate the XML layout
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.my_list_item, this);

        // Create references
        textTitle = (TextView)findViewById(R.id.textTitle);
    }

    public void setTitle(String __text) {
        textTitle.setText(__text);
    }
}

What I'm trying to accomplish is this. Consider this layout:

This layout is a FrameLayout (outer box) containing a ImageView (in gray), a TextView (inner rectangle, on top) and a LinearLayout (inner rectangle, on bottom). This LinearLayout rectangle is the one I'm dynamically populating with a few items.

After I populate it, I want the final result to be this (where every new rectangle is a new MyListItem instance):

That is, everything is scrollable (the background image, for example, is aligned on top). The LinearLayout isn't scrollable by itself (everything else follows) hence why a ListView, from what I know, wouldn't work very well in my case.

Council

How many elements do you have in that activity and do you have any customized class inheriting UI elements? – Moonrise

ListViews are so fast because they recycle the item layouts. They inflate the number of item layouts required to fill the screen. When you scroll down, one view at the top gets hidden and one on the bottom gets shown. The listview takes the old, invisible one from the top and put's it with new data on the bottom. Avoids expensive inflation. Overall: This here looks very inefficient, I'm pretty sure what ever you want to do can be accomplished with a listview. If you show what you tried and post a sketch of your intended layout we can help you to figure that one out. – Belabor

Paul: not many elements. Maybe 4 or 5. Yes, some of them are custom classes that inherit from the basic framework. alextsc: thanks for the explanation. I've added a diagram that better explains my situation so it's clear whether and how I could use a ListView instead (or not). – Council

@zeh: It may not help much but the fact you're 'getting' the LayoutInflater each time in init() may be adding a fair amount of time to each call. I'd get the inflater once in the main activity and then pass a reference to it into init(). That way, you only call getSystemService(Context.LAYOUT_INFLATER_SERVICE) once and you don't need the getContext() call either as the main activity can do it directly. Just an idea - it might speed things up slightly. – Rancid

@MisterSquonk: thanks. A valid idea. I did try it though - no difference in time. I'm pretty sure it's more optimized to do that, but the difference in performance is negligible. – Council

@Council Ok, I see that this is slightly more complex than I initially though. Before I write a long answer how to do this: I wrote a short throwaway layout-prototype project with a ListView. Have a look and see if this is approx. the result you want. It's a bit simplified: The background is not an image, rather a simple grey. You can change that by setting the listviews android:background to an image from your drawable folder (in main.xml). Also the list items are simple default items. This can easily be changed by using a custom adapter. – Belabor

@alextsc: thanks. This is helpful. The image is still a problem, because of the way it's aligned/scaled (I couldn't have it as a simple background image). Maybe the way to do it with a ListView is by hooking up an event to the ListView's scroll and then scrolling a LinearLayout in parallel on the background, with all elements I need. Kinda hacky but it might work. I just wish there was a way to optimize a linearlayout.addView() a little bit though, it'd be enough for my case (it's not a huge list). – Council

@zeh: OK, I figured it wouldn't help much. By the way, are you testing this on a real device or using an AVD emulator? There's a big difference in performance (sorry if you already realise that but thought I'd mention it). – Rancid

@zeh: To follow up - either you ARE testing this on an emulator or your list items are extremely complex (much more so than your example code). Using your code with MyListItem as shown by you, on an HTC Desire I can generate 10 in under 20ms and 500 in just under 500ms. I know you say the list items you want to display contain icons etc but generating 10 takes 500ms??? That's a 25x increase on what it takes my Desire to generate the simple TextView based items - a big difference. – Rancid

@MisterSquonk: I'm testing on a device (Nexus One, Android 2.3, project targets 2.3). The items are not extremely complex - basically 2 ImageViews, and one TextView, all in a RelativeLayout. Good to know your results; maybe I'm doing something else wrong? My apk is just a test one and not zipaligned or anything, maybe that has an impact. The code on my post is a little bit simplified, but there's nothing crazy added. I'll have to benchmark more I suppose to see where the bottleneck is (although my preliminary tests really made it look like inflating was the culprit). – Council

@zeh: The Nexus One has a 1GHz Snapdragon processor (if I understand correctly) - that's the same as the Desire. Can you post the layout and item inflater code that includes the ImageViews as well as what size the images are and where they're located (/res/drawable or SD card etc)? I'll run some more tests with the images and see how it compares. – Rancid

Answer 1

3 Options:

1. Replace everything with a ListView, with the other parent and custom icons as a header view for the ListView. ListView is faster, because it only creates Views as it needs them.

2. Programatically create the contents of my_list_item instead of inflating, might be quicker

3. Use of ViewStubs may allow you to load views on-demand.

4. Maybe it isn't loading the views but the data? in which case prepare the data in a background thread.

Pestilential

Thanks for this straight, practical response. I'd add "create the views on a separate thread" to the list (as user1031312 suggested in a comment below). Other than that I think you sum the possible solutions well. – Council

Answer 2

A ListView is the way to go.

You say that your layout is too complex. But it is completely okay to inflate a complex layout as a child. For example a layout that has text and then an icon:

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

Could be inflated in your adapter as so:

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    LinearLayout root = null;
    ImageView editImageView;

    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        root = (LinearLayout)inflater.inflate(R.layout.item, null);
    } else {
        root = (LinearLayout)convertView;
    }
}

You can also be a little more clever in order to support a header. Just add a check if the index is the root and inflate a different view. Since the header is the only one that is different you will still take advantage of all the other rows being reusable. You can even pre-inflate and store the header and reuse it to completely get rid of inflation.

Approximal

Thanks. But notice I said the layout is "more complex than a simple list", rather than "too complex" (the layout itself is simple). I wouldn't have a problem inflating the whole thing. The problem is that I don't see how I could make my layout work with headers on a ListView, considering I have elements going behind the list (the image in my diagram). Can I have an image attached to the top of the ListView but under the child elements? – Council

Answer 3

Just use a ListView!

It's the easiest to set up and easiest to maintain. You define an XML layout for the List-Row, and an XML layout for the View which holds the entire List. The ListAdapter does the rest for you.

Just create a:

List<HashMap<String, String>> services = new ArrayList<HashMap<String, String>>();

...and loop through your data to add as many items as you like to the Map. Then set this map to your ListAdapter. Whether 10 items or 100 items the ListAdapter will create a List with that many items.

Example:

    public void updateProductList(String searchTerm) {
        createOrOpenDB(this);
        Cursor cursor = (searchTerm!=null)? dbAdapter.fetchWhere(TBL_NAME, KEY_NAME+" LIKE '%"+searchTerm+"%'")
                : dbAdapter.fetchAll(TBL_NAME);
        int rows = cursor.getCount();
        if (rows<=0) return;
        services.clear(); //clear current list
        for (int i=0; i<rows; i++) {
            HashMap<String, String> map = new HashMap<String, String>();
            cursor.moveToPosition(i);
            map.put(KEY_NAME, "" + cursor.getString(cursor.getColumnIndex(KEY_NAME)));
            map.put(KEY_DESC, "" + cursor.getString(cursor.getColumnIndex(KEY_DESC)));
            map.put(KEY_COST, "" + cursor.getDouble(cursor.getColumnIndex(KEY_COST)));
            services.add(map);
        }
        cursor.close();
        closeDB();

        ListAdapter adapter = new SimpleAdapter(this, services, R.layout.products_view_row,
                new String[] {KEY_NAME, KEY_DESC, KEY_COST},
                new int[] {R.id.listViewText1, R.id.listViewText2, R.id.listViewText3});
        setListAdapter(adapter);
    }

Windhoek

Thanks. I've created a ListView with a proper adapter in other parts of the same application, however, so the problem isn't with implementing a ListView. The reason why I'm not using a ListView here is because it doesn't seem to accomplish what I need (scrolling other non-list, non-header elements in parallel). I'd love to be proven wrong, but the answer is more complex than "just use a listview". – Council

Ohh I see. Then what you want is this: #3193095 (see accepted answer) coupled with a ScrollView to encapsulate your entire layout. – Windhoek

Err, like I said on the original post, this is exactly what I'm doing, but I'm having an issue with performance (manually adding items to a LinearLayout is slow). – Council

Oh, right. Did you use an AsyncTask to run this loop in the background? You could post the list items one by *using a Handler.post() method. That should help the performance? – Windhoek

Yeah, that's what I'm doing right now for a similar list (I have several similar lists on the application): I only create the first few items needed for the initial viewport, but then I have a thread that populates the rest of the list on the background. I'm using Handlers and Runnables and Threads though, didn't know of the AsyncTask - sounds better for that, thanks! – Council

Its basically the SwingWorker class but for Android (if you check both classes they're almost identical twins) – Windhoek