如何将 TabLayout 与 Recyclerview 同步？

Question

I have a TabLayout with Recyclerview so that when tabs are clicked then the Recyclerview is scrolled to a particular position. I want the reverse procedure as well such that when the Recyclerview is scrolled to a particular position then the particular tab is highlighted.

For example: If there are 4 tabs in the TabLayout and when Recyclerview is scrolled to 5th position (item visible and below TabLayout ) then 3rd tab should be highlighted.

Here when 'How it works' appears below TabLayout then tabs 'How it works' should be highlighted.

Answer 1

Try this

follow this steps

1. Add a ScrollListener to your RecyclerView
2. than find first visible item of your RecyclerView
3. set the select the tab in TabLayout as per position of your RecyclerView

SAMPLE CODE

    myRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            int itemPosition=linearLayoutManager.findFirstCompletelyVisibleItemPosition();

            if(itemPosition==0){ //  item position of uses
                TabLayout.Tab tab = myTabLayout.getTabAt(Index);
                tab.select();
            }else if(itemPosition==1){//  item position of side effects 
                TabLayout.Tab tab = myTabLayout.getTabAt(Index);
                tab.select();
            }else if(itemPosition==2){//  item position of how it works
                TabLayout.Tab tab = myTabLayout.getTabAt(Index);
                tab.select();
            }else if(itemPosition==3){//  item position of precaution 
                TabLayout.Tab tab = myTabLayout.getTabAt(Index);
                tab.select();
            }
        }
    });

EDIT

public class MyActivity extends AppCompatActivity {


    RecyclerView myRecyclerView;
    TabLayout myTabLayout;
    LinearLayoutManager linearLayoutManager;
    ArrayList<String> arrayList = new ArrayList<>();
    DataAdapter adapter;
    private boolean isUserScrolling = false;
    private boolean isListGoingUp = true;




    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        myTabLayout = findViewById(R.id.myTabLayout);



        myRecyclerView = findViewById(R.id.myRecyclerView);
        linearLayoutManager = new LinearLayoutManager(this);
        myRecyclerView.setLayoutManager(linearLayoutManager);
        myRecyclerView.setHasFixedSize(true);

        for (int i = 0; i < 120; i++) {
            arrayList.add("Item " + i);
        }

        adapter= new DataAdapter(this,arrayList);
        myRecyclerView.setAdapter(adapter);

        myTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                isUserScrolling = false ;
                int position = tab.getPosition();
                if(position==0){
                    myRecyclerView.smoothScrollToPosition(0);
                }else if(position==1){
                    myRecyclerView.smoothScrollToPosition(30);
                }else if(position==2){
                    myRecyclerView.smoothScrollToPosition(60);
                }else if(position==3){
                    myRecyclerView.smoothScrollToPosition(90);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        myRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
                    isUserScrolling = true;
                    if (isListGoingUp) {
                        //my recycler view is actually inverted so I have to write this condition instead
                        if (linearLayoutManager.findLastCompletelyVisibleItemPosition() + 1 == arrayList.size()) {
                            Handler handler = new Handler();
                            handler.postDelayed(new Runnable() {
                                @Override
                                public void run() {
                                    if (isListGoingUp) {
                                        if (linearLayoutManager.findLastCompletelyVisibleItemPosition() + 1 == arrayList.size()) {
                                            Toast.makeText(MyActivity.this, "exeute something", Toast.LENGTH_SHORT).show();
                                        }
                                    }
                                }
                            }, 50);
                            //waiting for 50ms because when scrolling down from top, the variable isListGoingUp is still true until the onScrolled method is executed
                        }
                    }
                }

            }
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                int itemPosition = linearLayoutManager.findFirstVisibleItemPosition();


                if(isUserScrolling){
                    if (itemPosition == 0) { //  item position of uses
                        TabLayout.Tab tab = myTabLayout.getTabAt(0);
                        tab.select();
                    } else if (itemPosition == 30) {//  item position of side effects
                        TabLayout.Tab tab = myTabLayout.getTabAt(1);
                        tab.select();
                    } else if (itemPosition == 60) {//  item position of how it works
                        TabLayout.Tab tab = myTabLayout.getTabAt(2);
                        tab.select();
                    } else if (itemPosition == 90) {//  item position of precaution
                        TabLayout.Tab tab = myTabLayout.getTabAt(3);
                        tab.select();
                    }
                }



            }
        });


    }


}

Answer 2

private fun syncTabWithRecyclerView() {

        // Move recylerview to the position selected by user
        menutablayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                if (!isUserScrolling) {
                    val position = tab.position
                    linearLayoutManager.scrollToPositionWithOffset(position, 0)
                }


            }

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabReselected(tab: TabLayout.Tab) {
            }
        })

        // Detect recyclerview position and select tab respectively.
        menuRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {

            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
                    isUserScrolling = true
                }  else if (newState == RecyclerView.SCROLL_STATE_IDLE) 
                    isUserScrolling = false
                }
            }

            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                if (isUserScrolling) {
                    var itemPosition = 0
                    if (dy > 0) {
                      // scrolling up
                       itemPosition = linearLayoutManager.findLastVisibleItemPosition()
                    } else {
                      // scrolling down
                       itemPosition = linearLayoutManager.findFirstVisibleItemPosition()
                    }
                    val tab = menutablayout.getTabAt(itemPosition)
                    tab?.select()
                }
            }
        })
    }

Answer 3

I figured you don't even need those flags and it was enough to override RecyclerView's onScrolled and select tab and scroll to position when tab is selected and that Tab wasn't already selected:

override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
     val llm = recyclerView.layoutManager as LinearLayoutManager

     // depending on sections'heights one may want to add more logic 
     // on how to determine which section to scroll to
     val firstCompletePos = llm.findFirstCompletelyVisibleItemPosition()

     if (firstCompletePos != tabLayout.selectedTabPosition)
         tabLayout.getTabAt(firstCompletePos)?.select()
}

Then I have a TextView which is set as customView to tabLayout:

tabLayout.addTab(newTab().also { tab ->
         tab.customView = AppCompatTextView(context).apply {
             // set layout params match_parent, so the entire section is clickable
             // set style, gravity, text etc.
             setOnClickListener { 
                tabLayout.selectTab(tab)

                recyclerView.apply {
                    val scrollTo = tabLayout.selectedTabPosition
                    smoothScrollToPosition(scrollTo)
                }
             }
          }
})

With this setup you have:

1. Tab selected when user both scrolls and flings
2. RecyclerView is scrolled when user clicks on the tab.

Answer 4

I use information from another answers but here is some omissions in code, that makes it not complete and bad working. My solution 100% work without lags. Photo of complete screen you may see in the end.

This is the code inside Fragment :

private val layoutManager get() = recyclerView?.layoutManager as? LinearLayoutManager

/**
 * [SmoothScroller] need for smooth scrolling inside [tabListener] of [recyclerView] 
 * to top border of [RecyclerView.ViewHolder].
 */
private val smoothScroller: SmoothScroller by lazy {
    object : LinearSmoothScroller(context) {
        override fun getVerticalSnapPreference(): Int = SNAP_TO_START
    }
}

/**
 * Variable for prevent calling of [RecyclerView.OnScrollListener.onScrolled]
 * inside [scrollListener], when user click on [TabLayout.Tab] and 
 * [tabListener] was called.
 *
 * Fake calls happens because of [tabListener] have smooth scrolling to position,
 * and when [scrollListener] catch scrolling and call [TabLayout.Tab.select].
 */
private var isTabClicked = false

/**
 * Variable for prevent calling of [TabLayout.OnTabSelectedListener.onTabSelected]
 * inside [tabListener], when user scroll list and function 
 * [RecyclerView.OnScrollListener.onScrolled] was called inside [scrollListener].
 *
 * Fake calls happens because [scrollListener] contains call of [TabLayout.Tab.select],
 * which in turn calling click handling inside [tabListener].
 */
private var isScrollSelect = false

private val scrollListener = object : RecyclerView.OnScrollListener() {

    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        /**
         * Reset [isTabClicked] key when user start scroll list.
         */
        if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
            isTabClicked = false
        }
    }

    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        /**
         * Prevent scroll handling after tab click (see inside [tabListener]).
         */
        if (isTabClicked) return

        val commonIndex = commonIndex ?: return
        val karaokeIndex = karaokeIndex ?: return
        val socialIndex = socialIndex ?: return
        val reviewIndex = reviewIndex ?: return
        val addIndex = addIndex ?: return

        when (layoutManager?.findFirstVisibleItemPosition() ?: return) {
            in commonIndex until karaokeIndex -> selectTab(TabIndex.COMMON)
            in karaokeIndex until socialIndex -> selectTab(TabIndex.KARAOKE)
            in socialIndex until reviewIndex -> {
                /**
                 * In case if [reviewIndex] can't reach top of the list,
                 * to become first visible item. Need check [addIndex] 
                 * (last element of list) completely visible or not.
                 */
                if (layoutManager?.findLastCompletelyVisibleItemPosition() != addIndex) {
                    selectTab(TabIndex.CONTACTS)
                } else {
                    selectTab(TabIndex.REVIEWS)
                }
            }
            in reviewIndex until addIndex -> selectTab(TabIndex.REVIEWS)
        }
    }

    /**
     * It's very important to skip cases when [TabLayout.Tab] is checked like current,
     * otherwise [tabLayout] will terribly lagging on [recyclerView] scroll.
     */
    private fun selectTab(@TabIndex index: Int) {
        val tab = tabLayout?.getTabAt(index) ?: return
        if (!tab.isSelected) {
            recyclerView?.post {
                isScrollSelect = true
                tab.select()
            }
        }
    }
}

private val tabListener = object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) = scrollToPosition(tab)

    override fun onTabUnselected(tab: TabLayout.Tab?) = Unit

    /*
     * If user click on tab again.
     */
    override fun onTabReselected(tab: TabLayout.Tab?) = scrollToPosition(tab)

    private fun scrollToPosition(tab: TabLayout.Tab?) {
        /**
         * Prevent scroll to position calling from [scrollListener].
         */
        if (isScrollSelect) {
            isScrollSelect = false
            return
        }

        val position = when (tab?.position) {
            TabIndex.COMMON -> commonIndex
            TabIndex.KARAOKE -> karaokeIndex
            TabIndex.CONTACTS -> socialIndex
            TabIndex.REVIEWS -> reviewIndex
            else -> null
        }

        if (position != null) {
            isTabClicked = true

            smoothScroller.targetPosition = position
            layoutManager?.startSmoothScroll(smoothScroller)
        }
    }
}

private val commonIndex get() = adapter.list.validIndexOfFirst { it is ClubScreenItem.Info }
private val karaokeIndex get() = adapter.list.validIndexOfFirst { it is ClubScreenItem.Karaoke }
private val socialIndex get() = adapter.list.validIndexOfFirst { it is ClubScreenItem.Social }
private val reviewIndex get() = adapter.list.validIndexOfFirst { it is ClubScreenItem.ReviewHeader }
private val addIndex get() = adapter.list.validIndexOfFirst { it is ClubScreenItem.AddReview }

Extension:

private const val ND_INDEX = -1

fun <T> List<T>.validIndexOfFirst(predicate: (T) -> Boolean): Int? {
    return indexOfFirst(predicate).takeIf { it != ND_INDEX }
}

TabIndex class for getting tab by position:

