tab layout text is being cut off in small screen sizes

Question

I am using tab layout with custom views.

The issues I am facing are the following -

1) The text is being cut off with small screen devices as you can see here -

small device -

big device -

2) the second issue I am facing is as you can see, the background does not go wrap content on "Chats" tabs. It does through wrap the "Market" tab title as it is longer. I need it to wrap quallity with short and long texts.

here is my xml -

  <androidx.appcompat.widget.Toolbar
        android:id="@+id/activity_dashboard_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="@color/transparent">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/user_default_image"
            app:civ_border_color="@color/black"
            app:civ_border_width="1dp" />

    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/activity_dashboard_viewpager"
        android:layout_width="match_parent"
        android:layout_height="600dp"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_tablayout" />

 private fun initTabLayoutAndViewPager() {
        setSupportActionBar(toolbar)
        supportActionBar?.title = null
        viewpager.adapter = DashboardViewPagerAdapter(this)
        TabLayoutMediator(tabLayout, viewpager, TabLayoutMediator.TabConfigurationStrategy { _, _ -> }).attach()

        val chatsView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val callsView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val walletView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)
        val marketView = View.inflate(this, R.layout.dashboard_activity_cusom_tab, null)

        (chatsView as TextView).text = pageTitles[0]
        (callsView as TextView).text = pageTitles[1]
        (walletView as TextView).text = pageTitles[2]
        (marketView as TextView).text = pageTitles[3]

        chatTextView = chatsView
        callsTextView = callsView
        walletTextView = walletView
        marketTextView = marketView


        tabLayout.getTabAt(0)?.customView = chatTextView
        tabLayout.getTabAt(1)?.customView = callsTextView
        tabLayout.getTabAt(2)?.customView = walletTextView
        tabLayout.getTabAt(3)?.customView = marketTextView

        viewpager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {

            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                when(position) {

                    DashboardTabs.CHATS.type -> {
                        ViewPagerUtils.setSelectedTab(chatTextView, callsView, walletView, marketView)
                    }
                    DashboardTabs.CALLS.type -> {
                        ViewPagerUtils.setSelectedTab(callsView, chatTextView, walletView, marketView)
                    }
                    DashboardTabs.WALLET.type -> {
                        ViewPagerUtils.setSelectedTab(walletView, callsView, chatTextView, marketView)
                    }
                    DashboardTabs.MARKET.type -> {
                        ViewPagerUtils.setSelectedTab(marketView, callsView, walletView, chatTextView)
                    }

                }
            }
        })
    }

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/roboto_medium"
    android:paddingStart="5dp"
    android:paddingEnd="5dp"
    android:textStyle="bold"
    android:textSize="18sp"
    android:maxLines="1"
    tools:text="Chats">

</TextView>

edit -

After resolving the issue with the answer provided here I am stuck a gravity issue -

how can I make all tabs in the center? tried both gravity and layout_gravity and none helped me.

Answer 1

make tab layout mode scrollable app:tabMode="scrollable" or app:tabMode="auto" like below

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/activity_dashboard_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        app:layout_constraintTop_toBottomOf="@+id/activity_dashboard_toolbar"
        app:tabIndicator="@null" />