Question

I have a layout as shown below. It is inflated by code and added to a HorizontalScrollView, sometimes a few hundred times, and causing getting memory issues.

I’m wondering if there’s anything that can be done to make it more efficient? Originally I used LinearLayouts, and replacing that with RelativeLayout made a huge difference to the scrolling. Now I’m wondering if it can be further improved?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="156dp"
    android:layout_height="254dp"
    android:paddingLeft="7dip"
    android:paddingRight="7dip">

    <FrameLayout android:id="@+id/button_frame"
    android:layout_width="156dp"
    android:layout_height="218dp">

    <ImageView android:id="@+id/button_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image_bg"
        />

        <ImageView android:id="@+id/button_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom|right"
        />

        <TextView android:id="@+id/button_select"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="2dip"
        android:layout_marginRight="2dip"
        android:background="@drawable/btn_selector_bg_selected"
        />

        <TextView android:id="@+id/button_selected"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginLeft="2dip"
        android:layout_marginRight="2dip"
        android:background="@drawable/title_bg_selected"/>

    </FrameLayout>

    <TextView
    android:id="@+id/button_title"
    android:layout_width="156dp"
    android:layout_height="36dp"
    android:textColor="#ffffff"
    android:singleLine="true"
    android:textSize="13sp"
    android:textStyle="bold"
    android:gravity="center_vertical|left"
    android:ellipsize="end"
    android:paddingLeft="30dip"
    android:paddingRight="5dip"
    android:layout_below="@id/button_frame"
    android:background="@drawable/title_bg"/>

</RelativeLayout>

The ImageView button_image is populated using AQuery image caching, so I’m not sure if there’s much more I can do to improve the way the image is handled. But any tips on improvements greatly appreciated.

Answer 1

In general, a good way to optimize layouts in Android is to minimize the amount of nesting of containers within each other. The deeper you nest layout containers, the more work the framework must do to measure, layout, and process events for the view hierarchy.

But I think you may be asking the wrong question.

The HorizontalScrollView and VerticalScollView are not intended for the use you’re putting them to. They’re meant to hold a mostly static layout, and allow it to scroll if necessary depending upon the size of the screen it happens to be running on.

You want a repetitive list of mostly identical Views, that the user can scroll. The correct Android view container to use is ListView, or one of the other descendants of AdapterView.

ListView is careful only to create/inflate the necessary child views to fill the space on screen, and reuse them as the user scrolls. This solves the memory problems you’re experiencing. It does that by requiring you to pair it up with an Adapter – an object that wraps the actual data being displayed, and creates on-demand the correct view for a given data item.

Since you’re trying to do horizontal scrolling, you might also look at Gallery (now deprecated in Android) or the newer ViewPager class, both of which support horizontal movement through a large list of data.