How to change the icon color set in tablayout in android

Question

I'm trying to implement tabslayout with text and icons above. The desired output is this

But im getting this output

All those icons have changed color, i'm setting the title and icon programmatically. Code:

class HomePage : BaseActivity() {

private lateinit var binding: ActivityHomePageBinding
private lateinit var viewpager: ViewPager2

private val fragmentList = arrayListOf(FoodFragment(),ExerciseFragment(),MedicineFragment(),MoodFragment(),NotesFragment())
private val tabTitles = arrayListOf("Food","Exercise","Medicine","Mood","Notes")
private val tabIcons = arrayListOf(R.drawable.ic_food,R.drawable.ic_exercise,R.drawable.ic_medicine,R.drawable.ic_mood,R.drawable.ic_notes)

private lateinit var customPagerAdapter: CustomPagerAdapter
private lateinit var tablayout: TabLayout

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, R.layout.activity_home_page)
    initUI()
}

private fun initUI(){

    val bottomSheetDialog = BottomSheetDialog(this)
    val bottomSheetView = LayoutInflater.from(this).inflate(R.layout.bottom_modal_sheet,
        findViewById<ConstraintLayout>(R.id.BMS)
    )
    bottomSheetDialog.setContentView(bottomSheetView)

    viewpager = bottomSheetView.findViewById(R.id.BMS_viewpager)
    tablayout = bottomSheetView.findViewById(R.id.BMS_tab_layout)

    customPagerAdapter = CustomPagerAdapter(fragmentList,this)
    viewpager.adapter = customPagerAdapter

    TabLayoutMediator(tablayout, viewpager) { tab, position ->
        tab.text = tabTitles[position]
        tab.setIcon(tabIcons[position])
    }.attach()

    binding.AHPButton.setOnClickListener {
        bottomSheetDialog.show()
    }

}

I would really appreciate if someone help me get the original color of the icons im setting.

Also how to change the icon size?

Edit 1: The icon is working fine in imageview, its greyed out in tabsitem for some reason. These icons are svg files. Does that have to do anything with the issue i'm facing? Adding the image for reference.

Answer 1

You can change text and icon using tabSelectListener. In onTabSelected you will get the selected tab and in onTabUnselected you will get unselected tab. You can have 2 list one that have drawables for selected state and one for unselected state.

private val tabIconsSelected = arrayListOf(R.drawable.ic_food_sel,R.drawable.ic_exercise_sel,R.drawable.ic_medicine_sel,R.drawable.ic_mood_sel,R.drawable.ic_notes_sel)
private val tabIconsUnselected = arrayListOf(R.drawable.ic_food_unsel,R.drawable.ic_exercise_unsel,R.drawable.ic_medicine_unsel,R.drawable.ic_mood_unsel,R.drawable.ic_notes_unsel)

 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    tab.setIcon(tabIconsSelected[tab.getPosition()]);
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    tab.setIcon(tabIconsUnselected[tab.getPosition()]);
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });

Second approach could be you use by declaring selected and unselected state in xml file. Lets name this xml as custom_food_selector.xml.

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_food_sel"
            android:state_selected="true"/>
        <item android:drawable="@drawable/ic_food_unsel"
            android:state_selected="false"/>
    </selector>

Add the custom tab selector drawable as the icon for tabItem.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/footer"
        app:tabIndicatorColor="@color/female_colour">

        <android.support.design.widget.TabItem
            android:id="@+id/tab_home"
            android:layout_width="@dimen/_25dp"
            android:layout_height="@dimen/_25dp"
            android:padding="@dimen/_4dp"
            android:icon="@drawable/custom_food_selector"
            />
 </android.support.design.widget.TabLayout>

Answer 2

Okay so in tabslayout in xml file, i set the app:tabIconTint="@null" and it showed me the icons properly.