Vertical Android TabLayout not scroll vertically

Question

I try to develop left TabLayout like this image.

But the problem is TabLayout element not shows and scrolling Vertically. There is my code below maybe I missed something:

<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">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/appBarLay"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLay"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            app:tabBackground="@drawable/tab_color_selector"
            app:tabGravity="fill"
            app:tabMode="scrollable" />
    </android.support.design.widget.AppBarLayout>
</RelativeLayout>

Solution 1

As per the Android Documentation:

TabLayout provides a horizontal layout to display tabs

However, I recently implemented TabLayout in vertical orientation. Here's what I did.

1. Rotated TabLayout using android:rotation="90".
2. Since the TabLayout is rotated by 90, I used custom views with a rotation of -90 to cancel net rotation.
3. Programtically set width to match the height of the screen.
4. Programtically set translationX and translationY to align it to the right edge of the screen and center vertically.

XML

 <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="88dp"
                app:tabIndicatorHeight="4dp"
                app:tabIndicator="@drawable/category_tab_indicator"
                app:tabBackground="@drawable/category_tab_selector"
                app:tabTextColor="@color/black"
                app:tabSelectedTextColor="@color/meesho_primary_text"
                app:tabMode="scrollable"
                android:rotation="90"/>

Setup in Code

private fun setupTabs(tabLayout: TabLayout, tabItems: List<String>) {
        val contentHeight = activity!!.window.findViewById<View>(Window.ID_ANDROID_CONTENT).run { bottom - top }
        // 112dp is a deduction, 56dp for Toolbar and 56dp for BottomNavigationTab
        val tabLayoutWidth =  contentHeight - dpToPx(112)
        tabLayout.layoutParams.width = tabLayoutWidth
        // 44dp is basically half of assigned height[![enter image description here][2]][2]
        tabLayout.translationX = (tabLayoutWidth / 2 - dpToPx(44)).toFloat() * -1
        tabLayout.translationY = (tabLayoutWidth / 2 - dpToPx(44)).toFloat()
        tabItems.forEach { tabData ->
            tabLayout.newTab().also { tab ->
                val view = View.inflate(tabLayout.context, R.layout.item_category_tab, null)
                view.findViewById<TextView>(R.id.tv).text = tabData
                tab.customView = view
                tabLayout.addTab(tab)
            }
        }
    }

Solution 2

As mentioned in android documentation, see this

TabLayout provides a horizontal layout to display tabs.

This means you cannot use TabLayout to display vertical tabs. However, you can use TabHost to achieve it.

Check out these liks :

http://www.androidhive.info/2011/08/android-tab-layout-tutorial/

Vertical tabs in Android

Comments

[Md Imran Choudhury]

thank you, but can't find Left Tab in your given example.

[Faraz]

There is an example of vertical tabs in stackoverflow's answer. See this stackoverflow.com/a/7268225/5722608

[Md Imran Choudhury]

I already try this type example, the main problem is this tab is not dynamic and view not look like TabLayout.

[Vitaly]

Interesting, but... But your customized TabLayout are not scrolling vertically :( Have I missed something?

[Embydextrous]

You can wrap them inside AppBarLayout and try using scroll flags for it.