Seil0/teapod
Seil0
/
teapod
1
0
Fork 0
Code Issues 7 Pull Requests Releases 17 Wiki Activity

add shimmer effect while loading to the lists in home fragment

This commit is contained in:
Jannik 2022-09-14 21:31:27 +02:00
parent ebd96f9849
commit 9c3548a866
Signed by: Seil0
GPG Key ID: E8459F3723C52C24
4 changed files with 165 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/build.gradle
View File

@ -69,6 +69,8 @@ dependencies {
implementation "com.google.android.exoplayer:exoplayer-ui:$exo_version"
implementation "com.google.android.exoplayer:extension-mediasession:$exo_version"
implementation 'com.facebook.shimmer:shimmer:0.5.0'
implementation 'com.github.bumptech.glide:glide:4.13.2'
implementation 'jp.wasabeef:glide-transformations:4.3.0'

30
app/src/main/java/org/mosad/teapod/ui/activity/main/fragments/HomeFragment.kt
View File

@ -27,12 +27,15 @@ import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.view.children
import androidx.core.view.isVisible
import androidx.fragment.app.Fragment
import androidx.fragment.app.viewModels
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import com.bumptech.glide.Glide
import com.facebook.shimmer.ShimmerFrameLayout
import kotlinx.coroutines.launch
import org.mosad.teapod.R
import org.mosad.teapod.databinding.FragmentHomeBinding
@ -161,10 +164,35 @@ class HomeFragment : Fragment() {
binding.textHighlightInfo.setOnClickListener {
activity?.showFragment(MediaFragment(uiState.highlightItem.id))
}
// disable the shimmer effect and hide the shimmer layouts
binding.shimmerLayoutUpNext.apply {
stopShimmer()
isVisible = false
}
binding.shimmerLayoutWatchlist.apply {
stopShimmer()
isVisible = false
}
binding.shimmerLayoutRecommendations.apply {
stopShimmer()
isVisible = false
}
binding.shimmerLayoutNewTitles.apply {
stopShimmer()
isVisible = false
}
binding.shimmerLayoutTopTen.apply {
stopShimmer()
isVisible = false
}
}
private fun bindUiStateLoading() {
// currently not used
binding.root.children.filter { it is ShimmerFrameLayout }.forEach {
it as ShimmerFrameLayout
it.startShimmer()
}
}
private fun bindUiStateError(uiState: HomeViewModel.UiState.Error) {

85
app/src/main/res/layout/fragment_home.xml
View File

@ -126,6 +126,23 @@
android:textSize="16sp"
android:textStyle="bold" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_layout_up_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_up_next"
android:layout_width="match_parent"
@ -154,6 +171,23 @@
android:textSize="16sp"
android:textStyle="bold" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_layout_watchlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_watchlist"
android:layout_width="match_parent"
@ -182,6 +216,23 @@
android:textSize="16sp"
android:textStyle="bold" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_layout_recommendations"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_recommendations"
android:layout_width="match_parent"
@ -210,6 +261,23 @@
android:textSize="16sp"
android:textStyle="bold" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_layout_new_titles"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_new_titles"
android:layout_width="match_parent"
@ -238,6 +306,23 @@
android:textSize="16sp"
android:textStyle="bold" />
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_layout_top_ten"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
<include layout="@layout/item_media_shimmer" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_top_ten"
android:layout_width="match_parent"

49
app/src/main/res/layout/item_media_shimmer.xml Normal file
View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="195dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="3dp"
android:backgroundTint="?themeSecondary"
android:visibility="visible"
app:cardCornerRadius="7dp"
app:cardElevation="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/frame_image_progress"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/text_title"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/image_poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/textBackgroundDark"
android:contentDescription="@string/media_poster_desc" />
</FrameLayout>
<TextView
android:id="@+id/text_title"
android:layout_width="128dp"
android:layout_height="wrap_content"
android:layout_margin="11dp"
android:background="@color/textBackgroundDark"
android:textSize="15sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/frame_image_progress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>