Shimmer

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 libraryCreate a placeholder for shimmerApply the effect with live dataConclusionResources 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