Changing TabLayout icons on left, top, right or bottom in

I’m pretty new to android development. So bear with me.

I’ve been trying to align the icon and text in same line in for a day.

  • Camera preview freezes after screen lock
  • XmlPullParserException Binary XML file line #17<vector> tag requires viewportWidth > 0
  • Setting up EditText with “url” inputType
  • Android Firebase, simply get one child object's data
  • Accessing from different packages
  • advanced profiling build error
  • Apparently in they’ve changed the default icon position to top and text on the bottom.

    Previously in the default was the icon on left and text in same line as the icon

    So here’s an easy way to solve it (though it might have drawbacks, idk tbh):

    change the version in your app's build.gradle. ex: 23.1.0 to 23.0.1 and build.

    And there’s a better way to do it (this way you can also align icons on left,right,top,bottom):

    1. create a custom_tab.xml in res/layout
    <TextView xmlns:android=""

    2. in your activity java

    TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    newTab.setText("tab1"); //tab label txt
    newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);

    So far I’ve achieved to make icons appear on any side like this:

    TabLayout icons

    PS: setCompoundDrawablesWithIntrinsicBounds function arguments are 4 side icons like this:

    setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)

    Related posts:

    Can&#039;t use srcCompat for ImageViews in android
    How to load a Picasa image from URI?
    Transparent Background
    Detect click on HTML button through javascript in Android WebView
    How to remove focus from EditText when user is done editing?
    android: How to use custom colors?
  • (ActionBar) Tabs + Pager + detail Fragments inside ViewPager container
  • What is the purpose of Gradle?
  • ORMLite JOINs, or rawQuery auto mapping
  • Using Roboto thin or condensed
  • NoClassDefFoundError:
  • Defining Z order of views of RelativeLayout in Android
  • 2 Solutions collect form web for “Changing TabLayout icons on left, top, right or bottom in”

    Thank you Atu for this good tip!

    In my case, I have to add a linear layout to center tablayout title. I have also added some space characters to get margin between the icon and the text.


    <?xml version="1.0" encoding="utf-8"?>

    Initialization code:

    LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    TextView tabContent = (TextView) tabLinearLayout.findViewById(;
    tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
    tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);

    Use the same xml code given by @juzamn and just add this little adjustments to loop for the entire tab

    for (int i = 0; i < tabLayout.getTabCount(); i++ ) {
     yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null);
     tab_text = (TextView) yourlinearlayout.findViewById(;
            tab_text.setText("  " + tab_titles[i]);
     tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.