Vertical tabLayout on Android (Xamarin)

Issue

Issue

Make a vertical tablayout but it uses more spaces than it need.
In addition, I want tabItem’s text be horizonal.

I couldn’t paste an image so I paste a link that I asked at other website.
She told me that make a vertical tab with tablayout is impossible.

Screen I want to make

First image is the display what I want to make. Second image is the display at now.

https://teratail.com/questions/0p99tlvnpzqpoj

Code

XML file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!--AppBar
        @+id/appBar-->
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expanded="false">
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="46dp">

            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.AppBarLayout>

        <!--Tab & Content-->
    <LinearLayout
        android:id="@+id/linLay_TabContent"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/linLay_EventRep"
        app:layout_constraintTop_toBottomOf="@+id/appBar">
        
        <!--Tab & image
        @+id/Tab-->
        <LinearLayout
            android:id="@+id/Tab"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:rotation="-90"
            app:layout_constraintEnd_toStartOf="@+id/Content"
            android:orientation="vertical">
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                app:tabTextAppearance="@style/TabLayoutTextAppearance"
                app:tabMinWidth="79dp"
                app:tabMode="scrollable">

                <com.google.android.material.tabs.TabItem
                    android:text="test1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <com.google.android.material.tabs.TabItem
                    android:text="test2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
                <com.google.android.material.tabs.TabItem
                    android:text="test3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

            </com.google.android.material.tabs.TabLayout>
            <ImageButton
                android:id="@+id/image"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_marginTop="1dp"
                android:paddingTop="15dp"
                android:paddingBottom="15dp"
                android:paddingRight="19dp"
                android:paddingLeft="17dp"/>
        </LinearLayout>
            
        <!--Content
        @+id/Content-->
        <LinearLayout
            android:id="@+id/Content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/Tab">
            <TextView
              android:id="@+id/txt1"
              android:text="data"
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>
        </LinearLayout>
    </LinearLayout>

        <LinearLayout
            android:id="@+id/linLay_EventRep"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:layout_constraintBottom_toBottomOf="parent">

            <TextView
              android:id="@+id/txt1"
              android:text="text1"
              android:layout_width="78dp"
              android:layout_height="48dp"
              android:layout_gravity="bottom"/>

            <TextView
              android:id="@+id/txt2"
              android:text="text2"
              android:layout_width="78dp"
              android:layout_height="48dp"
              android:layout_gravity="bottom"/>
        </LinearLayout>



</androidx.constraintlayout.widget.ConstraintLayout>

Version

Microsoft Visual Studio 2019 Version 16.11.19

Microsoft .NET Framework Version 4.8.04084

MonoAndroid, Version=v9.0

remarks
I checked this site but couldn’t understand the meaning of code Setup in Code thus couldn’t write with C#.

Vertical Android TabLayout not scroll vertically

Solution

I test the code you provided and link provided. Unfortunately, TabLayout can’t achieve the effect you want. And here is my screenshot of test effect. As the second answer in the link said:

TabLayout provides a horizontal layout to display tabs.

You can choose this case‘s method.

Answered By – Jianwei Sun – MSFT

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0