【Android】TabLayoutの各々のタブ内にViewを追加

概要

TabLayoutに新たなViewを追加する方法について解説。
ここでは例として、タブの右上にバッジを付与するプログラムについて記載。

方法

ざっくり説明すると、TabLayoutからgetChildAtメソッドを用いて各々のタブビューを取得し、Viewをinflateメソッドで追加すればよい。

レイアウト

バッジレイアウトを作成

drawable/badge.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	   android:shape="oval">
	<solid android:color="@android:color/holo_red_light"/>
</shape>

layout/badge.xml

<?xml version="1.0" encoding="utf-8"?>
<View
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="6dp"
	android:layout_height="6dp"
	android:layout_marginStart="4dp"
	android:layout_marginBottom="6dp"
	android:background="@drawable/badge"/>

ViewPagerを作成

view_pager.xml

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

メインレイアウト内に、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"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

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

	<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用アダプタークラスの作成

ViewPagerAdapter.kt

class ViewPagerAdapter : RecyclerView.Adapter<ViewPagerAdapter.ViewHolder>() {

	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 onBindViewHolder(holder: ViewHolder, position: Int) {
	}

	override fun getItemCount() = 3
}

メインレイアウトクラスの作成
onCreateメソッド内で、TabLayout内のLinearLayoutの向きをHORIZONTALにするのと、バッジレイアウトのinflateを行うことで、バッジが表示されるようになる。

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 ->
			tab.text = "タブ$position"
		}.attach()

		(binding.tabLayout.getChildAt(0) as LinearLayout).forEach {
			val linearLayout = it as LinearLayout
			linearLayout.orientation = LinearLayout.HORIZONTAL
			layoutInflater.inflate(R.layout.badge, linearLayout)
		}
	}
}