【Android】TabLayoutを横スクロール+タブ幅指定

はじめに

TabLayoutを横スクロールし、TabLayout内のタブ(Tab1,Tab2...)の横幅を指定する方法について解説。

方法

• TabLayoutでapp:tabMode="scrollable"にすることで横スクロール設定
• 幅指定したタブビューをTabLayoutのcustomViewに指定

することで処理を実現できる。

コード

各のタブに表示するタブビューの作成。android:layout_widthでタブの横幅をdp指定。

view_tab.xml

<?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="wrap_content"
	android:layout_height="wrap_content">

	<TextView
		android:id="@+id/text"
		android:layout_width="160dp"
		android:layout_height="40dp"
		android:gravity="center"
		android:textSize="20sp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		tools:text="Tab1"/>
</androidx.constraintlayout.widget.ConstraintLayout>

各々のViewPager作成。

view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
	android:id="@+id/view"
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:textSize="40sp"
	tools:text="View1"/>

アクティビティ用レイアウトの作成。app:tabMode="scrollable"にしたTabLayoutとViewPager2を配置。

activity_main.xml

<?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"
	tools:context=".MainActivity">

	<com.google.android.material.tabs.TabLayout
		android:id="@+id/tab_layout"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		app:tabMode="scrollable"
		app:tabPaddingEnd="0dp"
		app:tabPaddingStart="0dp"/>

	<androidx.viewpager2.widget.ViewPager2
		android:id="@+id/view_pager"
		android:layout_width="0dp"
		android:layout_height="0dp"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toBottomOf="@id/tab_layout"/>
</androidx.constraintlayout.widget.ConstraintLayout>

次に、処理部分。ViewPager用Adapter作成。

ViewPagerAdapter.kt

class ViewPagerAdapter : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {
	inner class ViewHolder(val binding: ViewPagerBinding) : RecyclerView.ViewHolder(binding.root)

	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ViewHolder(ViewPagerBinding.inflate(LayoutInflater.from(parent.context), parent, false))
	override fun getItemCount() = 5
	override fun onBindViewHolder(holder: ViewHolder, position: Int) {
		holder.binding.view.text = "View${position + 1}"
	}
}

最後に、Activityの作成。TabLayoutMediator内のtab.customViewで、先ほど作成したタブビューをカスタムビューに指定。

MainActivity.kt

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		binding.viewPager.adapter = ViewPagerAdapter()
		TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
			val tabBinding = ViewTabBinding.inflate(layoutInflater)
			tab.customView = tabBinding.root
			tabBinding.text.text = "Tab${position + 1}"
		}.attach()
	}
}