Content placeholder animation like Facebook Tutorial using Kotlin

[3147 views]




While loading data from API, instead of using the usual loaders, we can make the loading screen more interesting using Facebook's Shimmer library. We can also do this shimmer effect in our Android App using Shimmer library by Facebook.This library adds Shimmer effect on to any custom view that we define. This can be implemented in the following way:

Include the following in app-level gradle file(build.gradle)

implementation 'com.facebook.shimmer:shimmer:0.1.0'

First we have to design placeholder layout that is similar to RecyclerView's adapter layout.

placeholder.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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="match_parent" android:padding="10dp"> <View android:id="@+id/image_holder" android:layout_width="60dp" android:layout_height="60dp" android:background="@color/placeholder_color" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:id="@+id/name_holder" android:layout_width="0dp" android:layout_height="8dp" android:background="@color/placeholder_color" app:layout_constraintLeft_toRightOf="@+id/image_holder" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_margin="10dp"/> </android.support.constraint.ConstraintLayout>

Include that placeholder layout to the ShimmerLayout.

<com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmerLayout" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/placeholder"/> <include layout="@layout/placeholder"/> <include layout="@layout/placeholder"/> <include layout="@layout/placeholder"/> <include layout="@layout/placeholder"/> <include layout="@layout/placeholder"/> </LinearLayout> </com.facebook.shimmer.ShimmerFrameLayout>

Design adapter layout for RecyclerView.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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_marginTop="5dp"> <android.support.v7.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:elevation="3dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="75dp" android:layout_height="75dp" android:layout_margin="10dp" android:scaleType="centerCrop" android:src="@drawable/user"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:layout_marginBottom="10dp" android:orientation="vertical"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name" android:padding="5dp" /> </LinearLayout> </android.support.v7.widget.CardView> </android.support.constraint.ConstraintLayout>

ShimmerActivity.kt

To start animation, startShimmerAnimation() can be used and for stoping it, stopShimmerAnimation() can be used.Please find below the code:

class ShimmerActivity : AppCompatActivity() { /** Declare variables **/ private var list: MutableList<User> = ArrayList<User>() lateinit var adapter: RecyclerAdapter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.shimmer_layout) shimmerLayout.startShimmerAnimation() Handler().postDelayed( { shimmerLayout.stopShimmerAnimation() shimmerLayout.visibility = View.GONE setValues() },5000) } private fun setValues() { /** Adding values **/ list.add(User("Jeniffer Aniston")) list.add(User("Lara Craft")) list.add(User("Yamilet")) list.add(User("Percy Jackson")) list.add(User("Leo")) list.add(User("Piper Jason")) list.add(User("Thalia Grace")) list.add(User("Frank")) Log.v("list","list=="+list); recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false) adapter = RecyclerAdapter(this@ShimmerActivity, list); recyclerView.adapter = adapter } }

RecyclerAdapter.kt

After this,create an Adapter class for RecyclerView.

class RecyclerAdapter(val context: Context, val data: MutableList<User>) : RecyclerView.Adapter<RecyclerAdapter.ViewHolder>() { override fun onBindViewHolder(holder: ViewHolder?, position: Int) { if (holder != null) holder.bindItems(data.get(position)) } override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): ViewHolder { val v = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false) return ViewHolder(v) } override fun getItemCount(): Int { return data.size } class ViewHolder(itemView: View?) : RecyclerView.ViewHolder(itemView) { fun bindItems(map: User) { itemView.name.text = "Name : " + map.name } } }

Finally, run the application to view the result.

Content placeholder animation like Facebook Tutorial using Kotlin

                 






Comments










Search Anything:

Sponsored Deals ends in





Technical Quizzes Specially For You:

Search Tags