Blog Infos
Author
Published
Topics
,
Published
Implement your first synchronized scrolling in Android

Telegram’s emoji section synchronization

Telegram’s emoji section synchronization

Let’s make a sample app to demonstrate the synchronization.
Prerequisites:
Follow these steps:
1- Make some models in order to display them as items in the RecyclerView:
class Item(val content: String) {
}
view raw Item.kt hosted with ❤ by GitHub

And a Category class that will be nesting a list of items:

class Category(val name: String, vararg item: Item) {
val listOfItems: List<Item> = item.toList()
}
view raw Category.kt hosted with ❤ by GitHub

And therefore, our example list is going to be initialized like this:

private val categories = mutableListOf(
Category(
"Category 1",
Item("Item 1"),
Item("Item 2"),
Item("Item 3"),
Item("Item 4"),
Item("Item 5"),
Item("Item 6")
),
...
...
...
Category(
"Category 5",
Item("Item 1"),
Item("Item 2"),
Item("Item 4"),
Item("Item 5"),
),
)
view raw MainActivity.kt hosted with ❤ by GitHub
2- Create your xml file that contains your TabLayout and RecyclerView:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ui.MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorAnimationMode="elastic"
app:tabMode="scrollable" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:nestedScrollingEnabled="true"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tabLayout"
tools:listitem="@layout/item_category" />
</androidx.constraintlayout.widget.ConstraintLayout>
3- Initialize your RecyclerView and TabLayout adapters with their data:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews()
initTabLayout()
initRecycler()
}
private fun initViews() {
tabLayout = findViewById(R.id.tabLayout)
recyclerView = findViewById(R.id.recyclerView)
}
private fun initTabLayout() {
for (category in categories) {
tabLayout.addTab(tabLayout.newTab().setText(category.name))
}
}
private fun initRecycler() {
recyclerView.adapter = CategoriesAdapter(this, categories)
}
view raw MainActivity.kt hosted with ❤ by GitHub
4- Add the library’s dependencies:
allprojects {
repositories {
...
mavenCentral()
}
}
view raw build.gradle hosted with ❤ by GitHub

Add dependency of the synchronizer library in your app’s build.gradle:

dependencies {
implementation 'io.github.ahmad-hamwi:tabsync:1.0.1'
}
view raw build.gradle hosted with ❤ by GitHub

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

No results found.

Jobs

5- Create a TabbedListMediator object and pass the required parameters:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initViews()
initTabLayout()
initRecycler()
initMediator() // NEW
}
private fun initMediator() {
TabbedListMediator(
recyclerView,
tabLayout,
categories.indices.toList()
).attach()
}
view raw MainActivity.kt hosted with ❤ by GitHub
And the results are:

TabSync in action!

 

You may find it more smooth to look at if it smooth scrolls to the required destination, and for that case, you can add a fourth parameter to the constructor for smooth scrolling:

private fun initMediator() {
TabbedListMediator(
recyclerView,
tabLayout,
categories.indices.toList(),
true // NEW
).attach()
}
view raw MainActivity.kt hosted with ❤ by GitHub
Results with smooth scroll on:

TabSync with smooth scroll flagged

 

Here’s a preview of our in-production app FoodVibes:

FoodVibes’s implementation of TabSync

 

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
This tutorial teaches us how to display the most popular YouTube video content in…
READ MORE
blog
RecyclerView is a really cool and powerful tool to display list(s) of content on Android.…
READ MORE
blog
Hi everyone! We (Kaspresso Team and AvitoTech) are back with more about automated Android testing. Previously…
READ MORE
blog
I wanted to cover everything that you might need in your project. Hopefully this…
READ MORE
Menu