CODEWITHSUNDEEP
androidandroid-studioandroid-tablayout
Zubli Quzaini
Zubli Quzaini

Reputation: 352

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

}

Upvotes: 7

Views: 11888

Answers (2)

HiddenMined
HiddenMined

Reputation: 101

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

Source

Upvotes: 10

An SO User
An SO User

Reputation: 25028

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/

Upvotes: 5

Related Questions