Android Tab Layout

Android Tab-Layout Tutorial

TabLayout is used to implement horizontal tabs. As you see tabs in most of the app like contacts, whatsapp etc.In this blog we learn to define tabs with fragment.

To implement in your project firstly you have to add a support library in gradle file with latest version. com.android.support:design:27.1.1

Then you have to define xml file in which yo have implements the app bar widget with tool bar and a tablayout in it. And a View Pager to scroll or slides the screen.

Now add the fragment by right click on the java folder and take blank fragments with a single text or put the code in it.

Now in MainActivity.java you have to define ViewPager Adapter class and add the following methods.

public class MainActivity extends AppCompatActivity {
    Toolbar tb;
    TabLayout tabLayout;
    ViewPager viewPager;
    ViewPagerAdapter viewPagerAdapter;

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

        tb = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(tb);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);



    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FirstFragment(), "First");
        adapter.addFragment(new SecondFragments(), "Second");
        adapter.addFragment(new thirdFragments(), "Third");


        viewPager.setAdapter(adapter);
    }


    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

       public void addFragment(Fragment fragment,String title)
       {
           mFragmentList.add(fragment);
           mFragmentTitleList.add(title);
       }

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }


        @Override        public int getCount() {
            return mFragmentList.size();
        }

        @Nullable        @Override        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

 To know more Please watch our tablayout tutorial video from below link-

Tabs with Icon & Text

Sometimes you might wanted to add an icon to Tab. Earlier adding an icon to tab is tedious process. But with the design support library it is very easy. All you have to do is call setIcons() method by passing appropriate icon. The icon will be placed in front of tab label.

Use the below code to add or set icons in your tablayout.

private void setupIcons(){
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);

}