Add Icons+Text to TabLayout

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

first create a layout xml file that has the structure you desire for the tabas 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 iconprivate 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 tabsfor (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:

If you want to put icons and text in a single line in a tablayout you have to make a custom layout as below.

custom_tab_heading.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center">    <TextView        android:id="@+id/tabContent"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:textAlignment="center"        android:textColor="@android:color/black"        android:gravity="center"/></LinearLayout>

At your java side you can write below code to put image and title to your tabs.

val tabTitles = arrayListOf<String>("  Text Jokes","  Funny Images")val tabIcons = arrayListOf<Int>(R.drawable.text_jokes,R.drawable.image_jokes)val tabLinearLayout = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayoutval tabContent = tabLinearLayout.findViewById<View>(R.id.tabContent) as TextViewtabContent.text = tabTitles.get(0)tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[0], 0, 0, 0)myTabLayout.getTabAt(0)!!.setCustomView(tabContent)val tabLinearLayout1 = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayoutval tabContent1 = tabLinearLayout1.findViewById<View>(R.id.tabContent) as TextViewtabContent1.text = tabTitles.get(1)tabContent1.setCompoundDrawablesWithIntrinsicBounds(tabIcons[1], 0, 0, 0)var l = tabLinearLayout1.layoutParamsmyTabLayout.getTabAt(1)!!.setCustomView(tabContent1)

Note:- In tabTitles array notice that i have given a space before text(<space>Title 1) because it will keep space between your image and title.

Sorry for i am providing kotlin code here but you can easily convert it to java. If anyone having a problem then comment in this answer and i will try to help them.