@IntDef(TabIndex.COMMON, TabIndex.KARAOKE, TabIndex.CONTACTS, TabIndex.REVIEWS)
private annotation class TabIndex {
    companion object {
        const val COMMON = 0
        const val KARAOKE = 1
        const val CONTACTS = 2
        const val REVIEWS = 3
    }
}

And it's how looks my ClubScreenItem :

sealed class ClubScreenItem {
    class Info(val data: ClubItem): ClubScreenItem()
    ...
    class Karaoke(...): ClubScreenItem()
    class Social(...): ClubScreenItem()
    ...
    class ReviewHeader(...): ClubScreenItem()
    ...
    object AddReview : ClubScreenItem()
}

This is how looks screen:

Answer 5

Try this,

Simple Step :

1. Detect RecyclerView scroll state
2. Use findFirstVisibleItemPosition() to return the adapter position of the first visible view
3. Change the tab based on RecyclerView item position
4. Done

 private fun syncTabWithRecyclerView() {
        var isUserScrolling = false
        val layoutManager = binding.recyclerViewGroup.layoutManager as LinearLayoutManager

        val tabListener = object : TabLayout.OnTabSelectedListener {
                override fun onTabSelected(tab: TabLayout.Tab?) {
                    val tabPosition = tab?.position
                    if (tabPosition != null) {
                        viewModel.setTabPosition(tabPosition)
                        
                        // prevent RecyclerView to snap to its item start position while user scrolling,
                        // idk how to explain this XD
                        if (!isUserScrolling){
                            layoutManager.scrollToPositionWithOffset(tabPosition, 0)
                        }
                    }
                }
                override fun onTabUnselected(tab: TabLayout.Tab?) {}
                override fun onTabReselected(tab: TabLayout.Tab?) {}
            }

        binding.tabLayout.addOnTabSelectedListener(tabListener)

        // Detect recyclerview scroll state
        val onScrollListener = object : RecyclerView.OnScrollListener() {
            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
                if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
                    isUserScrolling = true
                } else if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    isUserScrolling = false
                }
            }

            // this just represent my tab name using enum class ,
            // and ordinal is just the index of its position in enum
            val hardcase3D = CaseType.HARDCASE_3D.ordinal
            val softcaseBlackmatte = CaseType.SOFTCASE_BLACKMATTE.ordinal
            val softcaseTransparent = CaseType.SOFTCASE_TRANSPARENT.ordinal


            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                if (isUserScrolling) {
                    when (layoutManager.findFirstVisibleItemPosition()) {
                        in hardcase3D until softcaseBlackmatte -> {
                            viewModel.setTabPosition(hardcase3D)
                        }
                        in softcaseBlackmatte until softcaseTransparent -> {
                            viewModel.setTabPosition(softcaseBlackmatte)
                        }
                        softcaseTransparent -> {
                            viewModel.setTabPosition(softcaseTransparent)
                        }
                    }
                }
            }
        }

        binding.recyclerViewGroup.addOnScrollListener(onScrollListener)
    } 

viewModel , you can simply use liveData if you want

private var _tabPosition = MutableStateFlow(CaseType.HARDCASE_3D)
    val tabPostition : StateFlow<CaseType>
        get() = _tabPosition

 fun setTabPosition(position: Int){
        _tabPosition.value = CaseType.values()[position]
    }

Observer

lifecycleScope.launch(Dispatchers.Default) {
            viewModel.tabPostition.collect { caseType ->
                val positionIndex = CaseType.values().indexOf(caseType)
                handleSelectedTab(positionIndex)
            }
        }

and handleSelectedTab

private fun handleSelectedTab(index: Int) {
       val tab = binding.tabLayout.getTabAt(index)
       tab?.select()
    }

enum

enum class CaseType(val caseTypeName:String) {
    HARDCASE_3D("Hardcase 3D"),
    SOFTCASE_BLACKMATTE("Softcase Blackmatte"),
    SOFTCASE_TRANSPARENT("Softcase Transparent")
}