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>
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.
TabLayout
using android:rotation="90"
.TabLayout
is rotated by 90, I used custom views with a rotation of -90 to cancel net rotation.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)
}
}
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With