How to create Tabs with icons and text TabLayout android

Question

I am working on an android app and wants to create a layout like below.

I want to make the Tabs same as shown in this layout which will be scrolling horizontally. I want to set the icons of reactions and text on these tabs. The Icons are the server images which I need to show, but I have no idea how can I show server url images in the tabs as icons.

Is there any other way of making this layout except TabLayout or Sliding TabLayout with which I can get the same UI as in image?

Please help if anyone know how to do this.

Answer 1

ViewPager Adapter

public class ViewPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 2;
private Context mContext;
private String[] tabText;



public ViewPagerAdapter(FragmentManager fragmentManager, Context context) {
    super(fragmentManager);
    this.mContext = context;
    this.tabText = new String[]{
            "First tab",
            "second tab"
    };



}

@Override
public Fragment getItem(int position) {
    switch (position) {
        case 0:
            return new FirstFragment();
        case 1:
            return new SecondFragment();
        default:
            return null;
    }
}

@Override
public int getCount() {
    return NUM_ITEMS;
}

  @Override
  public CharSequence getPageTitle(int position) {
   return tabText[position];
 }

}

MainActivity.Java

    private int[] imageResId = {// icon resource };
    mTabLayout = (TabLayout) view.findViewById(R.id.tl_viewer);
    mViewpager = (ViewPager) view.findViewById(R.id.vp_viewer);
    mTabLayout.setupWithViewPager(mViewpager);


   //Method to set up tab layout icon
   private void setUpTabIcon() {
    for (int i = 0; i < mTabLayout.getTabCount(); i++) {

        mTabLayout.getTabAt(i).setIcon(imageResId[i]);


    }

}

Tab count and Tab text picked from ViewPager Adapter. and icon picked from setTabIcon method

Answer 2

Please use Below link of Android hive. Android Hive Explain very well for working with TabLayout -

http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Answer 3

You will need to have an custom layout for your tabs. See this link How to set icon next to text in tablayout

And to answer your another query of displaying the server images, you can use a library for that purpose like http://square.github.io/picasso/