Using MultiStateView

MultiStateView which is essential for using this codebase. MultiStateView is a library that help to control layout based on condition or state. So it is possible to display different layout in the same xml file based on the state.

Getting to know the states¶

MultiStateView support this state:

Empty - for example the data you request is empty
Error - for example the process you requested is error
Loading - for example there's loading period for your action... furthermore, you can implement it with ShimmerLayout
Content - define default state for your layout

Implementation¶

Let's take a look to this example:

<com.kennyc.view.MultiStateView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/msvAll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:msv_animateViewChanges="true"
    app:msv_emptyView="@layout/default_empty_layout"
    app:msv_errorView="@layout/default_error_layout"
    app:msv_loadingView="@layout/layout_shimmer_user"
    app:msv_viewState="loading"
    tools:context=".presentation.main.all.AllUserFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvUserAll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/item_user" />

</com.kennyc.view.MultiStateView>

Define the MultiStateView as root ViewGroup where the state changes. Use this attribute to define implementation:

msv_emptyView - layout to display when the state is empty
msv_errorView - layout to display when the state is error
msv_loadingView - layout to display when the state is loading
msv_animateViewChanges - does the layout changing need to use animation?
msv_viewState - define the first state to display

Every View defined inside MultiStateView will be displayed when the state is CONTENT.

Integration with VmData¶

Date handling in ViewModel is implemented using VmData and can be integrated with MultiStateView:

viewModel.resultApi.observe(this, Observer {
   when (it) {
       is Loading -> {
          msvAll.showLoadingLayout()
          sflUser.startShimmer()
       }
       is Failure -> {
          sflUser.stopShimmer()
          msvAll.showErrorLayout(R.mipmap.ic_launcher, "error", it.message, Pair("try again") {
                vm.getUsersFromPage(currentPage.toString())
          })
       }
       is Empty -> {
          sflUser.stopShimmer()
          msvAll.showEmptyLayout(R.mipmap.ic_launcher, "There's no user to display")
       }
       is Success -> {
          sflUser.stopShimmer()
          msvAll.showDefaultLayout()
       }
   }
})

When observing VmData, change your MultiStateView based on the state using extension function like above.

MultiStateView Extension Function¶

These are functions to call to change MultiStateView's state:

Name	Summary
`showDefaultLayout()`	Method to show content layout of MultiStateView
`showEmptyLayout()`	Method to show empty layout of MultiStateView
`showErrorLayout()`	Method to show error layout of MultiStateView
`showLoadingLayout()`	Method to show loading layout of MultiStateView