I would like to be able to achieve tabs whose texts are displayed on a single line and not on two ( due to lack of space ) as can be seen in the following image:
To achieve this, I want the tabs on the right side to be swipeable to the left, so they are off screen but still accessible . If I still don't explain myself well, I attach a photo of the tabs of the YouTube channels (you can see for yourself that they slide and despite there being many, they all enter )
I attach the XML code of my tabbed layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.ui.CHAT.fragment_contenedor_chat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp"
android:contentDescription="@string/ayuda">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.NoActionBar"
android:contentDescription="@string/ayuda">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabss_info_clases"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabIndicatorColor="#b2dfdb"
app:tabTextColor="#000000"
android:backgroundTint="#006064"
android:contentDescription="@string/ayuda"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pagerr_info_clases"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:contentDescription="@string/ayuda"/>
</LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>
What should I do to achieve YouTube-like tabs?
Thank you very much for reading!
To make it slider like on youtube you just have to add set the property
tabMode
likescrollable
inside your xml.You can also change it by code with:
In some cases it can be useful to set it by code and depending on the width of the screen make it scrollable or if it has plenty of space fixed and with the tabs centered, which is how it is used many times in tablets