ListView scroll in marshmallow getting slow with images

Question

I have a ListView with a ImageView covering the row. (I'm loading the image with Picasso. I had tried glide first but Picasso is slightly faster) It works smoothly enough on lollipop and kitkat, but on marshmallow the scroll is getting extremely slow and sometimes it is getting ANR messages.

Here's my xml for the list item:

<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="170dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/img_genre_bg"
                    android:scaleType="fitXY"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!--android:background="@color/trans_black"-->

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/img_play"
                        android:layout_centerHorizontal="true"
                        android:src="@drawable/play_button"
                        />
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/tv_genre_name"
                        android:textSize="20sp"
                        android:textAllCaps="true"
                        android:layout_centerHorizontal="true"
                        android:textColor="@color/white"
                        android:layout_below="@+id/img_play"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/tv_genre_id"
                        android:visibility="gone"/>
                </RelativeLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="3dp"
                    android:background="@color/colorAccent"
                    android:layout_alignParentBottom="true"/>
            </RelativeLayout>

        </RelativeLayout>

Listview:

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/lv_genre"
    android:scrollbars="none"
    android:divider="@null"
    android:cacheColorHint="@android:color/transparent"
    android:fastScrollEnabled="true"
    android:persistentDrawingCache="scrolling"
    android:scrollingCache="false">
</ListView>

getView():

public View getView(int position, View view, ViewGroup viewGroup) {
    LayoutInflater inflater = (LayoutInflater) context.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
    View rowview=view;
    if(rowview==null){
        rowview=inflater.inflate(R.layout.item_genre_list,viewGroup,false);
    }
    id = (TextView) rowview.findViewById(R.id.tv_genre_id);
    TextView name = (TextView) rowview.findViewById(R.id.tv_genre_name);
    ImageView img_genre_bg = (ImageView) rowview.findViewById(R.id.img_genre_bg);
    ImageView img_play = (ImageView) rowview.findViewById(R.id.img_play);


    opensans = Typeface.createFromAsset(context.getAssets(), "font/OpenSans-Light.ttf");
    name.setTypeface(opensans);

    GENRE genre=new GENRE();
    genre=genres.get(position);
    id.setText(genre.getGenre_id());
    name.setText(genre.getGenre_name());


        Picasso
            .with(context)
            .load(genre.getGenre_image())
            .placeholder(R.drawable.loading)
            .into(img_genre_bg);

    return rowview;
}

I had tried loading the image on separate AsyncTask thread but still it got stuck on scrolling. Changing it to RecyclerView also didn't helped.

Answer 1

It's because you are creating your Typeface everytime a row is created. The overhead of creating an Asset everytime a row is created probably slows the execution.

Move this piece of code to the Constructor of your class;

opensans = Typeface.createFromAsset(context.getAssets(), "font/OpenSans-Light.ttf");

Then you can use that already created type as:

name.setTypeface(opensans);

It is better to move to RecyclerView which is more suitable since it manages memory more efficiently than ListView.