Align Icons in Tab Layout To The Left

Question

Hello I have created a tab layout in my activity. This is the main .xml file:

Answer 1

Just add this line to your TabLayout in XML

app:tabInlineLabel="true"

Answer 2

You have to introduce ActionMenuView inside Toolbar.

From Google Official docs "ActionMenuView is a presentation of a series of menu options as a View. It provides several top level options as action buttons while spilling remaining options over as items in an overflow menu. This allows applications to present packs of actions inline with specific or repeating content."

Eg,

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tToolbar"
    android:layout_height="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"
    android:gravity="center_vertical|start"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <android.support.v7.widget.ActionMenuView
        android:id="@+id/amvMenu"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>
</android.support.v7.widget.Toolbar>

And on your Activity,

Toolbar t = (Toolbar) findViewById(R.id.tToolbar);
    amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu);
    amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
      @Override
      public boolean onMenuItemClick(MenuItem menuItem) {
        return onOptionsItemSelected(menuItem);
      }
    });

Answer 3

TabLayout also support custom views instead of TabView.

1.Create your tab item layout.The main idea is we should use specify id for ImageView @android:id/icon and for TextView @android:id/text1

R.layout.custom_tab_item

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_app_background"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/appoinments_" />

    <com.app.barber.views.CustomTextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:paddingBottom="@dimen/_8sdp"
        android:paddingLeft="@dimen/_5sdp"
        android:paddingTop="@dimen/_8sdp"
        android:text="@string/title_appointments"
        android:textColor="@color/color_white"
        android:textSize="@dimen/_12ssp" />
</LinearLayout>

2. And TabLayout xml file

 <android.support.design.widget.TabLayout
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      app:tabMaxWidth="0dp"
      app:tabGravity="fill"
      app:tabMode="fixed"
      android:theme="@style/vocabularyTheme.ActionBar" />

3. Create tabLayout using custom views, and remove bottom margin, which was set up by default 8dp

mTabLayout = (TabLayout) findViewById(R.id.tab_layout);     
mTabLayout.addTab(createTab(text1,icon1));
mTabLayout.addTab(createTab(text2,icon2));

private TabLayout.Tab createTab(String text, Drawable icon){
    TabLayout.Tab tab = mTabLayout.newTab().setText(text).setIcon(icon).setCustomView(R.layout.custom_tab_item);

    // remove imageView bottom margin
    if (tab.getCustomView() != null){
        ImageView imageView = (ImageView) tab.getCustomView().findViewById(android.R.id.icon);
        ViewGroup.MarginLayoutParams lp = ((ViewGroup.MarginLayoutParams) imageView.getLayoutParams());
        lp.bottomMargin = 0;
        imageView.requestLayout();
    }

    return tab;
}

Expected result.

Answer 4

Use a custom view:

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

Answer 5

I have exact solution which you guys want.

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textAlignment="textStart"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabInlineLabel="true"
    app:tabPaddingStart="@dimen/default_10dp">

Using below property you can achive desire result.

app:tabInlineLabel="true"

Answer 6

The answer given by @Tjerkw is ok just that it doesn't loop through the entire tab. I guess the right solution should be this

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

and the layout resource .xml representing R.layout.title_text will be

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"/>

finally, the tabicons[i] and tab tab_titles[i] are just String arrays containing their respective contents. I know this question's old but i recently faced this and i'm sure someone else might still need this