Tab with icon using TabLayout in Android Design Library

Question

I'm trying to use the new TabLayout in the android design library to create app bar with icons only.

like this:

how can I do it using the new TabLayout Android Design Library.

is there a simple solution for this, or i have to use the setCustomView only. i'm trying to avoid using it. because i didn't get the tint color for the icon like this image above.

i try to write like this:

tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.ic_dashboard))

but the icon still stay in the same color when i select the tab

Lorenza

I haven't used TabLayout much so forgive me if this isn't helpful, but have you tried using into TabLayout#setTabTextColors(int normalColor, int selectedColor)? I'm not sure if it will give you what you want, but it can't hurt to try setting it? – Kalong

Answer 1

i solved it like this:

tint_tab.xml

<com.hannesdorfmann.appkit.image.TintableImageView
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:tint="@color/tab_color_selector"/>

in you java code

TintableImageView tab1 = (TintableImageView) LayoutInflater.from(this).inflate(R.layout.tint_tab, null);
tab1.setImageResource(R.drawable.ic_dummy);
mTabLayout.getTabAt(0).setCustomView(tab1)

ref: https://github.com/sockeqwe/appkit/blob/master/image/src/main/java/com/hannesdorfmann/appkit/image/TintableImageView.java

Lorenza

Answer 2

you have to create a selector for the icon. For example:

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

Rouse

For new android developers stumbling onto this question: This file should be saved in the drawable directory (e.g. my_icon.xml). And can be accessed using code just like a regular drawable icon. (e.g. R.drawable.my_icon) – Brodie

@Manikanta you already have multiple icon states for each tab in order to show pressed, focused etc. The selectors are a very convenient way of maintaining the relationship between the icons. This technique greatly simplifies the layout files because they only need to deal with a single drawable selector instead of knowing about the different states. – Nf

tab.setIcon(R.drawable.tab_1) this is not working for selector drawable? to fix this make sure R is from correct import import com.package.appname.R – Stunt

Answer 3

I used it like this: created an xml file in drawable as shown by @Budius.

in the code: tabLayout.getTabAt(0).setIcon(R.drawable.settings_tab_drawable);

and so on.

Chrissychrist