How To Have Icons Be To The Left Of Text In Tab Layout?

I am trying to figure out how to have the icons not be on top of the text but rather to the side of it, but I am not sure how to do it with my code specifically. I am quite new to

Solution 1:

Adding app:tabInlineLabel="true" actually worked for me.

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabInlineLabel="true"
            app:tabIndicatorHeight="0dp"/>

Solution 2:

First create a custom_tab_layout.xml and put a Textview inside it:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_horizontal"android:id="@+id/tab"android:text="Tab1"android:textColor="@color/colorAccent"android:drawableLeft="@mipmap/ic_launcher"android:textSize="@dimen/tab_label"android:fontFamily="@string/font_fontFamily_medium"/>

here the trick is android:drawableLeft="@mipmap/ic_launcher"

and in activity:

TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab_layout, null);
    tabLayout.getTabAt(0).setCustomView(tabOne);

Solution 3:

You should go ahead and create a custom view within your ViewPagerAdapter. This is an example that I quickly wrote:

MainActivity.Class

publicclassMainActivityextendsAppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    ViewPagerAdapterpagerAdapter=newViewPagerAdapter(getSupportFragmentManager(), this);
    pagerAdapter.addFragment(newOneFragment(), "ONE");
    pagerAdapter.addFragment(newTwoFragment(), "TWO");
    pagerAdapter.addFragment(newThreeFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons(pagerAdapter);
}

privatevoidsetupTabIcons(ViewPagerAdapter pagerAdapter) {
    for (int i=0;i<tabLayout.getTabCount();i++) {
        TabLayout.Tabtab= tabLayout.getTabAt(i);
        if (tab != null) tab.setCustomView(pagerAdapter.getTabView(i));
    }
}

classViewPagerAdapterextendsFragmentPagerAdapter {

    private Context context;
    privatefinal List<Fragment> mFragmentList = newArrayList<>();
    privatefinal List<String> mFragmentTitleList = newArrayList<>();
    privateint[] tabIcons = {
            R.drawable.ic_android_black_24dp,
            R.drawable.ic_android_black_24dp,
            R.drawable.ic_android_black_24dp
    };

    ViewPagerAdapter(FragmentManager manager, Context context) {
        super(manager);
        this.context = context;
    }

    public View getTabView(int position) {
        Viewv= LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextViewtextView= v.findViewById(R.id.textView);
        textView.setText(mFragmentTitleList.get(position));
        ImageViewimageView= v.findViewById(R.id.imageView);
        imageView.setImageResource(tabIcons[position]);
        return v;
    }

    @Overridepublic Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @OverridepublicintgetCount() {
        return mFragmentList.size();
    }

    publicvoidaddFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Overridepublic CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

}

Your activity_main.xml: should remain the same.

This is your custom_tab.xml:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_black_24dp"/>

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/imageView"
    android:layout_toEndOf="@+id/imageView"
    android:text="test"
    android:textSize="20sp"
    android:layout_marginStart="5dp"
    android:layout_marginLeft="5dp"/>

You can modify your custom_tab as much as you want to. The code above is just an example.

This is the result on the emulator: