3

So I have TabLayout with two TabItems in it. I want the text inside the TabLayout to increase, and when I swipe from the first tab to another I want it to animate it like the text inside first tab gets smaller and the size of text inside the other tab increases.

my TabLayout listener:

        final TabLayout tablayout=(TabLayout)rootview.findViewById(R.id.TabLayout);
        final ViewPager viewPager=rootview.findViewById(R.id.MainActivityPager);
        final TabLayoutAdapter tabLayoutAdapter=new TabLayoutAdapter(getContext(),getChildFragmentManager(),2);
        viewPager.setAdapter(tabLayoutAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
                tabLayoutAdapter.notifyDataSetChanged();
            
            }

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

            }

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

            }
        });

An example: https://imgur.com/gallery/OYz2Z1h

Rag
  • 101
  • 1
  • 11
  • 1
    Does this answer your question? [How to change selected tab title textSize in Android](https://stackoverflow.com/questions/44244469/how-to-change-selected-tab-title-textsize-in-android) – happyvirus Oct 24 '20 at 13:25
  • No,it does not. @happyvirus – Rag Oct 24 '20 at 13:48

1 Answers1

2

While you can set a tab's typeface (e.g. font and style) in code, the only way I've found to set the text size is by defining a custom tab view like below.

Credit: https://stackoverflow.com/a/46972634/6400636

Create XML layout named custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text1"
    android:textColor="?android:attr/textColorPrimary"/>

Code:

// Set a custom view for your tab(s)
TextView customTabView = (TextView) this.getLayoutInflater().inflate(R.layout.custom_tab, null);
tab.setCustomView(customTabView);

tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        tabLayoutAdapter.notifyDataSetChanged();
            
        // Larger font size on select
        TextView customTabView = (TextView) tab.getCustomView();
        customTabView.setTextSize(24f);

        // or animate
        customTabView.setPivotX(0f);
        customTabView.animate()
          .scaleX(1.5f)
          .setInterpolator(LinearInterpolator())
          .setDuration(500)
          .start();
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        // Smaller font size on unselect
        TextView customTabView = (TextView) tab.getCustomView();
        customTabView.setTextSize(18f);
           
        customTabView.setPivotX(0f);
        customTabView.animate()
          .scaleX(1f)
          .setInterpolator(LinearInterpolator())
          .setDuration(500)
          .start();
    }

    ...

});
Thomas Lee
  • 71
  • 1
  • 3
  • Its working but how do I animate switching from first tab to second tab? Like in the gif given above @ThomasLee – Rag Oct 25 '20 at 06:38
  • 1
    Sorry the GIF is quite fast, I can't really tell what's being animated apart from the text size. – Thomas Lee Oct 25 '20 at 08:10
  • Basically,the text "Videos" in the first tab of the gif gets smaller as I swipe to the next tab and the "Folders" text size in second tab increases. I want to implement something like that in my tablayout. – Rag Oct 25 '20 at 09:35
  • 1
    I see. Added some code for how you can animate scale, but this only triggers when a tab is selected/unselected. I'm not sure how to achieve a consistent animation throughout an entire swipe. There may be libraries for that. – Thomas Lee Oct 25 '20 at 11:53
  • Can you tell me any one of the libraries? That would be helpful. @ThomasLee – Rag Oct 25 '20 at 13:03