View Pager (VP) and TabLayout Upgrade #3

Иногда очень важно бывает настроить для каждой из Tabs разные иконки и добавить заголовок

Для начала нам нужно в TabLayout в xml шаблоне добавить эти атрибуты

app:tabIndicatorHeight="3dp" - устанавливаем толщину линии подчеркивания заголовка активной вкладки
app:tabIndicatorColor="@android:color/holo_orange_dark" - устанавливаем цвет линии подчеркивания заголовка активной вкладки
app:tabTextColor="@android:color/white" - устанавливаем цвет заголовка не активных вкладок
app:tabSelectedTextColor="@android:color/holo_orange_dark" - устанавливаем цвет заголовка активной вкладки
app:tabIconTint="@color/white" - устанавливаем цвет иконок для вкладок
app:tabRippleColor="@android:color/holo_orange_dark" - устанавливаем цвет эффекта при тапе по вкладкам

Кроме того нам нужно удалить атрибут, который устанавливал активные и неактивные иконки для вкладок из предыдущего примера:

app:tabBackground="@drawable/tabs"

Также нам нужно поменять значение в атрибуте tabMode на scrollable. Это нужно для того что бы заголовок вкладок отображался полностью, а в случае большого количества вкладок мы могли из прокручивать

app:tabMode="scrollable"

После этого мы переходим в класс нашего Activity и вставляем в … TabLayoutMediator.TabConfigurationStrategy { tab, position ->… условие по установке иконки и заголовка для каждой вкладки. Опять же нумерация вкладок начинается с индекса 0

when (position) {
 0 -> {
     tab.setIcon(R.drawable.play)
     tab.text = getString(R.string.badBoys)
 }
 1 -> {
     tab.setIcon(R.drawable.play_two)
     tab.text = getString(R.string.avengers)
 }
 2 -> {
     tab.setIcon(R.drawable.play_three)
     tab.text = getString(R.string.alita)
 }
}

То есть первая вкладка будет иметь вот такую иконку и заголовок

tab.setIcon(R.drawable.play)
tab.text = getString(R.string.badBoys)

Теперь наши новые усовершенствованные вкладки начнут функционировать

Код из урока

activity_main.xml – xml шаблон Activity

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        tools:context=".MainActivity">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/slider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_margin="10dp"
            tools:ignore="MissingConstraints" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabSlider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/slider"
            android:layout_marginTop="3dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:tabPaddingTop="15dp"
            app:tabPaddingBottom="8dp"
            app:tabMode="scrollable"
            app:tabIndicatorHeight="3dp"
            app:tabIndicatorColor="@android:color/holo_orange_dark"
            app:tabTextColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/holo_orange_dark"
            app:tabIconTint="@color/white"
            app:tabRippleColor="@android:color/holo_orange_dark"
            android:background="@color/black"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

MainActivity.kt – класс Activity

class MainActivity : AppCompatActivity() {

    var binding: ActivityMainBinding? = null

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

      
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding?.slider?.adapter = SliderAdapter(this)

        val tabLayoutMediator = binding?.tabSlider?.let {
            binding?.slider?.let { it1 ->
                TabLayoutMediator(it,
                        it1,
                    TabLayoutMediator.TabConfigurationStrategy { tab, position ->

                         when (position) {
                         0 -> {
                             tab.setIcon(R.drawable.play)
                             tab.text = getString(R.string.badBoys)
                         }
                         1 -> {
                             tab.setIcon(R.drawable.play_two)
                             tab.text = getString(R.string.avengers)
                         }
                         2 -> {
                             tab.setIcon(R.drawable.play_three)
                             tab.text = getString(R.string.alita)
                         }
                        }

                    })
            }
        }
        tabLayoutMediator?.attach()

    }
}