8

I have a RecyclerView implementation inside of a ViewPager, and its performance is pretty horrible. Here's a video of the performance in question. I have two view types, and am using the ViewHolder pattern (so it's not inflation or finding views causing the issue).

Here's the adapter.

Here's the cardview.xml file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"

android:layout_height="wrap_content"

android:clipChildren="false"


android:orientation="vertical"

android:scrollbars="none">

<LinearLayout
    android:id="@+id/next"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_marginBottom="8dp"
    android:elevation="8dp"
    android:orientation="horizontal" />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/card_background"
    android:orientation="horizontal">


    <LinearLayout
        android:id="@+id/dots"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:background="?attr/activity_background"
        android:orientation="horizontal">


    </LinearLayout>


    <View
        android:id="@+id/dot"
        android:layout_width="3dp"
        android:layout_height="match_parent"

        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/dots"
        android:background="#fff" />


    <RelativeLayout
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/dot"
        android:orientation="vertical"
        android:paddingLeft="8dp"

        android:paddingRight="8dp"
        android:paddingTop="8dp">


        <include
            android:id="@+id/children"
            layout="@layout/commentnumber"
            android:layout_width="wrap_content"
            android:layout_height="16dp"
            android:layout_alignParentRight="true"

            android:layout_gravity="right"
            android:layout_marginBottom="-16dp"
            android:layout_marginLeft="10dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" />


        <com.wefika.flowlayout.FlowLayout
            android:id="@+id/flow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingRight="10dp">

            <TextView
                android:id="@+id/author"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_gravity="center_vertical"

                android:paddingRight="5dp"
                android:text="ccrama"

                android:textColor="?attr/font"
                android:textSize="?attr/font_commenttitle"
                android:textStyle="bold"

                />

            <TextView
                android:id="@+id/score"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_gravity="center_vertical"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:text="+49"
                android:textColor="?attr/font"
                android:textSize="?attr/font_commentinfo"

                android:textStyle="bold" />

            <TextView
                android:id="@+id/time"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_alignParentRight="true"
                android:layout_gravity="center_vertical"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:text="4 hours ago"

                android:textColor="?attr/font"

                android:textSize="?attr/font_commentinfo" />

            <include
                android:id="@+id/gild"
                layout="@layout/gilded"
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:layout_gravity="center_vertical"
                android:gravity="center_horizontal"
                android:orientation="horizontal"
                android:paddingLeft="5dp"
                android:paddingRight="5dp" />

            <include
                android:id="@+id/flairbubble"
                layout="@layout/flair"
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:layout_gravity="center_vertical"
                android:layout_margin="5dp"

                android:layout_toRightOf="@+id/pinned"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:src="@drawable/pinned" />

            <include
                android:id="@+id/you"
                layout="@layout/you"
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:layout_centerVertical="true"
                android:layout_gravity="center_vertical"

                android:layout_toRightOf="@+id/pinned"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:src="@drawable/pinned" />

            <include
                android:id="@+id/op"
                layout="@layout/op"
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:layout_marginLeft="4dp"
                android:layout_centerVertical="true"
                android:layout_gravity="center_vertical"

                android:layout_toRightOf="@+id/pinned"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:src="@drawable/pinned" />
        </com.wefika.flowlayout.FlowLayout>


        <me.ccrama.redditslide.ActiveTextView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/flow"
            android:paddingBottom="8dp"

            android:textColor="?attr/font"
            android:textSize="?attr/font_commentbody" />


    </RelativeLayout>




</LinearLayout>

<LinearLayout
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_below="@+id/background"
    android:orientation="horizontal"
    android:weightSum="4">

    <ImageView
        android:id="@+id/more"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"

        android:background="?android:selectableItemBackground"
        android:padding="12dp"
        android:src="@drawable/more"


        android:tint="?attr/tint" />


    <ImageView
        android:id="@+id/downvote"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="?android:selectableItemBackground"
        android:padding="12dp"

        android:src="@drawable/downvoteicon"
        android:tint="?attr/tint" />

    <ImageView
        android:id="@+id/upvote"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="?android:selectableItemBackground"
        android:padding="12dp"
        android:src="@drawable/upvoteicon"

        android:tint="?attr/tint" />

    <ImageView
        android:id="@+id/reply"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="?android:selectableItemBackground"
        android:padding="12dp"

        android:src="@drawable/reply"
        android:tint="?attr/tint" />
</LinearLayout>

