title: Tabs with Icons using ViewPager, How to layout them? by Attaching Some Layout File
body: <p>I am new to Android, Designing an Android Application that contains "Tabs".
  I have designed this:</p>
  
  <p><a href="https://i.stack.imgur.com/DyCI6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DyCI6.png" alt="enter image description here"></a></p>
  
  <p>But I want to design like this, </p>
  
  <p><a href="https://i.stack.imgur.com/ZKqh2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZKqh2.png" alt="enter image description here"></a></p>
  
  <p>I think there must be way, as like of populating lists using Custom Adapters, But I am not finding any thing to do this, the tutorials that are available on Android Web are out of scope of my mind, because I am new.. </p>
  
  <p>My code:</p>
  
  <p>Tabs.xml
      
      </p>
  
  <p>Tabs.java</p>
  
  <pre><code>    package com.example.medbleep;
  
      import TabsManager.TabPagerAdapter;
  
  import android.app.ActionBar;
  import android.app.ActionBar.Tab;
  import android.app.FragmentTransaction;
  import android.os.Bundle;
  import android.support.v4.app.FragmentActivity;
  import android.support.v4.view.ViewPager;
  import android.widget.ImageView;
  import android.widget.TextView;
  
      public class Tabs extends FragmentActivity implements ActionBar.TabListener {
          private ViewPager viewPager;
          private TabPagerAdapter mAdapter;
          private android.app.ActionBar actionBar;
  
          private int numberOfTabs = 5;
          // Tab titles
          private int[] tabIcons = {R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home};
          private String[] tabText = { "Home", "units", "conferences", "couses", "more" };
          ImageView imageView;
          TextView textView;
  
          @Override
          protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.tabs);
  
              imageView = (ImageView)findViewById(R.id.tab_icon);
              textView = (TextView)findViewById(R.id.tab_title);
  
              // Initialization
              viewPager = (ViewPager) findViewById(R.id.pager);
              viewPager.setBackgroundColor(getResources().getColor(R.color.darkLoginBlue));
              actionBar = getActionBar();
              mAdapter = new TabPagerAdapter(getSupportFragmentManager(),
                      numberOfTabs);
  
              viewPager.setAdapter(mAdapter);
              actionBar.setHomeButtonEnabled(false);
              actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  
              // Adding Tabs
              for (int i = 0; i&lt;5 ; i++) {
  
                  actionBar.addTab(actionBar.newTab().setText(tabText[i])
                          .setIcon(getResources().getDrawable(tabIcons[i]))
                          .setTabListener(this));
  
                  //actionBar.addTab(actionBar.newTab().setCustomView(R.layout.tab_layout).setText(tabText[i]).setIcon(tabIcons[i]).setTabListener(this));
                  //actionBar.setLogo(tabIcons[4]);
  
                  //actionBar.setIcon(tabIcons[i]);
                  //actionBar.setTitle(tabText[i]);
              }
  
  
              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 arg0, FragmentTransaction arg1) {
              // TODO Auto-generated method stub
  
          }
  
          @Override
          public void onTabSelected(Tab tab, FragmentTransaction arg1) {
              // TODO Auto-generated method stub
              // on tab selected
              // show respected fragment view
              viewPager.setCurrentItem(tab.getPosition());
  
          }
  
          @Override
          public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
              // TODO Auto-generated method stub
  
          }
      }
  </code></pre>
  
  <p>TabPagerAdapter.java</p>
  
  <pre><code>package TabsManager;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentStatePagerAdapter;
  
  public class TabPagerAdapter extends FragmentStatePagerAdapter{
      int mNumOfTabs;
  
      public TabPagerAdapter(FragmentManager fm, int NumOfTabs) {
          super(fm);
          this.mNumOfTabs = NumOfTabs;
      }
  
      @Override
      public Fragment getItem(int position) {
  
          switch (position) {
              case 0:
                  HomeTabFragment homeTabFragment = new HomeTabFragment();
                  return homeTabFragment;
              case 1:
                  UnitTabFragment unitTabFragment = new UnitTabFragment();
                  return unitTabFragment;
              case 2:
                  ConferencesTabFragment conferencesTabFragment = new ConferencesTabFragment();
                  return conferencesTabFragment;
              case 3: 
                  CoursesTabFragment coursesTabFragment = new CoursesTabFragment();
                  return coursesTabFragment;
              case 4:
                  MoreTabFragment moreTabFragment = new MoreTabFragment();
                  return moreTabFragment;
              default:
                  return null;
          }
      }
  
      @Override
      public int getCount() {
          return mNumOfTabs;
      }
  
  
  
  
  }
  </code></pre>