What's good approach, InflateView/ removeView OR setting Visibility.GONE?

Question

I've got a fragment with a view having a skeleton view on it. Skeleton/Shimmering view is shown only once when data is in the loading state and then it is hidden. I'm using that fragment in ViewPager2. In order to make scrolling of ViewPager2 more smooth, I was trying to optimize the layouts. So, I want to get a better understanding of that which approach is better.

Inflating or removing the Skeleton at runtime?
Keeping the Skeleton in XML and setting its visibility to GONE.

Following is the dummy XML of ShimmerLayout which contains 5-7 views inside. Any ideas would be appreciable.

Thanks

ShimmerLayout xml:

<com.facebook.shimmer.ShimmerFrameLayout
            android:id="@+id/slEffect"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="false"
            android:paddingStart="18dp"
            style="@style/ShimmerCommon"
            app:shimmer_highlight_color="@color/post_detail_shimmer">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="26dp"
                android:layout_marginEnd="18dp"
                android:layout_marginBottom="75dp">

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/ivUserImage"
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:scaleType="centerCrop"
                    android:src="@color/post_detail_shimmer"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:riv_corner_radius="9dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/tvUserName"
                    android:layout_width="125dp"
                    android:layout_height="15dp"
                    android:layout_marginStart="7.9dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginEnd="7.9dp"
                    android:scaleType="fitXY"
                    android:src="@color/post_detail_shimmer"
                    app:layout_constraintStart_toEndOf="@+id/ivUserImage"
                    app:layout_constraintTop_toTopOf="@+id/ivUserImage"
                    app:riv_corner_radius="8dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/tvTime"
                    android:layout_width="100dp"
                    android:layout_height="15dp"
                    android:layout_marginStart="7.9dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginEnd="7.9dp"
                    android:scaleType="fitXY"
                    android:src="@color/post_detail_shimmer"
                    app:layout_constraintStart_toEndOf="@+id/ivUserImage"
                    app:layout_constraintTop_toBottomOf="@+id/tvUserName"
                    app:riv_corner_radius="8dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/tvSuserName"
                    android:layout_width="125dp"
                    android:layout_height="15dp"
                    android:layout_marginBottom="8dp"
                    android:scaleType="fitXY"
                    android:visibility="gone"
                    android:src="@color/post_detail_shimmer"
                    app:layout_constraintBottom_toTopOf="@+id/tvSTime"
                    app:layout_constraintStart_toStartOf="parent"
                    app:riv_corner_radius="8dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/tvSTime"
                    android:layout_width="100dp"
                    android:layout_height="15dp"
                    android:scaleType="fitXY"
                    android:src="@color/post_detail_shimmer"
                    android:visibility="gone"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:riv_corner_radius="8dp" />

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/tvSTsime"
                    android:layout_width="100dp"
                    android:layout_height="15dp"
                    android:layout_below="@id/tvSuserName"
                    android:scaleType="fitXY"
                    android:visibility="gone"
                    android:src="@color/post_detail_shimmer"
                    app:layout_constraintBottom_toBottomOf="@+id/tvSuserName"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:riv_corner_radius="8dp" />


            </androidx.constraintlayout.widget.ConstraintLayout>

        </com.facebook.shimmer.ShimmerFrameLayout>

Of course loading layouts runtime by inflating & removing is cleaner approach. Some may feel it's hard to do so but it's best way to make layout hierarchy clean and memory optimized. — Jeel Vankhede, Apr 14 '20 at 07:08
@MiniChip I don't think so. As View Switcher will keep both views in memory. — Usman Rana, Apr 14 '20 at 09:46

score 1 · Answer 1 · answered Apr 14 '20 at 08:12

If I am assuming correct, Then for the first time when You load your screen, All the views take time in rendering whether they are in VISIBLE/INVISIBLE or GONE states. Suppose there is a complex view (suppose custom date view horizontal slider) in my screen's layout, But I don't need this view initially, But still, My Screen opening time will be increased because of its rendering. For this Android has a component ViewStub, Which you can add in your XML, It is a dumb and lightweight view. The special thing about ViewStub is that it neither participate nor draw anything in the layout. It has zero dimension. Layout referenced by a ViewStub is inflated and added to the UI only when we decide. It means Whenever a ViewStub is made visible, or when inflate() method invoked, the layout resource is inflated and then ViewStub replaces itself in its parent with the inflated Resource. The ViewStub only exists in the view hierarchy until setVisibility(int) or inflate() is invoked. The inflated View is added to the ViewStub’s parent using layout parameter. Read below link for further information.

https://abhiandroid.com/ui/viewstub

What's good approach, InflateView/ removeView OR setting Visibility.GONE?

1 Answers1