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.0'
}
view raw build.gradle hosted with ❤ by GitHub

Job Offers

Job Offers


    Lead Android Engineer

    ASOS
    London
    • Full Time
    apply now

    Senior Android Engineer – Big Release Team

    Zalando SE
    Berlin
    • Full Time
    apply now

    Developer (m/w/d) Backend/ Mobile

    Payback GmbH
    Cologne, Germany
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Behind the Curtains

All smartphones have cameras, and we know we can use specific APIs to get amazing shots. But are they the best cameras? Probably not! What if we wanted to drive an external camera, much more powerful than a smartphone? How would we connect to it, and how would we trigger a shot? This and much more…
READ MORE

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

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Menu