Search code examples
androidandroid-studioandroid-tablayout

How to set icon next to text in tablayout


I am working on Tablayout with text and icon from the following tutorial ..

My question is how to make the icon placed next to the text instead of above them? I am new in Android Development, hopefully you guys can help me out. Thank you in advance, really appreciate the answer..

enter image description here

Here is my java file

public class AllProducts extends AppCompatActivity {

public ViewPager viewPager;
public TabLayout tabLayout;
    public int[] tabIcons = {
    R.drawable.ic_directions_car_white_24dp,
    R.drawable.ic_motorcycle_white_24dp,
    R.drawable.ic_build_white_24dp
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.all_products);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setDisplayShowHomeEnabled(true);


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

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

}

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


private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new Tab1(), "CAR");
    adapter.addFragment(new Tab2(), "MOTORCYCLE");
    adapter.addFragment(new Tab3(), "OTHERS");
    viewPager.setAdapter(adapter);
}

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

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

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

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

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

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            finish();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

}


Solution

  • It's easy.

    Tab tab = tabLayout.newTab();
    tab.setCustomLayout( R.layout.whatever );
    tabLayout.addTab(add);
    

    Your layout would be a simple TextView with a drawableRight that specifies your icon.

    For more: http://panavtec.me/playing-with-the-new-support-tablayout/