TabLayout выбранный цвет текста, отображаемый на двух вкладках одновременно

Question

У меня есть tabLayout с ViewPager, но когда я выбираю вкладку, ранее выбранный цвет текста вкладки также остается в выбранном цвете.Таким образом, я получил две вкладки в выбранном текстовом состоянии.Как вы можете видеть, я сделал onTabSelectedListener, чтобы изменить значки с выбранного на невыбранное состояние, и он работает нормально.Только текст это проблема.Я также пытался сделать селектор xml для tabLayout раньше, но он не работал в конце концов.

UPDATE - Когда я удалил tabLayout.addOnTabSelectedListener, цвет текста переключается правильно.Но это решило мою проблему лишь частично.Теперь я должен найти решение для замены значков, когда выбрана вкладка.

tab.icon = getDrawable(iconListActive[viewPager.currentItem])

Этот точный код мешал переключению цвета.Но это не имеет смысла.Как я добавил, super.onTabSelected(tab) переключение цветов работает отлично.

Инициализация TabLayout и ViewPager:

private var pagerAdapter: ViewPagerAdapter? = null
private lateinit var viewPager: CustomViewPager
private lateinit var tabLayout: TabLayout

tabLayout = findViewById(R.id.tab_layout)
viewPager = findViewById(R.id.viewPager)

tabLayout.setTabTextColors(
                resources.getColor(R.color.color_grey),
                resources.getColor(R.color.color_green)
        )

pagerAdapter = ViewPagerAdapter(supportFragmentManager, this)
pagerAdapter!!.apply {
        addFragment(FirstFragment(), "Tab 1")
        addFragment(SecondFragment(), "Tab 2")
        addFragment(ThirdFragment(), "Tab 3")
        addFragment(FourthFragment(), "Tab 4")
    }

viewPager.adapter = pagerAdapter

tabLayout.setupWithViewPager(viewPager)
tabLayout.tabGravity = (TabLayout.GRAVITY_FILL)

tabLayout.addOnTabSelectedListener(object : TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
            override fun onTabSelected(tab: TabLayout.Tab) {
                tab.icon = getDrawable(iconListActive[viewPager.currentItem])

            }

            override fun onTabUnselected(tab: TabLayout.Tab) {
                tab.icon = getDrawable(iconList[viewPager.currentItem])

            }

        })

    }

CustomViewPager

import android.content.Context
import android.support.v4.view.ViewPager
import android.util.AttributeSet
import android.view.MotionEvent


class CustomViewPager(context: Context, attributeSet: AttributeSet) : ViewPager(context, attributeSet) {

    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        return false
    }

    override fun onTouchEvent(ev: MotionEvent?): Boolean {
        return false
    }
}

ViewPagerAdapter

class ViewPagerAdapter(fm: FragmentManager, private val ctx: Context) : FragmentStatePagerAdapter(fm) {

    private val fragments = ArrayList<Fragment>()
    private val tabTitles = ArrayList<String>()


    override fun getItem(position: Int): Fragment {
        return fragments[position]
    }

    override fun getCount(): Int {
        return fragments.size
    }

    fun addFragment(fragment: Fragment, tabtitle: String){
        fragments.add(fragment)
        tabTitles.add(tabtitle)
    }

    override fun getPageTitle(position: Int): CharSequence {
        return tabTitles[position]
    }

TabLayout и ViewPager XML

<FrameLayout
        android:id="@+id/frameContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/tab_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.app.CustomViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorBackground" />
    </FrameLayout>

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/TabBarTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:visibility="visible"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

TabStyle XML:

<style name="TabBarTheme" parent="Widget.Design.TabLayout">
        <item name="android:background">@color/colorBackground</item>
        <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
        <item name="tabIndicatorHeight">0dp</item>
    </style>

<style name="AppTabTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="textAllCaps">false</item>
        <item name="android:capitalize">words</item>
        <item name="android:textSize">10sp</item>
    </style>

Графическое представление этого поведения (невозможно опубликовать фактическую графику)

Answer 1

Вам необходимо использовать CustomView для Tablayout и установить селектор false для вкладки CustomView на onTabUnselected .Как ниже:

View view = tab.getCustomView();
if (view != null) {
     tab.icon = getDrawable(iconList[viewPager.currentItem])
     view.setSelected(false);
}

Answer 2

Используйте следующий код стиля, чтобы изменить цвет текста в TabLayout при выделении.

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/colorPrimary</item>
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">@color/colorPrimary</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@android:color/black</item>
    <item name="android:textAllCaps">false</item>
</style>

И используйте этот стиль в вашем TabLayout.

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:visibility="visible"
    android:minHeight="?attr/actionBarSize"
    android:layout_alignParentBottom="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />