Smarttablayout : How to use icons on tabs instead of text?

Question

Hello, I’m using tabs in my learning app with the Smarttablayout library, I’m going to leave below an image of how they look (the image is from the internet, but it just serves to show the same template I made here), and I would like to make just one change in these tabs, instead of appearing these texts in the tabs, appear an icon in each tab, just this. I can’t find anything about it in the library documentation or anywhere on the Internet that’s this same template only with icons. According to the image below, it’s like you’re just taking out the HOME text and putting an icon in its place.

I will leave the xml and Activity code that I used to build the tabs. If anyone can help, thank you very much :P

Código XML:

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/viewPagerTab" />

Class code:

FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(getSupportFragmentManager() ,
                FragmentPagerItems.with(this)
                        .add("Salas Oficiais" , SalasOficiaisFragment.class)
                        .add("Salas Criadas" , SalasCriadasFragment.class)
                        .create());

        ViewPager viewPager = findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);

        SmartTabLayout viewPagerTab = findViewById(R.id.viewPagerTab);
        viewPagerTab.setViewPager(viewPager);

Answer 1

Try it this way:

Create a class named after TintableImageView and leave like this:

public class TintableImageView extends ImageView {

  private ColorStateList tint;

  public TintableImageView(Context context) {
    super(context);
  }

  public TintableImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
  }

  public TintableImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
  }

  private void init(Context context, AttributeSet attrs, int defStyle) {
    TypedArray a = context.obtainStyledAttributes(
        attrs, R.styleable.TintableImageView, defStyle, 0);
    tint = a.getColorStateList(
        R.styleable.TintableImageView_tint);
    a.recycle();
  }

  @Override
  protected void drawableStateChanged() {
    super.drawableStateChanged();
    if (tint != null && tint.isStateful()) {
      updateTintColor();
    }
  }

  public void setColorFilter(ColorStateList tint) {
    this.tint = tint;
    super.setColorFilter(tint.getColorForState(getDrawableState(), 0));
  }

  private void updateTintColor() {
    int color = tint.getColorForState(getDrawableState(), 0);
    setColorFilter(color);
  }

}

res/values create an xml named after attrs and add:

<resources>
  <declare-styleable name="TintableImageView">
    <attr name="tint" format="reference|color"/>
  </declare-styleable>
</resources>

in res/layout create an xml named after custom_tab_icon and put:

<!-- Em yourPackge acrescente o pacote da sua aplicação-->
<yourPackage.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="match_parent"
    android:background="?attr/selectableItemBackground"
    android:scaleType="center"
    app:tint="@drawable/custom_color_icon"
    />

res/drawable create the following xml named after custom_color_icon:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="#73D3C7" android:state_selected="true"/>
  <item android:color="#FF63727B" android:state_selected="false"/>
</selector>

In it you define the colors of the icons.

In the xml your Viewpager is in, above the Viewpager add:

<com.ogaclejapan.smarttablayout.SmartTabLayout
            android:id="@+id/viewpagertab"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    app:stl_distributeEvenly="true"
    app:stl_dividerColor="#00000000"
    app:stl_dividerThickness="0dp"
    app:stl_indicatorColor="#33FFFFFF"
    app:stl_indicatorCornerRadius="500dp"
    app:stl_indicatorGravity="center"
    app:stl_indicatorInterpolation="linear"
    app:stl_indicatorThickness="36dp"
    app:stl_indicatorWidth= "36dp"
    app:stl_indicatorWithoutPadding="true"
    app:stl_underlineColor="#00000000"
    app:stl_underlineThickness="0dp"/>

And finally in your Activity where Viewpager is:

 FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
                getSupportFragmentManager(), FragmentPagerItems.with(this)
                .add("Salas Oficiais" , SalasOficiaisFragment.class)
                .add("Salas Criadas" , SalasCriadasFragment.class)
                .create());

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);

        SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);

        final LayoutInflater inflater = LayoutInflater.from(this);
        final Resources res = getResources();

        viewPagerTab.setCustomTabView(new SmartTabLayout.TabProvider() {
            @Override
            public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {

                ImageView icon = (ImageView) inflater.inflate(R.layout.custom_tab_icon, container,
                        false);
                switch (position) {
                    case 0:
                        icon.setImageDrawable(res.getDrawable(R.seuVector_24dp, null));
                        break;
                    case 1:
                        icon.setImageDrawable(res.getDrawable(R.seuVector2_24dp, null));
                        break;
                    default:
                        throw new IllegalStateException("Invalid position: " + position);
                }

                return icon;
            }
        });

        viewPagerTab.setViewPager(viewPager);

Don’t forget to create the icons you will use in Vector.