Faltenreich/SkeletonLayout

Unknown issue

Closed this issue · 1 comments

  • Version: 4.0.0 (implementation 'com.faltenreich:skeletonlayout:4.0.0')
  • Usage: Timesheet application

XML

<androidx.constraintlayout.widget.ConstraintLayout
        style="@style/RecyclerViewTimesheetItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/backgroundColor"
        android:onClick="@{() -> clickListener.onClick(timesheet)}"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.faltenreich.skeletonlayout.SkeletonLayout
            android:id="@+id/skeletonLayout"
            style="@style/SkeletonLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <LinearLayout
                android:id="@+id/linear_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:baselineAligned="false"
                android:orientation="horizontal">

                <androidx.constraintlayout.widget.ConstraintLayout
                    style="@style/TimesheetItemDataConstraintLayout"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/time_range_formatted"
                        style="@style/TimesheetItemTitleText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_constraintBottom_toTopOf="@+id/job"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:timesheetTimeFormatted="@{timesheet}" />

                    <TextView
                        android:id="@+id/job"
                        style="@style/TimesheetItemDescriptionText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_constraintBottom_toTopOf="@+id/activity"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/time_range_formatted"
                        app:timesheetJobFormatted="@{timesheet}" />

                    <TextView
                        android:id="@+id/activity"
                        style="@style/TimesheetItemDescriptionText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/job"
                        app:timesheetActivityFormatted="@{timesheet}" />

                </androidx.constraintlayout.widget.ConstraintLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="16dp"
                    android:layout_marginBottom="8dp">

                    <TextView
                        android:id="@+id/total_time_formatted"
                        style="@style/TimesheetItemTotalHourText"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintRight_toLeftOf="@+id/arrow"
                        app:layout_constraintTop_toTopOf="parent"
                        app:timesheetTimeFormatted="@{timesheet}" />

                    <ImageView
                        android:id="@+id/arrow"
                        style="@style/IconTimesheetEnd"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:contentDescription="@string/description_right_arrow"
                        android:src="@drawable/ic_arrow_keyboard_right_24"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintLeft_toRightOf="@+id/total_time_formatted"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tint="?attr/textAppearanceBody2" />

                </androidx.constraintlayout.widget.ConstraintLayout>

            </LinearLayout>
        </com.faltenreich.skeletonlayout.SkeletonLayout>

        <View
            android:id="@+id/divider"
            style="@style/Divider"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/skeletonLayout" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Kotlin code

private fun getTimesheets(date: String) {
        // Show skeleton views
        showSkeletonView()

        // Request new timesheets from the API
        getTimesheetsApi(date)
    }

private fun showSkeletonView() {
        // New SkeletonLayout to a RecyclerView
        skeleton = binding.timesheetsRecyclerView.applySkeleton(R.layout.item_view_timesheet, 1)
        skeleton.showSkeleton()
    }

 private fun onDataLoaded() {
        skeleton.showOriginal()
    }

private fun setupRecyclerView(date: String) {
        // Setting up the recycler view adapter and the onClick listener
        val adapter = TimesheetsAdapter(TimesheetListener { id ->
            onPressTimesheet(id)
        })
        binding.timesheetsRecyclerView.adapter = adapter

        // Populate the recycler view with all of the timesheets stored in the local database
        // for a given day
        timesheetsViewModel.getTimesheetsByDate(date)
            .observe(viewLifecycleOwner, {
                it?.let {
                    adapter.submitList(it)
                    onDataLoaded()
                }
            })
    }

With skeleton (using "showSkeletonView()" and "onDataLoaded()")
image

Without skeleton (commented out "showSkeletonView()" and "onDataLoaded()")
image

The issue is that when I use the "showSkeletonView()" and "onDataLoaded()" methods the recyclerview will not display any of the items. The only thing that happens is that the skeleton view is hidden and nothing is displayed. Even though there is supposed to be one item.

Found the issue:

Went from this:

private fun setupRecyclerView(date: String) {
        // Setting up the recycler view adapter and the onClick listener
        val adapter = TimesheetsAdapter(TimesheetListener { id ->
            onPressTimesheet(id)
        })
        binding.timesheetsRecyclerView.adapter = adapter

        // Populate the recycler view with all of the timesheets stored in the local database
        // for a given day
        timesheetsViewModel.getTimesheetsByDate(date)
            .observe(viewLifecycleOwner, {
                it?.let {
                    adapter.submitList(it)
                    onDataLoaded()
                }
            })
    }

To this:

private fun setupRecyclerView(date: String) {
        onDataLoaded()
        
        // Setting up the recycler view adapter and the onClick listener
        val adapter = TimesheetsAdapter(TimesheetListener { id ->
            onPressTimesheet(id)
        })
        binding.timesheetsRecyclerView.adapter = adapter

        // Populate the recycler view with all of the timesheets stored in the local database
        // for a given day
        timesheetsViewModel.getTimesheetsByDate("2021-02-26")
            .observe(viewLifecycleOwner, {
                it?.let {
                    adapter.submitList(it)
                }
            })

    }