<LinearLayout
    android:id="@+id/replyArea"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/menu"

    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/replyLine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="?attr/tint"
        android:hint="Reply"
        android:imeOptions="actionDone|flagNoEnterAction"
        android:inputType="textMultiLine|textAutoCorrect|textCapSentences"
        android:minHeight="30dp"
        android:textColor="?attr/font"
        android:textColorHint="?attr/font" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/discard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="?android:selectableItemBackground"
            android:padding="4dp"

            android:text="DISCARD"
            android:textColor="?attr/font"
            android:textSize="14sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="?android:selectableItemBackground"
            android:padding="4dp"

            android:text="SUBMIT"
            android:textColor="?attr/font"

            android:textSize="14sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/innersend2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="-6dp"
        android:layout_marginRight="-6dp"
        android:alpha=".56"

        android:gravity="center"
        android:orientation="horizontal"

        android:weightSum="8">

        <ImageButton
            android:id="@+id/imagerep"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/image"
            android:tint="?attr/tint" />


        <ImageButton
            android:id="@+id/link"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"

            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/link"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/bold"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"

            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/bold"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/italics"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"

            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/italics"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/bulletlist"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"

            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/bullets"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/numlist"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"

            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/numbers"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/quote"
            android:layout_width="0dp"

            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/quotes"
            android:tint="?attr/tint" />

        <ImageButton
            android:id="@+id/size"
            android:layout_width="0dp"

            android:layout_height="48dp"
            android:layout_weight="1"
            android:height="48dp"
            android:background="#00000000"
            android:cropToPadding="false"
            android:padding="8dp"
            android:scaleType="fitCenter"
            android:src="@drawable/fontsizedarker"
            android:tint="?attr/tint" />
    </LinearLayout>
</LinearLayout>

Removing all the adapter code except for inflation still results in noticeable lag. I really can't find the bottom of this, and any help/tips are greatly appreciated.

EDIT: Some more information: Removing the dataset "hiding" code (getRealPosition, hideAll, unhideAll) has no affect on the speed of the RecyclerView. Also, removing the FlowLayout does not make it any faster.

ccrama
  • 724
  • 1
  • 8
  • 23
  • 1
    Did you check out your view hierarchy in the Hierarchy Viewer tool? There's a nice little "profile" button there that will show you the measure/layout/draw time for your hierarchy. You could also dump your view hierarchy as layers and check it out in an image editor -- maybe you have lots of alpha blending? And have you checked how much overdraw you have with the "Profile GPU overdraw" developer option? [Romain Guy's case study on Falcon Pro](http://www.curious-creature.com/docs/android-performance-case-study-1.html) is a great article for getting started with profiling your ui performance. – Snild Dolkow Oct 26 '15 at 21:05
  • Very great suggestion! I will definitely be taking a look at these tools and Romain's article. Thank you! – ccrama Oct 26 '15 at 21:09
  • I followed the article and realized I have very high (4-5) overdraw on the view and got it down to 1 (good), but the scrolling still lags like crazy. I'll work on simplifying the view hierarchy to 1-2 views (hopefully), and we'll see how it goes. – ccrama Oct 26 '15 at 22:10
  • 1
    Have you tried "Tracer for OpenGL ES"? Romain Guy has [a follow-up article on it](http://www.curious-creature.com/2015/03/25/android-performance-case-study-follow-up/). It can be quite useful to help figure out if you have some unexpected drawing behavior in some views. – Snild Dolkow Oct 26 '15 at 22:13
  • Hmm will definitely take a look at that.Thank you! – ccrama Oct 26 '15 at 22:43
  • Decided to remove everything in the first parent LinearLayout except for the top and now it's extremely fast. I don't know whether it was the code or the view, but I'm testing it out now! – ccrama Oct 26 '15 at 22:53

2 Answers2

10

I was having the same problem with RecyclerView. It was laggy. In my case, there was a horizontal list of image buttons inside RecyclerView.

I solved it by removing the scaleType from ImageButtons or ImageViews and loading images through Picasso with resizing like :

 Picasso.with(context).load(icon.get(position)).resize(270,270).centerCrop().into(holder.iconView);

The problem of lag may occur due to runtime scaling of big sized images or no. of images. It is not advisable. Whereas Picasso takes care of resizing, and loading efficiently. Also it handles caching for you.

Abhishek Balani
  • 3,827
  • 2
  • 24
  • 34
  • That is EXACTLY what my issue was! I got rid of the horizontal images and it works perfectly fine! I just ended up removing the images and then putting them in at runtime if the user needs to see them (it was a menu that comes up on long press). Thank you! – ccrama Oct 27 '15 at 16:43
0

I used the same line of code written by TheOddAbhi, I mean

Picasso.with(context).load(icon.get(position)).resize(270,270).centerCrop().into(holder.iconView);

But in my layout file removing the scaleType from my ImageView didn't work, so I removed android:adjustViewBounds="true", which was the problem causing lagging.

Curio
  • 1,331
  • 2
  • 14
  • 34