how to add the icon for swipeable tabs

Question

I am downloading the code from here i want to dispaly tabs with icon how can posssible please help me.

enter image description here

 public class MainActivity extends FragmentActivity implements
            ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Text", "Photo", "Record" ,"Tag"};


    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        final int[] ICONS = new int[] {
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
            R.drawable.ic_launcher,
    };

        viewPager.setAdapter(mAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));


        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

}

Ojonugwa Jude Ochalifu · Answer 1 · 2016-07-07T14:14:25.313

27

If you are using a TabLayout, just do this (This example uses three tabs):

 //An array containing your icons from the drawable directory
 final int[] ICONS = new int[]{
            R.drawable.icon_1,
            R.drawable.icon_2,
            R.drawable.icon_3
    };

    //Get reference to your Tablayout
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);

    tabLayout.getTabAt(0).setIcon(ICONS[0]);
    tabLayout.getTabAt(1).setIcon(ICONS[1]);
    tabLayout.getTabAt(2).setIcon(ICONS[2]);

edited Jul 07 '16 at 14:14

answered Dec 31 '15 at 05:55

Ojonugwa Jude Ochalifu

26,627
26
120
132

1

Thanks! This one worked for me. Solutions on other related SO questions are flagging "deprecated". – Woppi Nov 21 '16 at 09:30

score 25 · Answer 2 · edited Jul 17 '14 at 19:24

25

Add .setIcon(resources.getDrawable(DrawableIDHere)) in your for loop, and also alter your for loop a bit.

// Adding Tabs
for (int i=0; i < tabs.length; i++)
{
actionBar.addTab(actionBar.newTab().setText(tabs[i])
                         .setIcon(resources.getDrawable(ICONS[i]))
                         .setTabListener(this));
}//endfor

Also, don't forget to put the right drawable ID's in your ICONS array!

edited Jul 17 '14 at 19:24

Software Engineer

15,457
7
74
102

answered Feb 03 '14 at 23:47

Jake JediMastr Ellis

279
3
6

1

.setIcon(resources.GetDrwable(ICONS[i])) resources cannot be resolved error.. what is this?? – Shankar Regmi Jun 22 '14 at 04:03
1

you need to use `getResources()` instead – Ojonugwa Jude Ochalifu May 27 '15 at 07:13

ofaruk · Answer 3 · 2014-09-30T07:10:50.250

// here you add an array of your icon   
 final int[] ICONS = new int[] {
                    R.drawable.ic_launcher,
                    R.drawable.ic_launcher,
                    R.drawable.ic_launcher,
                    R.drawable.ic_launcher,
            };

    // add this following code to solve your problem
    // here NewsFeedActivity.this.getResources() is used to get the drawable folder resource
    // instead of NewsFeedActivity you have to use your activity name here  
    for (int i=0; i < tabs.length; i++)
            {
            actionBar.addTab(actionBar.newTab().setText(tabs[i])
                                     .setIcon(NewsFeedActivity.this.getResources().getDrawable(ICONS[i]))
                                     .setTabListener(this));
            }//endfor

i have added the comment inside of my code and this is my first comment in stack overflow. — ofaruk, Sep 30 '14 at 07:11
I think the code is pretty self explanatory and the code is well commented. Thank you for your submission. — Jeremie D, Oct 02 '14 at 21:19

score 0 · Answer 4 · answered Feb 03 '14 at 13:37

0

Hi check out the ViewPagerIndicator library.

This is very good example for swipe-able tabs.

answered Feb 03 '14 at 13:37

dinesh sharma

3,312
1
22
32

how to add the icon for swipeable tabs

4 Answers4

Linked

Related