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


    Senior Android Engineer

    Busuu
    Madrid
    • Full Time
    apply now

    Softwareentwickler Java und Kotlin / Android (w/m/d)

    AVM GmbH
    Berlin
    • Full Time
    apply now

    Mobile Developer Android (m/w/d) Firebase

    REWE digital
    Köln / Cologne
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

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
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
Nowadays authentication has become common in almost all apps. And many of us know…
READ MORE
blog
Collections are a set of interfaces and classes that implement highly optimised data structures.…
READ MORE
blog
Hi, today I come to you with a quick tip on how to update…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu