Shimmer Layout like Facebook in Android - Kotlin

-
While loading data from API, we used to show boring loaders. But in Facebook's app, one loading screen will be displayed. That one looks interesting know. We can also do that shimmer effect in our Andorid App using Shimmer library by Facebook. Let's start.

Implementation:

build.gradle

Include the following in app-level gradle file.

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

colors.xml

Include the following color in values -> colors.xml

 <color name="placeholder_color">#dddddd</color>

Design:

1. First we have to design placeholder layout that is similar to your 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"/>

    <View
        android:id="@+id/phone_holder"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:layout_margin="10dp"
        android:background="@color/placeholder_color"
        app:layout_constraintLeft_toRightOf="@+id/image_holder"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name_holder" />

    <View
        android:id="@+id/location_holder"
        android:layout_width="0dp"
        android:layout_height="8dp"
        android:layout_margin="10dp"
        android:background="@color/placeholder_color"
        app:layout_constraintLeft_toRightOf="@+id/image_holder"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/phone_holder" />


</android.support.constraint.ConstraintLayout>

2. Then include that placeholder layout to the ShimmerLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <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>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

3. Next design adapter layout for RecyclerView.

list_item.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="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" />

                <TextView
                    android:id="@+id/phone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="5dp"
                    android:paddingRight="5dp"
                    android:text="453345435"
                    />

                <TextView
                    android:id="@+id/location"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="Madurai"/>

            </LinearLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Code:

ShimmerActivity.kt

Here, we can show the shimmer Layout before setting the values to ArrayList. For starting animation, startShimmerAnimation() can be used and for stoping it, stopShimmerAnimation() can be used.

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","9876543210", "San Francisco"))
        list.add(User("Lara Craft","9876543210","Ohio"))
        list.add(User("Yamilet","9876543210","Canada"))
        list.add(User("Percy Jackson","956732710","California"))
        list.add(User("Leo","9876543210", "Rio"))
        list.add(User("Piper Jason","9876543210", "California"))
        list.add(User("Thalia Grace","9876543210", "Norway"))
        list.add(User("Frank","95673210","NewYork"))

        Log.v("list","list=="+list);

        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)
        adapter = RecyclerAdapter(this@ShimmerActivity, list);
        recyclerView.adapter = adapter
    }
}

RecyclerAdapter.kt

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
            itemView.phone.text = "Phone : " + map.phone
            itemView.location.text = "Phone : " + map.location
        }
    }
}

Run Application:

Finally, the app will be as follows:


Comments

Post a Comment

Popular posts from this blog

SOAP Client using ksoap2 in Android - Kotlin

-
Image
Introduction: SOAP stands for Simple Object Access Protocol. It is XML-based protocol that allows programs that run on different operating systems (like Windows, Linux, etc) to communicate using HTTP and XML. Pros: Security - SOAP provides its own security known as WS Security . Platform Independent - SOAP web services can be written in any programming language and executed in any platform Cons: Slow - It uses XML format that must be parsed, to be read. It defines many standards to be followed while developing. So its slow and consumes more bandwidth and resource. WSDL dependent - It uses WSDL mechanism and doesn't have any other mechanism to discover the service. Things to know: The following are the things we have to know before we proceed further:                     URL - It is the URL of WSDL file.                     NAMESPACE - It is ta...
Read more

Exploring Databinding Library in Android - Kotlin

-
Image
Introduction: Data binding library is a support library, which allows us to bind data sources directly to UI components of layout file. Binding components this way, reduces boilerplate code in our business logic where we usually update UI when new data is available. It also improves app's performance and helps to prevent memory leak and NullPointerException. textView.text = user.name can be written simply in layout as follows, and no need to write in Activity class.                                                             <TextView                                                                   ...            ...
Read more

RecyclerView with different number of columns using SpanSizeLookup

-
Image
We already know how to design RecyclerView. But how to create RecyclerView with different columns depending on its row? Like below image? Yeah, we can do that, by using two different layouts with different viewType on Adapter. Another way is do some logic to do so. But, it's cumbersome. Luckily, we have another simple way to do that using SpanSizeLookUp . Let's see how to implement that in this post. Implementation: build.gradle Include the following in app-level gradle file. implementation 'com.android.support:recyclerview-v7:27.0.2' implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta5' recycler.xml <?xml version= "1.0" encoding= "utf-8" ?> <android.support.constraint.ConstraintLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent" android:layout_height= "match_parent" xmlns:ap...
Read more

Exploring Android Slices - JetPack

