10

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

like this: enter image description here

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

Michael
  • 32,527
  • 49
  • 210
  • 370
Tzahie Leibovich
  • 131
  • 3
  • 10
  • 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? – Joseph Roque Jun 14 '15 at 12:10

3 Answers3

9

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>
Budius
  • 39,391
  • 16
  • 102
  • 144
  • 3
    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`) – ntsh Jun 25 '15 at 11:55
  • 1
    @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. – Richard Le Mesurier Jan 21 '16 at 07:39
1

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.

Nabeel K
  • 5,938
  • 11
  • 38
  • 68
-2

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

Tzahie Leibovich
  • 131
  • 3
  • 10