How to make custom tabs with text & icons in android


In this blog,
We are going to show you how to make custom tabs in android.

Here we customize the tab with icon and text, you can see the icon is horizontally aligned with tab text.

But if you want to place the icon above the tab label, you have to use a custom view to achieving it.


Code Implementation

1. Open project level build.gradle and add android design support library

2. In layout file activity_main.xml and add tablayout and view pager.


3. Create an XML layout named custom_tab.xml under res -> layout for define the custom view for the tab.

4. Create a fragment named for tab contents


5. In use the below code for customizing the tab.

If you noticed this function createTabIcons in, I have used custom_tab.xml layout in each tab.

      Custom view for tab layout


Maybe this blog is work for you.



. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • Parth Chawande
    Thanks for a great tutorial!
    I had some questions though,
    1. can u explain the use of ‘from(this)’ in the create custom tabs method
    2. R.drawable.ic_dash file, which i am guessing is the dash under the tab title, can u tell me where to find such drawables?
    Thanking you in anticipation.
    • Aman Gupta
      Your Always Welcome.
      The answers are following:

      1. From(this): This Obtains the LayoutInflater from the given context.

      2. You can find this icons simply under the drawable folders which is under res folder.

  • Utsav Kundu
    The Initial and the output are different
  • André Lima
    How to place the icon side by side with text?
    • Aman Gupta (Moderator)
      For side by side: put you icon here for left side of the text: tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_category, 0 , 0, 0);
      or here for right side of the text:
      tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, 0 ,R.drawable.ic_category, 0);

      FYI: tabTwo.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);

  • AlexS (RU)
    Thank you for article! I create my own custom tab header.
  • css.php

    The results provided were above our expectations both in deliverability timeline as well as operation. They are a top-notch company with many resources and a company we feel honoured to work with again!

    Lee Seward

    Lee Seward

    Founder, Gro-Connect

    Talk to Sales


    Live Chat
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home