Tablayoutを縦に表示させたいです。

Question

実現したいこと

Tablayoutを図の青色表示のように縦に表示させたいです。

発生している問題・エラーメッセージ

TabItemと画像を全て表示させるためにlayout_widthを約300dpほどとらないといけず、結果的に図のように必要以上のスペースがとられてしまっています。また、rotationを用いてTabLayoutを縦に表示はさせることはできているのですが、TabItemの表示は横表示に戻せずにいます。

該当のソースコード

<?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"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:expanded="false">
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="46dp"
                android:background="@drawable/border_bottom"
                android:theme="@style/AppTheme.Toolbar"
                app:titleTextColor="@color/normalTextLight">

				<LinearLayout
					android:id="@+id/linearLayoutGuide"
					android:orientation="vertical"
					android:layout_width="46dp"
					android:layout_height="46dp"
					android:layout_gravity="right"
					android:padding="5dp"
					android:background="@drawable/border_left">
					<FrameLayout
						android:id="@+id/frameLayoutGuide"
						android:layout_width="30dp"
						android:layout_height="30dp" >
						<ImageView
							android:id="@+id/imageViewGuideIc"
							android:src="@drawable/ic_guide"
							android:layout_width="24dp"
							android:layout_height="24dp"
							android:layout_gravity="center" />
						<View
							android:id="@+id/viewDot"
							android:layout_width="match_parent"
							android:layout_height="match_parent"/>
						<ImageView
                            android:id="@+id/imageViewDot"
                            android:src="@drawable/image"
                            android:layout_width="8dp"
                            android:layout_height="8dp"
                            android:layout_gravity="right|top"
                            android:visibility="invisible"/>
					</FrameLayout>
                    <TextView
                        android:id="@+id/textViewGuide"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:paddingLeft="5dp"
                        android:text="@string/guide"
                        android:textSize="8dp"/>
                </LinearLayout>
            </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 & 画像
		@+id/Tab-->
		<LinearLayout
			android:id="@+id/Tab"
			android:layout_width="300dp"
			android:layout_height="300dp"
			android:rotation="-90"
			app:layout_constraintEnd_toStartOf="@+id/Content">
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                app:tabTextColor="@color/normalTextLight"
                app:tabSelectedTextColor="@color/main"
                app:tabTextAppearance="@style/TabLayoutTextAppearance"
                app:tabMinWidth="79dp"
                app:tabIndicator="@drawable/indicator"
                app:tabIndicatorColor="@color/main"
                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:src="@drawable/image"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:background="@color/white"
                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="Button"
			  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="Button"
			  android:layout_width="78dp"
			  android:layout_height="48dp"
			  android:background="@drawable/btn_cornerround"
			  android:layout_gravity="bottom"/>

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



</androidx.constraintlayout.widget.ConstraintLayout>

補足情報（FW/ツールのバージョンなど）

下記リンクで実現したいTabを実装していたのですが、コードで行っている処理が理解できず再現することができませんでした。
https://stackoverflow.com/questions/41422626/vertical-android-tablayout-not-scroll-vertically

TabLayoutを縦にさせるために参考にしたサイト
http://satoshi33.sblo.jp/article/175787565.html

【開発環境】
Microsoft Visual Studio 2019 Version 16.11.19
Microsoft .NET Framework Version 4.8.04084
MonoAndroid, Version=v9.0

Comments

[jimbe]

前の回答で(レイアウトだけでしたので)タブでは無くリストを使用しましたが、元々タブは水平用に作成されていて、垂直にするにはハックに近いことをしなければなりません。
タブを使用することによる利点が何なのか分かりませんが、ハックによって返って面倒なことになるとも言え、"縦に並んで選択が出来る"リストをタブのように使う/見せるほうが簡単かもしれません。
タブである必要の理由は何でしょうか。

[karin10]

コメントありがとうございます。
縦のタブを作成して欲しいと言われ、一般的なTabLayoutをどうにかしようと考えてました。TabLayoutを垂直方向にするのは困難なんですね。。。
縦タブのように見せる他の方法について、ご存じだったりしますでしょうか？

[jimbe]

iOS は正式にサポートしているようですが、 Android で正式なものは私は知りません。 Android の UI の方向性として必要無いと判断されているものと考えます。
何方かが作成しているのものはありそうですが、調べたこともありません。

>縦タブのように見せる他の方法
タブの目的は、複数の選択肢を表示しながら、選択によって表示を切り替えることです。
ですので、前の回答のようにリスト/リサイクルビューを利用してクリックしたら表示を変えるようにすれば、動作の目的は達成できるのではないでしょうか。
既存のタブレイアウトのように見えるようにするには、リスト/リサイクルビューでの各アイテムの表示を適切に出来れば、ある程度は似せることが出来るのではと思います。(やったことはありません。)

[karin10]

ありがとうございます。
リストとリサイクルビューを用いて試してみます。

Answer 1

縦タブの実装は、ボタンを用いて実装することにしました。
下記サイトを参考にしました。
https://stackoverflow.com/questions/7267951/vertical-tabs-in-android/7268225#7268225

図のデータ表示には、Fragmentを表示させています。
InvisibleにしたTabLayoutをFragmentと連動させておき、ボタンが押下されたら指定のTabItemを押下扱いにすることでFragment遷移させ、ボタンで作成したタブを実装しました。

//タブ押下扱い処理
 tab = FindViewById<TabLayout>(Resource.Id.tablayout);
tab.GetTabAt(0).Select();