Faltenreich / SkeletonLayout

Skeleton view pattern for Android
Apache License 2.0
505 stars 65 forks source link

RecyclerView dummy items #10

Closed eypibee closed 5 years ago

eypibee commented 5 years ago

Is it possible to show skeleton with initial items above RecyclerView without the need to create dummy items?

Faltenreich commented 5 years ago

Yes, you can show placeholder items for upcoming RecyclerView items by using either SkeletonLayoutUtils.applySkeleton(recyclerView, layoutResId, itemCount) in Java or the extension recyclerView.applySkeleton(layoutResId, itemCount) in Kotlin which will both return a Skeleton. To toggle the placeholder items, simply call showSkeleton() or showOriginal() on the Skeleton.

eypibee commented 5 years ago

Hi @Faltenreich ,

I tried to apply it to the activity's recyclerview but it gives me this.

skeleton

I am using the latest version and currently in Kotlin. This is how I use the extension function.

  `  private var mSkeleton: Skeleton? = null

 private fun initSkeleton() {
        mSkeleton = rvVideos.applySkeleton(R.layout.adapter_videos, 10, cornerRadius = 0.0f, shimmerDurationInMillis = 2000L)
    }

mSkeleton?.showSkeleton()`

What am I missing here?

Faltenreich commented 5 years ago

I do not fully understand the problem yet. Could you please share more information:

eypibee commented 5 years ago

Should be set as a skeleton of this:

img

As shown in the previous image, it only displays square skeletons.

I'm using the latest, v2.0.0 .

`<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvVideos"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@layout/adapter_videos" />

</androidx.constraintlayout.widget.ConstraintLayout>`

Adapter

`<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/itemBackgroundSelector"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="3dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/ivVideo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/img_videos_placeholder"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>
Faltenreich commented 5 years ago

SkeletonLayout masks every View (except ViewGroups) independently from its content. So the disappearing play icon is as intended as the whole ImageView gets masked. At this moment the library does not support excluding specific Views from the masking process (there is an open issue for that feature: https://github.com/Faltenreich/SkeletonLayout/issues/6).

The square dimensions of the masked View may be caused by setting adjustViewBounds to true. The Drawable of your ImageView seems square, so the dimensions of the ImageView are adjusted to be square as well. Since SkeletonLayout masks only Views (and not ViewGroups), only the square ImageViews are being masked. Try adjusting the properties of the ImageView or adding another non-square View to the ViewGroup.

eypibee commented 5 years ago

SkeletonLayout masks every View (except ViewGroups) independently from its content. So the disappearing play icon is as intended as the whole ImageView gets masked. At this moment the library does not support excluding specific Views from the masking process (there is an open issue for that feature: #6).

The square dimensions of the masked View may be caused by setting adjustViewBounds to true. The Drawable of your ImageView seems square, so the dimensions of the ImageView are adjusted to be square as well. Since SkeletonLayout masks only Views (and not ViewGroups), only the square ImageViews are being masked. Try adjusting the properties of the ImageView or adding another non-square View to the ViewGroup.

Yes. It's what I really need to do. I tested it by setting a fixed size to the ImageView and it worked. Thanks!