Read More

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 com.android.support:design:23.0.1

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 Fragment1.java for tab contents

 

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

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

MainActivity.java


      Custom view for tab layout

Screenshot_3

Maybe this blog is work for you.

 

Source:

www.androidhive.info/

. . .

Comments (5)

Add Your Comment

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

  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close