4

I am using a TabLayout inside a Fragment. The content of the TabLayout (made of 2 fragments) is displayed but not the title of the tabs. I believe it's a layout problem but i'm not sure on how to fix it. Also what would be the overrided method for ViewPager2 that was used in ViewPager (getPagetitle) ?

main Fragment

    public class CommunityFragment extends Fragment {
    
        private TabLayout tbL;
        private ViewPager2 vp;
        private RecipeViewPagerAdapter rvpa;
    
        public CommunityFragment() {
            // Required empty public constructor
        }
    
        public static CommunityFragment newInstance(){
            return new CommunityFragment();
        }
    
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View rootView = inflater.inflate(R.layout.fragment_community, container, false);
            tbL = rootView.findViewById(R.id.tabL);
            vp = rootView.findViewById(R.id.pager);
            rvpa = new RecipeViewPagerAdapter(this);
            vp.setAdapter(rvpa);
    
            rvpa.addFragment(new AllFragment(),"All time");
            rvpa.addFragment(new DayFragment(),"Today");
            new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
                        @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                            //////title????
                        }
                    }).attach();
            return rootView;
        }
    }

Adapter

    public class RecipeViewPagerAdapter extends FragmentStateAdapter {
    
        private ArrayList<Fragment> listF = new ArrayList<>();
        private ArrayList<String> listT =  new ArrayList<>();
    
        public RecipeViewPagerAdapter(@NonNull Fragment fragment) {
            super(fragment);
        }
    
    
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return listF.get(position);
        }
        //new method ????
        public CharSequence getPageTitle(int position){
            return listT.get(position);
        }
    
        @Override
        public int getItemCount() {
            return listT.size();
        }
    
        public void addFragment(Fragment frag, String title){
            listF.add(frag);
            listT.add(title);
        }
    }

fragment layout

    <LinearLayout 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"
        android:orientation="vertical"
        tools:context=".fragments.CommunityFragment">
    
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabL"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/yellowCool"/>
    
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    
    </LinearLayout>
CoolMind
  • 26,736
  • 15
  • 188
  • 224
eldocwho _tf
  • 49
  • 1
  • 3
  • See also https://stackoverflow.com/questions/55372259/how-to-use-tablayout-with-viewpager2-in-android. – CoolMind Feb 03 '21 at 12:42

4 Answers4

4

put this in your main activity....

myAdapter=new FragmentAdapter(this);
myViewPager2.setAdapter(myAdapter);
       
String [] tabTtiles={"Home","Chat","Notification","Account"};
new TabLayoutMediator(myTabLayout, myViewPager2,(myTabLayout, position) -> 
  myTabLayout.setText(tabTtiles[position])).attach();
Simas Joneliunas
  • 2,890
  • 20
  • 28
  • 35
2

You can use the following adapter for the viewPager2:

public class ViewPagerAdapter extends FragmentStateAdapter {
  private static final int CARD_ITEM_SIZE = 10;
  public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
  }
  @NonNull @Override public Fragment createFragment(int position) {
    return CardFragment.newInstance(position);
  }
  @Override public int getItemCount() {
    return CARD_ITEM_SIZE;
  }
}

on the mainActivity you need to have something inline with the following:

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = findViewById(R.id.view_pager);
    tabLayout = findViewById(R.id.tabs);
    viewPager.setAdapter(new ViewPagerAdapter(this));
    new TabLayoutMediator(tabLayout, viewPager,
        new TabLayoutMediator.TabConfigurationStrategy() {
          @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText("Tab " + (position + 1));
          }
        }).attach();
  }
}
Miguel Tomás
  • 1,714
  • 1
  • 13
  • 23
1

Your tabLayout doesn't display. Use this:

<androidx.viewpager2.widget.ViewPager2
     android:id="@+id/pager"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_weight="1" // add this line
/>

TabLayoutMediator:

new TabLayoutMediator(tbL, vp, new TabLayoutMediator.TabConfigurationStrategy() {
                    @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                        if(position == 0)
                           tab.setText("All time");
                        else
                           tab.setText("Today");
                    }
                }).attach();
Kasım Özdemir
  • 5,414
  • 3
  • 18
  • 35
0

As per documentation:

The TabLayoutMediator object also handles the task of generating page titles for the TabLayout object, which means that the adapter class does not need to override getPageTitle():

And to do that:

    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
    new TabLayoutMediator(tabLayout, viewPager,
            (tab, position) -> tab.setText("OBJECT " + (position + 1))
    ).attach();
Zain
  • 37,492
  • 7
  • 60
  • 84