-
Image
Introduction: Slices are a new way of embedding our app's content in other surfaces, like Google Search and later in other places like Google Assistant. Slices are UI templates, which gives look and feel at home in whatever surface, they get hosts in. Also they are rich, interactive and dynamically updatable. Before jumping into that, first migrate your project to AndroidX, (Android Studio 3.2 & above), by navigating as,                                         Refactor --> Migrate  to AndroidX  Setup: build.gradle implementation 'androidx.slice:slice-core:1.0.0' implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha6' implementation 'androidx.slice:slice-builders:1.0.0' Creating Slice Provider: Slice Provider is a component that let us display the slices we are creating, on outside our application. We can create the Slice Pro...
Read more

FCM Integration in Android - Kotlin

-
Image
                                               Firebase Cloud Messaging inherits GCM’s core infrastructure but simplifies the client development. It works for all platforms (Android, IOS and Web). Let's see how to integrate FCM in Android with Kotlin. FCM Messages:         Two types of FCM messages are there.      Notification messages,  which are handled by the FCM SDK automatically.      Data messages, which are handled by the client app. It can have custom fields, which have to be sent by our server. 1. Configure FCM in Firebase Console (a) Go to https://console.firebase.google.com/ (b) Then click Add Project , a...
Read more

Using Camera in Android - Kotlin

-
Image
Nowadays, most of our Android app require access to Camera to capture picture or Video. We can do that in two ways.                                 (i) Using built-in Camera,                                 (ii) Using custom Camera. Using Built-in Camera In this post, Let's see how to use the built-in camera to capture images and save it. Its a simple way to capture pics. We can use the mobile's built-in camera app using Intent.  val REQUEST_IMAGE_CAPTURE = 1 private fun takePictureIntent() { val takePictureIntent = Intent(MediaStore . ACTION_IMAGE_CAPTURE) if (takePictureIntent . resolveActivity(packageManager) != null) { startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE) } } After the picture has been captured, the result will received on on...
Read more

Map, Location update and AutoComplete Places - Kotlin

-
Image
Let's see how to show current location in Maps and also show the location which is chosen from AutoComplete in Maps with the updated Google play services. That is, for location listening we gonna use   FusedLocationProviderClient and for autocomplete places, we gonna use, GeoDataClient with AutoCompletePrediction, i.e., no need to call places url from our end, Google Playservices will do that work for you. Okiee, Let's start now. You can find the project in Github . PreRequisite: Navigate to  https://developers.google.com/maps/documentation/android-api/signup and do as per the instructions to start. Manifest: Include your API key, which you got from previous step in AndroidManifest.xml <meta-data android:name= "com.google.android.geo.API_KEY" android:value= "AIzXXXXXXXXXX_XXXXXXXXXXXXXX" /> Gradle: Include the following in app-level build 's dependencies. implementation 'com...
Read more

Retrofit Integration in Android - Kotlin

-
Image
Retrofit is a Networking library, which is faster to use and easier to develop. Let’s see how to integrate Retrofit in Android with Kotlin. If you'd like to integrate RxJava as well, you can check here . 1. Configure: Include the following in app-level build.gradle. build.gradle compile "com.squareup.retrofit2:retrofit:2.3.0" compile "com.squareup.retrofit2:converter-gson:2.3.0" Include internet permission in Manifest file. AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET" /> 2. Preparing Helper classes: ApiInterface.kt interface ApiInterface {    @POST("get_users_detail") // Your url    fun getUser(@Body requestBody: RequestBody): Call<UserResponse> } Model classes:                      Response from Retrofit will be stored in POJO classes dir...
Read more

Exploring Android Navigation Architecture Component - MVVM - Kotlin

-
Image
Navigation Architecture Component is released as a part of JetPack and androidx package. Its aim is to simplify the implementation of Navigation in our Android App. It defines a set of principles to build an in-app navigation with consistent and predictable user experience. Its main concept is to use single-activity architecture. It also has support for both Activity and Fragment. Principle of Navigation: The following are the principles of Navigation. App should have fixed starting destination A stack is used to represent the navigation state of app The 'Up' button never exits the app Up and Back are equivalent within your app's task Deep linking to a destination or navigating to the same destination should yield the same stack You can find the detailed explanation, here . Components of Navigation: (i) Navigation Graph - It's nothing but a map/blueprint of our in-app navigation. It has a list of all fragments and activities. We can also ...
Read more

Databinding in RecyclerView - Android - Kotlin

-
Image
Hey Guyss!! Already we have seen the basics of Databinding and how to use it in previous  post . Now let's see how to use Databinding in RecyclerView . And Its gonna be a short post. ;) You can find the Project in GitHub . Prerequisite: build.gradle First, we have enable dataBinding in app-level build.gradle                           android {                                     dataBinding {                                             enabled = true                                     }                            } Next, we hav...
Read more