The open event attendee is an android app which allows users to discover events happening around the world using the Open Event Platform. It consumes the APIs of the open event server to get a list of available events and can get detailed information about them.
Shimmer effect was created by Facebook to indicate a loading status, so instead of using ProgressBar or the usual loader use Shimmer for a better design and user interface. They also open-sourced a library called Shimmer both for Android and iOS so that every developer could use it for free.
- Add Shimmer library
- Create a placeholder for shimmer
- Apply the effect with live data
- Conclusion
- Resources
Let’s analyze every step in detail.
Add Shimmer Library
Add Shimmer Library to build.gradle :
// Cards Shimmer Animation
implementation 'com.facebook.shimmer:shimmer:0.5.0'
Create reasouces
Add shimmer background color to colors.xml:
<color name="shimmer_background">#dddddd</color>
Create a placeholder layout:
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/layout_margin_medium"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="@dimen/card_corner_radius"
app:cardElevation="@dimen/layout_margin_none"
android:foreground="?android:attr/selectableItemBackground"
android:background="@android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/layout_margin_large"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="@dimen/item_image_view_160dp"
android:scaleType="centerCrop"
android:background="@color/shimmer_background"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="@dimen/layout_margin_medium"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="@dimen/card_width_45dp"
android:layout_height="@dimen/item_image_view"
android:background="@color/shimmer_background"
android:layout_marginEnd="@dimen/padding_large"
android:layout_marginRight="@dimen/padding_large"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_marginTop="@dimen/padding_medium">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="@dimen/padding_large"
android:paddingTop="@dimen/padding_medium">
<View
android:layout_width="match_parent"
android:layout_height="@dimen/view_height_25dp"
android:layout_marginBottom="@dimen/layout_margin_small"
android:background="@color/shimmer_background"/>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/view_height_25dp"
android:background="@color/shimmer_background"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Add shimmer in your fragment/activity layout resources file:
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/shimmer_view_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:orientation="vertical"
shimmer:duration="800">
<!-- Adding 7 rows of placeholders -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
<include layout="@layout/data_placeholder_layout" />
</LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
Apply Shimmer with LiveData
Declare live data variable in view model:
private val mutableShowShimmer = MediatorLiveData<Boolean>()
val showShimmer: MediatorLiveData<Boolean> = mutableShowShimmer
Handle progress in the view model:
compositeDisposable += eventPagedList
.subscribeOn(Schedulers.io())
.doOnSubscribe {
mutableShowShimmer.value = true
}.finally {
mutableShowShimmer.value = false
}
Handle shimmer with observing the live data in fragment/activity:
eventsResultsViewModel.showShimmer
.nonNull()
.observe(viewLifecycleOwner, Observer {
if (it) {
rootView.shimmer_view_container.startShimmer()
} else {
rootView.shimmer_view_container.stopShimmer()
}
rootView.shimmer_view_container.isVisible = it
})
GIF
Resources
Show shimmer progress in Android: https://medium.com/mindorks/android-design-shimmer-effect-fa7f74c68a93
Tags
Eventyay, open-event, Shimmer, Facebook, MVVM, Fossasia, GSoC, Android, Kotlin