android - TabLayout dynamically resize

Question

I have a TabLayout in my app and it holds custom views:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <com.myproject.app.utils.commons.IconImageView
            android:id="@android:id/icon"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_marginRight="14dp"
            android:layout_marginEnd="14dp"
            app:iconStateListColor="@color/color_order_tab"/>

        <TextView
            android:id="@android:id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/color_order_tab"
            android:textSize="14sp"
            android:fontFamily="sans-serif-medium"/>

    </LinearLayout>

</RelativeLayout>

I want to show text on the Tab only if it selected - already done - and resize these tabs dynamically, is there any way to do that? If I use app:tabMode="fixed" tabs don't resize, if I use app:tabMode="scrollable" my tabs are always on the left of my screen. If I do android:layout_width="wrap_content" and android:layout_gravity="center_horizontal" - TabLayout doesn't fill the screen.. So I need to:

• Resize tabs when text appears or disappears;
• Tabs should fill the screen in any case.

Answer 1

First of all, you cannot obtain all the desired feature on using fixed mode. As in fixed mode, you cannot resize your tabs. You need to use scrollable mode in order to resize the tabs.

If I do android:layout_width="wrap_content" and android:layout_gravity="center_horizontal" - TabLayout doesn't fill the screen

You can set a parent container and set a background so that it gives you a feel of a tab layout with full device width.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:tabGravity="center"
        app:tabMode="scrollable" />
</FrameLayout>

Then, you can add the tabs i.e. your custom tabs in your tab layout and after that, you can add addOnTabSelectedListener to get the desired results:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        View view = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view.findViewById(R.id.text)).setText("large text one");

        View view1 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view1.findViewById(R.id.text)).setText("1");

        View view2 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view2.findViewById(R.id.text)).setText("Large Text Text Text");

        View view3 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view3.findViewById(R.id.text)).setText("One");


        View view4 = getLayoutInflater().inflate(R.layout.custom_tab, null);
        ((TextView) view4.findViewById(R.id.text)).setText("Another large text");

        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view1));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view2));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view3));
        mBinding.tabs.addTab(mBinding.tabs.newTab().setCustomView(view4));

        mBinding.tabs.getTabAt(0).getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);

        mBinding.tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.text).setVisibility(View.VISIBLE);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.text).setVisibility(View.GONE);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

As you can see the tabs are now resizable and only text on the selected tab is visible. Hope that help