How to set icon next to text in tablayout

Question

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..

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);
    }
}

}

Droplight

So, you are adding custom layouts for this? – Tenon

Nope, I just code them in java.. Sorry I already posted the code.. – Droplight

Is there any issue with using custom layouts? – Tenon

I need to use custom layout inorder to put icon next to the text? – Droplight

You can use simple TextView for that – Tenon

Answer 1

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/

Ilia

My problem with this method is that when you set a custom layout in the tab, the Tablayout is no longer able to automatically switch the text color based on whether the tab is selected or not. Any idea of how to make that work too? – Clementineclementis

Answer 2

Another solution is setting the app:tabInlineLabel="true" in your activity .xml or call the TabLayout method setInlineLabel(true).

Source

Auvil