Add Icons+Text to TabLayout

Question

I am working on a screen which contains Three tabs I am trying to add an icon with My text in tabs and i want the image to be upper the text and there should be some space between them it is my code.

public class HomeScreen extends AppCompatActivity     implements NavigationView.OnNavigationItemSelectedListener {  private Toolbar toolbar; private ViewPager pager; private ViewPagerAdapter adapter; private SlidingTabLayout tabs; private CharSequence Titles[] = {"News", "Most Views", "Chart"}; int Numboftabs = 3;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_home_screen);     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);     setSupportActionBar(toolbar);      DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);     ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(             this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);     drawer.setDrawerListener(toggle);     toggle.syncState();      NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);     navigationView.setNavigationItemSelectedListener(this);      //MAhmoud Code Addtion     // getSupportActionBar().setDisplayHomeAsUpEnabled(true);    // getSupportActionBar().setIcon(R.drawable.ic_launcher);      // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles     // fot the Tabs and Number Of Tabs.     adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,             Numboftabs);      // Assigning ViewPager View and setting the adapter     pager = (ViewPager) findViewById(R.id.pager);     pager.setAdapter(adapter);      // Assiging the Sliding Tab Layout View     tabs = (SlidingTabLayout) findViewById(R.id.tabs);     tabs.setDistributeEvenly(true);     tabs.setViewPager(pager);  }  @Override public void onBackPressed() {     DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);     if (drawer.isDrawerOpen(GravityCompat.START)) {         drawer.closeDrawer(GravityCompat.START);     } else {         super.onBackPressed();     } }} 

ViewPagerAdapter

public class ViewPagerAdapter extends FragmentStatePagerAdapter {  CharSequence Titles[]; int NumbOfTabs;  public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],         int mNumbOfTabsumb) {     super(fm);     this.Titles = mTitles;     this.NumbOfTabs = mNumbOfTabsumb; } // This method return the fragment for the every position in the View Pager @Override public Fragment getItem(int position) {     switch (position) {     case 0:         return new Tap1();      case 1:         return new Tap2();     case 2:         return new Tap3();     }     return null; } // This method return the titles for the Tabs in the Tab Strip @Override public CharSequence getPageTitle(int position) {     return Titles[position]; } // This method return the Number of tabs for the tabs Strip @Override public int getCount() {     return NumbOfTabs; }} 

Answer 1

Try this way this is exactly what you looking for

http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

public class MainActivity extends AppCompatActivity {      private Toolbar toolbar;     private TabLayout tabLayout;     private ViewPager viewPager;     private int[] tabIcons = {             R.drawable.ic_tab_favourite,             R.drawable.ic_tab_call,             R.drawable.ic_tab_contacts     };      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);         getSupportActionBar().setDisplayHomeAsUpEnabled(true);          viewPager = (ViewPager) findViewById(R.id.viewpager);         setupViewPager(viewPager);          tabLayout = (TabLayout) findViewById(R.id.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.addFrag(new OneFragment(), "ONE");         adapter.addFrag(new TwoFragment(), "TWO");         adapter.addFrag(new ThreeFragment(), "THREE");         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 addFrag(Fragment fragment, String title) {             mFragmentList.add(fragment);             mFragmentTitleList.add(title);         }          @Override         public CharSequence getPageTitle(int position) {             return mFragmentTitleList.get(position);         }     } } 

Answer 2

first create a layout xml file that has the structure you desire for the tab as an example a simple icon at the top of a text. like so:

1. create the navigation tab layout xml: in layout folder > nav_tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/nav_tab"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:gravity="center_horizontal">      <ImageView         android:layout_width="wrap_content"         android:layout_height="@dimen/nav_icon"         android:scaleType="centerInside"         android:id="@+id/nav_icon"         android:layout_marginBottom="@dimen/tiny_padding"/>      <TextView         android:id="@+id/nav_label"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:fontFamily="@string/font_fontFamily_medium"         android:shadowColor="@android:color/black"         android:textColor="@color/dark_grey"         android:textSize="@dimen/nav_tab_label_font_size"         tools:text="@string/nav_home" />  </LinearLayout> 

give your layout and id to inflate, and give the ImageView and the TextView ids too to reference later after inflating the parent layout.

---

2. Define your icons in drawable folder, and labels in strings.xml file

and reference them by their resource id in array ordered as you wish your icons to appear:

private int[] navIcons = {         R.drawable.ico_home,         R.drawable.ico_search,         R.drawable.ico_notification,         R.drawable.ico_profile }; private int[] navLabels = {         R.string.nav_home,         R.string.nav_search,         R.string.nav_notifications,         R.string.nav_profile }; // another resouces array for active state for the icon private int[] navIconsActive = {         R.drawable.ico_home_red,         R.drawable.ico_search_red,         R.drawable.ico_notification_red,         R.drawable.ico_profile_red }; 

---

3. setup your TabLayout with your ViewerPager:

TabLayout navigation = (TabLayout) findViewById(R.id.navigation); navigation.setupWithViewPager(mainView/* the viewer pager object*/); 

now customization part:

// loop through all navigation tabs for (int i = 0; i < navigation.getTabCount(); i++) {     // inflate the Parent LinearLayout Container for the tab     // from the layout nav_tab.xml file that we created 'R.layout.nav_tab     LinearLayout tab = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.nav_tab, null);      // get child TextView and ImageView from this layout for the icon and label     TextView tab_label = (TextView) tab.findViewById(R.id.nav_label);     ImageView tab_icon = (ImageView) tab.findViewById(R.id.nav_icon);      // set the label text by getting the actual string value by its id     // by getting the actual resource value `getResources().getString(string_id)`     tab_label.setText(getResources().getString(navLabels[i]));      // set the home to be active at first     if(i == 0) {         tab_label.setTextColor(getResources().getColor(R.color.efent_color));         tab_icon.setImageResource(navIconsActive[i]);     } else {         tab_icon.setImageResource(navIcons[i]);     }      // finally publish this custom view to navigation tab     navigation.getTabAt(i).setCustomView(tab); } 

---

Final touch to set an active state and get the icon and text color changed when the tab is selected:

you can continue to my answer here

change image and color of the text to the tab when selected

that will achieve: