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>

Tablayout aren't meant for vertical scroll , they scroll horizontally only. I think you should look something else. — Priya Singhal, Jan 02 '17 at 07:14
@PriyaSinghal , what is the right way please suggest me. I found some Library in GitHub but is there any other way? — Md Imran Choudhury, Jan 02 '17 at 07:45
Use can use ListView or RecyclerView with fix width, as I think you will need to fill the screen with type of option selected ...... Also the UI you are trying to make is made on the guidelines of IOS, if possible ask your designer to make designs as android guidelines for android. — Priya Singhal, Jan 02 '17 at 07:51
@PriyaSinghal you are right it's IOS design guideline but there was no other way. Now I following RecyclerView to make this. Thank you. — Md Imran Choudhury, Jan 02 '17 at 11:03

score 9 · Answer 1 · answered Jun 07 '20 at 22:24

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.

Rotated TabLayout using android:rotation="90".
Since the TabLayout is rotated by 90, I used custom views with a rotation of -90 to cancel net rotation.
Programtically set width to match the height of the screen.
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)
            }
        }
    }

Interesting, but... But your customized TabLayout are not scrolling vertically :( Have I missed something? — Vitaly, Oct 24 '21 at 04:49
You can wrap them inside AppBarLayout and try using scroll flags for it. — Embydextrous, Oct 25 '21 at 04:15

score 5 · Answer 2 · edited May 23 '17 at 12:25

5

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

edited May 23 '17 at 12:25

Community

1
1

answered Jan 02 '17 at 07:19

Faraz

2,144
1
18
28

thank you, but can't find Left Tab in your given example. – Md Imran Choudhury Jan 02 '17 at 09:18
There is an example of vertical tabs in stackoverflow's answer. See this http://stackoverflow.com/a/7268225/5722608 – Faraz Jan 02 '17 at 09:48
I already try this type example, the main problem is this tab is not dynamic and view not look like TabLayout. – Md Imran Choudhury Jan 02 '17 at 10:59

Vertical Android TabLayout not scroll vertically

2 Answers2

Linked