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


    Mobile Engineer

    OLX Group
    Remote, Portugal, Spain, Romania, Poland
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

, ,

From Scoped Storage to Photo Picker: Everything to know about Storage

Persistence is a core element of every mobile app. Android provides different APIs to access or expose files with different tradeoffs.
Watch Video

From Scoped Storage to Photo Picker: Everything to know about Storage

Yacine Rezgui
Android developer advocate
Google

From Scoped Storage to Photo Picker: Everything to know about Storage

Yacine Rezgui
Android developer ad ...
Google

From Scoped Storage to Photo Picker: Everything to know about Storage

Yacine Rezgui
Android developer advocat ...
Google

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

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