ListView very choppy - possible problematic layout

Question

I have many rows in my app that I feel aren't as optimized as it should; the listView scroll is choppy on certain devices. I have played with Relative Layout and same effect. I am posting below the code for the biggest offender.

Note, each row is a very complex layout, using custom Typefaces as well. I am posting XML and adapter (getView()) code:

Can someone look this over and let me know if I am doing some bad practices? (I TRY not to nest layouts but sometimes you have to!)

Here is what you are looking at visually. It turns out how I want; just not smooth scroller:

Here is XML:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        android:background="@drawable/following_home_selector"
        android:orientation="vertical" >

        <RelativeLayout
            android:id="@+id/rlCommentButtonBar"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@drawable/following_header_selector"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/labelFeaturedProfilePic"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="12dp"
                android:layout_marginRight="10dp"
                android:background="#bbb"
                android:contentDescription="Profile"
                android:src="@drawable/usericon" />

            <LinearLayout
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/llFollowingCommentButton"
                android:background="#bbb" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/llFollowingCommentButton"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:background="@drawable/review_button_selector"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/tvFollowingCommentLabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:padding="3dp"
                    android:text="comment"
                    android:textColor="#888" />

                <TextView
                    android:id="@+id/tvFollowingCommentTotal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="-2dp"
                    android:background="@drawable/ic_comment_gray"
                    android:gravity="center_horizontal"
                    android:padding="1dp"
                    android:text="8"
                    android:textColor="#fff"
                    android:textSize="12sp"
                    android:textStyle="italic" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/labelFeaturedProfilePic"
                android:orientation="vertical" >

                <TextView
                    android:id="@+id/myMastCat_Username"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Username"
                    android:textColor="#222"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/myMastCat_Date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Date"
                    android:textColor="#999"
                    android:textSize="12sp"
                    android:textStyle="italic" />
            </LinearLayout>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/following_inner_box_selector"
            android:orientation="vertical"
            android:padding="7dp" >

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

                <TextView
                    android:id="@+id/myMasterCat_Item"
                    style="@style/DropShadowEffect"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3dp"
                    android:layout_marginTop="3dp"
                    android:layout_weight="90"
                    android:shadowColor="#ffffff"
                    android:text="Item"
                    android:textColor="#666"
                    android:textSize="24sp" />
            </LinearLayout>

            <TextView
                android:id="@+id/myMastCat_Cat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="3dp"
                android:layout_marginTop="-3dp"
                android:gravity="top"
                android:text="MasterCat"
                android:textColor="#666"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/myMasterCat_Review"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="3dp"
                android:text="This is an item review."
                android:textColor="#666"
                android:textSize="17sp" />
        </LinearLayout>
    </LinearLayout>

As far as Layers/Overdraw:

My theme background is #d8d9d9 hex; the layout file that contains the listView (not shown) has NO background.

And here is my ListView (third party library)

   <com.handmark.pulltorefresh.library.PullToRefreshListView
            android:id="@+id/pull_to_refresh_scrollview_feat"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:listSelector="#00000000" />

I had to use the 00000000 to remove the default blue background that for some reason showed up on press state ONLY in dark gray background.

The profile Images you see are loaded using a LazyList library.

Also, note I am using three different Roboto Typeface; and all but one textView is using a custom TypeFace.

Lastly, here is my getView() in the adapter:

   @Override
   public View getView(final int position, View convertView, ViewGroup parent) {
    ViewHolder holder = null;

    LayoutInflater inflater = ((Activity) context).getLayoutInflater();

    if (convertView == null) {

        convertView = inflater.inflate(R.layout.master_cat_following, null,
                true);

        holder = new ViewHolder();
        holder.i1 = (ImageView) convertView
                .findViewById(R.id.labelFeaturedProfilePic);
        holder.tv1 = (TextView) convertView
                .findViewById(R.id.myMastCat_Cat);
        holder.tv2 = (TextView) convertView
                .findViewById(R.id.myMasterCat_Item);
        holder.tv3 = (TextView) convertView
                .findViewById(R.id.myMastCat_Username);
        holder.tv3.setTypeface(roboto_regular);
        holder.tv4 = (TextView) convertView
                .findViewById(R.id.myMasterCat_Review);
        holder.tv6 = (TextView) convertView
                .findViewById(R.id.myMastCat_Date);
        holder.tv7 = (TextView) convertView
                .findViewById(R.id.tvFollowingCommentTotal);
        holder.tv4.setTypeface(roboto_light);
        holder.tv8 = (TextView) convertView
                .findViewById(R.id.tvFollowingCommentLabel);
        holder.tv8.setTypeface(roboto_thin);
        holder.l1 = (LinearLayout) convertView
                .findViewById(R.id.llFollowingCommentButton);
        holder.r1 = (RelativeLayout) convertView
                .findViewById(R.id.rlCommentButtonBar);

        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    final FollowingItems mco = getItem(position);
    final String item = mco.getItem();
    String cat = mco.getCat();
    final String user = mco.getUser();
    String date = mco.getDate();
    date = DateConvert.dateConvert(Long.valueOf(date));
    long commentTotal = mco.getCommentCounts();
    String review = mco.getReview();
    String url = mco.getUrl();

    holder.tv1.setTypeface(roboto_light);
    holder.tv2.setTypeface(bpReplay);

    holder.tv1.setText(cat);
    holder.tv2.setText(item);
    holder.tv3.setText(user);
    holder.tv4.setText(review);
    holder.tv6.setText(date);

    Drawable dBlue = (Drawable) getContext().getResources().getDrawable(
            R.drawable.ic_comment_blue);
    Drawable dGray = (Drawable) getContext().getResources().getDrawable(
            R.drawable.ic_comment_gray);

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {

        if (commentTotal == 0) {
            holder.tv7.setBackgroundDrawable(dGray);
        } else {
            holder.tv7.setBackgroundDrawable(dBlue);
        }
    } else {

        if (commentTotal == 0) {
            holder.tv7.setBackground(dGray);
        } else {
            holder.tv7.setBackground(dBlue);
        }
    }

    holder.tv7.setText(String.valueOf(commentTotal));

    if (!url.equals("http://www.rate-it-web.com/profile_pics/null")) {
        imageLoader.DisplayImage(url, holder.i1);
    } else {
        holder.i1.setImageResource(R.drawable.usericon);
    }

    holder.l1.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {

            FollowingItems mco = getItem(position);
            Intent intent = new Intent(getContext(), CommentActivity.class);
            // edited out
            intent.putExtra("userRated", String.valueOf(mco.getUserRated()));
            getContext().startActivity(intent);
        }
    });

    holder.r1.setOnClickListener(new OnClickListener() {

        public void onClick(View v) {

            FollowingItems mco = getItem(position);

            Intent i = new Intent(getContext(), ProfileActivity.class);
            i.putExtra("userprofile", mco.getUser());
            i.putExtra("userIdprofile", String.valueOf(mco.getUserId()));
            getContext().startActivity(i);

        }
    });

    return convertView;

}

Answer 1

the listView scroll is choppy on certain devices

I would strongly recommend that you read Romain Guy's epic blog post about identifying ListView scrolling jank. In particular, watch out for overdraw.

Also, I have no idea what imageLoader is, but use StrictMode and/or Traceview to make sure that it isn't doing something stupid like loading images on the main application thread.

You might also temporarily remove your pull-to-refresh stuff, to ensure that it somehow isn't the source of your jank.