Issue
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
alt="ConstraintLayout">
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?
Solution
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.
Answered By - Abhinav Gupta
Answer Checked By - Robin (JavaFixing Admin)
