androidandroid-recyclerviewandroid-constraintlayoutandroidxfastadapter
Scrolling issue with FastAdapter and ConstraintLayout: Skipped 211 frames
For my problem I have prepared a very simple AndroidX test app at Github:
I am using the very nice FastAdapter library in my MainActivity:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(mFastAdapter);
mFastAdapter.withSelectable(true);
mFastAdapter.withOnClickListener((v, adapter, item, position) -> {
item.details = !item.details;
// pass item.details as payload to bindView to prevent flickering
adapter.getFastAdapter().notifyAdapterItemChanged(position, item.details);
return true;
});
List<MyItem> newList = new ArrayList<>();
for (int i = 1; i < 10; i++) {
MyItem item = new MyItem();
item.gid = i;
item.stamp = i;
item.state1 = (i % 2 == 0 ? WON : LOST);
item.score1 = (int) (Math.random() * 50);
item.score2 = (int) (Math.random() * 50);
item.finished = new Date().toString().substring(0, 10);
newList.add(item);
}
DiffUtil.DiffResult diffResult = FastAdapterDiffUtil.calculateDiff(mItemAdapter, newList);
FastAdapterDiffUtil.set(mItemAdapter, diffResult);
}
For the items layout I use ConstraintLayout with 8 TextView's and 4 ImageView's:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/details"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="@+id/guidelineTop"
app:layout_constraintEnd_toStartOf="@+id/gid"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/plus_circle_gray" />
<TextView
android:id="@+id/gid"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="@+id/guidelineTop"
app:layout_constraintEnd_toStartOf="@+id/info"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/details"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="@+id/guidelineTop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/gid"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/photo"
android:layout_width="80dp"
android:layout_height="60dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="@+id/score1"
app:layout_constraintEnd_toStartOf="@+id/guidelineMiddle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guidelineTop" />
<ImageView
android:id="@+id/photo2"
android:layout_width="80dp"
android:layout_height="60dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="@+id/score"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guidelineMiddle"
app:layout_constraintTop_toTopOf="@+id/guidelineTop" />
<TextView
android:id="@+id/score1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/given1"
app:layout_constraintEnd_toStartOf="@+id/guidelineMiddle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/photo" />
<TextView
android:id="@+id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/given"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guidelineMiddle"
app:layout_constraintTop_toBottomOf="@+id/photo2" />
<TextView
android:id="@+id/given1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/elo1"
app:layout_constraintEnd_toStartOf="@+id/guidelineMiddle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/score1" />
<TextView
android:id="@+id/given"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/elo2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guidelineMiddle"
app:layout_constraintTop_toBottomOf="@+id/score" />
<TextView
android:id="@+id/elo1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/guidelineBottom"
app:layout_constraintEnd_toStartOf="@+id/guidelineMiddle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/given1" />
<TextView
android:id="@+id/elo2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/guidelineBottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guidelineMiddle"
app:layout_constraintTop_toBottomOf="@+id/given" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/board"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guidelineBottom" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</androidx.constraintlayout.widget.ConstraintLayout>
When debugging the app at a mobile phone (I use Moto G2 and Moto G4 Play) and scrolling the list of only 10 items I keep getting the warnings:
01-17 15:16:27.279 13947-13947/de.afarber.fasi I/Choreographer: Skipped 173 frames! The application may be doing too much work on its main thread.
01-17 15:38:17.700 13947-13947/de.afarber.fasi I/Choreographer: Skipped 35 frames! The application may be doing too much work on its main thread.
01-17 15:38:21.237 13947-13947/de.afarber.fasi I/Choreographer: Skipped 211 frames! The application may be doing too much work on its main thread.
01-17 15:38:34.569 13947-13947/de.afarber.fasi I/Choreographer: Skipped 106 frames! The application may be doing too much work on its main thread.
01-17 15:38:38.696 13947-13947/de.afarber.fasi I/Choreographer: Skipped 107 frames! The application may be doing too much work on its main thread.
In my real app I have fragments with other layouts which do not produce such errors, so I don't think that the older mobile phones are the cause. Also I do not scroll particularly quickly or too slow.
Solution
I have solved the performance problems of scrolling my RecyclerView by switching from ConstraintLayout to LinearLayout plus using few Space elements for better alignment -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="24dp"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/details"
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:contentDescription="@string/details"
app:srcCompat="@drawable/plus_circle_gray"
/>
<TextView
android:id="@+id/gid"
android:textAlignment="center"
android:textStyle="bold"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/info"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<ImageView
android:id="@+id/photo1"
android:scaleType="centerInside"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="60dp"
/>
<ImageView
android:id="@+id/photo2"
android:scaleType="centerInside"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="60dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/score1"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/score2"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/given1"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/given2"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_weight="10"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/elo1"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/elo2"
android:textAlignment="center"
android:layout_weight="40"
android:layout_width="0dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
<ImageView
android:id="@+id/board"
android:layout_width="match_parent"
android:layout_height="240dp"
/>
</LinearLayout>
