Why ConstraintLayout slower than LinearLayout in RecyclerView item?

Question

I'm changing the xml item of recyclyerView from LinearLayout to ConstraintLayout. When I'm scrolling the recyclerView horizontal, it lags and renders very slowly than LinearLayout.

ConstraintLayout

ConstraintLayout

LinearLayout

LinearLayout

Here i am sharing my xml for ConstraintLayout.

my ConstraintLayout Item

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="85dp"
    android:layout_height="wrap_content">

<android.support.constraint.ConstraintLayout
    android:id="@+id/merchant_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_marginEnd="5dp"
    android:layout_marginStart="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/merchant_img"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:transitionName="profile"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="UnusedAttribute"
        tools:src="@drawable/avatar" />

    <com.max.xclusivekotlin.customViews.MyTextView
        android:id="@+id/merchant_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:maxWidth="72dp"
        android:minWidth="72dp"
        android:textAlignment="center"
        android:textColor="@color/blackFont"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@id/merchant_img"
        app:layout_constraintStart_toStartOf="@id/merchant_img"
        app:layout_constraintTop_toBottomOf="@id/merchant_img"
        tools:text="Chili's" />

    <com.max.xclusivekotlin.customViews.MyTextView
        android:id="@+id/merchant_offer_percent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/redColor"
        android:textSize="12sp"
        app:layout_constraintBottom_toTopOf="@id/tv_distance"
        app:layout_constraintEnd_toStartOf="@id/merchant_offer_type"
        app:layout_constraintStart_toStartOf="@id/merchant_name"
        app:layout_constraintTop_toBottomOf="@id/merchant_name"
        app:textBold="bold"
        tools:text="25%" />

    <com.max.xclusivekotlin.customViews.MyTextView
        android:id="@+id/merchant_offer_type"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@color/blackFont"
        android:textSize="12sp"
        app:layout_constraintBottom_toTopOf="@id/tv_distance"
        app:layout_constraintEnd_toEndOf="@id/merchant_name"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/merchant_offer_percent"
        app:layout_constraintTop_toBottomOf="@id/merchant_name"
        tools:text=" | Refund " />

    <com.max.xclusivekotlin.customViews.MyTextView
         android:id="@+id/tv_distance"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:ellipsize="end"
         android:lines="1"
         android:textAlignment="center"
         android:textColor="@color/greyFont"
         android:textSize="14sp"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="@id/merchant_img"
         app:layout_constraintStart_toStartOf="@id/merchant_img"
         app:layout_constraintTop_toBottomOf="@id/merchant_offer_percent" />
    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

my LinearLayout Item

<android.support.v7.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="85dp"
    android:layout_height="wrap_content">

<LinearLayout
    android:id="@+id/merchant_layout"
    android:layout_width="75dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="5dp"
    android:layout_marginStart="5dp"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingBottom="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/merchant_img"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:transitionName="profile"
        tools:ignore="UnusedAttribute"
        tools:src="@drawable/avatar" />

    <com.max.xclusivekotlin.customViews.MyTextView
        android:id="@+id/merchant_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:maxWidth="72dp"
        android:minWidth="72dp"
        android:textAlignment="center"
        android:textColor="@color/blackFont"
        android:textSize="14sp"
        tools:text="Chili's" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:orientation="horizontal">

        <com.max.xclusivekotlin.customViews.MyTextView
            android:id="@+id/merchant_offer_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/redColor"
            android:textSize="12sp"
            app:textBold="bold"
            tools:text="25%" />

        <com.max.xclusivekotlin.customViews.MyTextView
            android:id="@+id/merchant_offer_type"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:lines="1"
            android:textColor="@color/blackFont"
            android:textSize="12sp"
            tools:text=" | Refund " />
    </LinearLayout>

    <com.max.xclusivekotlin.customViews.MyTextView
        android:id="@+id/tv_distance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textAlignment="center"
        android:textColor="@color/greyFont"
        android:textSize="14sp"
        android:visibility="gone" />
    </LinearLayout>
</android.support.v7.widget.CardView>

How can I solve this?

Show your code how you are rendering. – Faizan Mubasher Oct 08 '18 at 10:16 — Faizan Mubasher, Oct 08 '18 at 10:16
Yea..please post the xml and java codes..!! – Prashanth Verma Oct 08 '18 at 10:29 — Prashanth Verma, Oct 08 '18 at 10:29

score 5 · Answer 1 · answered Oct 08 '18 at 10:47

5

Maybe for lot of constraint you are using in the ConstraintLayout or maybe RecyclerView performance.

i recommend you using RelativeLayout

these link can help you :

Improve RecyclerView performance

RelativeLayout and ConstraintLayout Performance

How Make RecyclerView Smoothly

answered Oct 08 '18 at 10:47

Ali Khaki

1,184
1
13
24

ok i knew about that, now i will used RelativeLayout until google fix this bug or someone tell me how i should used ConstraintLayout for RecyclerView item – Mostafa Esmail Oct 15 '18 at 08:52

score 3 · Accepted Answer · answered Oct 08 '18 at 12:06

Relative Layout:

RelativeLayout is an approach to actualize complex formats with level (one level of settling) outline. By its outline, it's overlaying things, not at all like LinearLayout that never does that Its name says independent from anyone else, RelativeLayout is awesome at situating things in respect to other. Suppose you have undetermined view width and you need to put a thing to one side of it and to the base of it in the meantime. You can do that with LinearLayout, however, it would take two settled, with RelativeLayout it got way cleaner.

Constraint Layout:

The center is RelativeLayout where things can overlay. Be that as it may, what makes ConstraintLayout awesome is it can supplant the various designs: Frame, Relative, Linear. Truly, there are numerous different formats, yet those are wrappers What I like about ConstraintLayout is that it's extremely awesome at utilizing as a part of Design mode before I didn't care for it by any means. For the most part in view of the poor execution of my fair equipment (for Android Studio) and regular rendering bugs ConstraintLayout properties really are so long and appalling that it's better utilizing it Design mode. It can control position and measurements (not at all like RelativeLayout) of perspectives. Keep in mind, that parameters beginning with layout_ are implied for wrapping format. The view itself doesn't deal with those

So you can utilize your most loved weight from LinearLayout in ConstraintLayout by imperative chains, land left/right/top/base of from RelativeLayout, overlay things like in straightforward FrameLayout I think no one uses GridLayout, it's far excessively disappointing, constantly favored settled LinearLayout, with ConstraintLayout you can do that effortlessly

Constraint Layout Disadvantage:

Despite the fact that it's awesome, outline mode still isn't as immaculate as XML. It gets jumbled simple, you have to zoom in on perspectives and it drives you to have simply ConstraintLayout, in the event that you endeavor to include some settled design – you'd think twice about it.

Hope this will help you.

score 0 · Answer 3 · edited Jun 29 '22 at 13:09

0

Because ConstraintLayout is slower than FrameLayout, and maybe other layouts (I've only tested FrameLayout). I have a ConstraintLayout with 5 items in it, its onMeasure method costs about 50ms. When I change this ConstraintLayout to a FrameLayout, its onMeasure method costs just 1 or 2ms.

edited Jun 29 '22 at 13:09

jwriteclub

1,604
1
17
33

answered Jun 23 '22 at 02:19

Jesse zhang

1

Why ConstraintLayout slower than LinearLayout in RecyclerView item?

3 Answers3