[Android] RecyclerView animated transition between Grid and List layouts.
If you have a RecyclerView that can display data both in a grid and a list you may think about making transition between them animated. And this article shows how to achieve this easily 🙂.
- Assuming that you already have RecyclerView your layout should look something like this:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
2. First of all we need to initialise GridLayoutManager for our RecyclerView. I have initialisation code in onCreate()
function of my activity.
class MainActivity : AppCompatActivity() {
private var layoutManager: GridLayoutManager? = null
...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
layoutManager = GridLayoutManager(this, 3)
recyclerView.layoutManager = layoutManager
...
}
...
}
3. The next step is to create adapter. I’ve written `SimpleAdapter` class that has link to layoutManager of our recycler view.
class SimpleAdapter(
private val layoutManager: GridLayoutManager? = null
) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
... override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return ...
}
override fun onBindViewHolder(p0: RecyclerView.ViewHolder, p1: Int) {
}
override fun getItemCount() = 5
override fun getItemViewType(position: Int): Int {
...
}
}
And attach it to RecyclerView in onCreate()
of activity. Now it should look like this:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
layoutManager = GridLayoutManager(this, 3)
recyclerView.layoutManager = layoutManager
adapter = SimpleAdapter(layoutManager)
recyclerView.adapter = adapter
}
4. The last but not the least step — create 2 view holders for different modes.
and
Layout for simple_item.xml :
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="144dp"
android:layout_margin="8dp"
android:background="@color/colorPrimaryDark" />
Layout for detailed_item.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="144dp"
android:layout_margin="8dp"
android:background="@color/colorPrimaryDark" />
We’ve finished with the preparatory work and now the magic begins✨
To make recycler view animated we need to change the spanCount in our layout manager and call adapter.notifyItemRangeChanged()
for all adapter items. I have button in menu so my code to handle layout changes looks like this:
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
when (item?.itemId) {
R.id.change_layout -> {
if (layoutManager?.spanCount == 1) {
layoutManager?.spanCount = 3
item.title = "list"
} else {
layoutManager?.spanCount = 1
item.title = "grid"
}
adapter?.notifyItemRangeChanged(0, adapter?.itemCount ?: 0)
}
}
return super.onOptionsItemSelected(item)
}
And in adapter create the different view holders depending on mode:
Voila! You have animated transition between grid and list modes in recycler view 😀.
The whole project can be found here — https://github.com/alla-dubovska/animation-example