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 b

Answer 1

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

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: