Changing TabLayout icons on left, top, right or bottom in com.android.support:design:23.1.0

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 com.android.support:design:23.1.0 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 R.java from different packages
  • advanced profiling build error
  • Apparently in com.android.support:design:23.1.0 they’ve changed the default icon position to top and text on the bottom.

    Previously in com.android.support:design:23.0.1 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="http://schemas.android.com/apk/res/android"
        android:id="@+id/tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAlignment="center"/>
    

    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);
    tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
    

    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: android.support.v7.internal.view.menu.MenuBuilder
  • 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 com.android.support:design:23.1.0”

    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.

    custom_tab.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/white"
            android:gravity="center"/>
    </LinearLayout>
    

    Initialization code:

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

    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(R.id.tabContent);
            tab_text.setText("  " + tab_titles[i]);
     tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
        tabLayout.getTabAt(i).setCustomView(tab_text);}
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.