Implementing SmartTabLayout with ViewPager in Android

To integrate SmartTabLayout with ViewPager, begin by adding the required dependency to your module's build.gradle file.

dependencies {
    implementation 'com.ogaclejapan.smarttablayout:library:2.0.0@aar'
}

Define the layout structure in your XML file, placing the ViewPager and SmartTabLayout within a vertical LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/light_gray"
        app:stl_distributeEvenly="true"
        app:stl_dividerColor="@color/transparent"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/transparent"
        app:stl_indicatorThickness="0dp"
        app:stl_underlineColor="@color/transparent"
        app:stl_underlineThickness="0dp" />

</LinearLayout>

Add tab title strings to your strings.xml resource file.

<string name="title_home">Home</string>
<string name="title_favorites">Favorites</string>
<string name="title_history">History</string>

Define the necessary colors in colors.xml.

<color name="transparent">#00000000</color>
<color name="light_gray">#F5F5F5</color>

Create three blank Fragment classes: HomeFragment, FavoritesFragment, and HistoryFragment.

Construct a custom FragmentPagerAdapter to manage the fragments and their titles.

public class TabPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> fragmentCollection = new ArrayList<>();
    private final List<String> titleCollection = new ArrayList<>();

    public TabPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    public void addTab(Fragment fragment, String title) {
        fragmentCollection.add(fragment);
        titleCollection.add(title);
    }

    @Override
    public int getCount() {
        return fragmentCollection.size();
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentCollection.get(position);
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titleCollection.get(position);
    }
}

In your main Activity, initialize the components and configure the adapter and custom tab views.

public class MainActivity extends AppCompatActivity {
    private SmartTabLayout tabLayout;
    private ViewPager viewPager;
    private TabPagerAdapter pagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.pager);

        pagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
        pagerAdapter.addTab(new HomeFragment(), "Home");
        pagerAdapter.addTab(new FavoritesFragment(), "Favorites");
        pagerAdapter.addTab(new HistoryFragment(), "History");
        viewPager.setOffscreenPageLimit(3);

        final int[] iconResources = {R.drawable.ic_home, R.drawable.ic_favorite, R.drawable.ic_history};
        final int[] titleResources = {R.string.title_home, R.string.title_favorites, R.string.title_history};

        tabLayout.setCustomTabView(new SmartTabLayout.TabProvider() {
            @Override
            public View createTabView(ViewGroup parent, int position, PagerAdapter adapter) {
                View customView = LayoutInflater.from(MainActivity.this)
                        .inflate(R.layout.layout_custom_tab, parent, false);
                ImageView icon = customView.findViewById(R.id.icon);
                TextView title = customView.findViewById(R.id.label);

                icon.setImageResource(iconResources[position]);
                title.setText(titleResources[position]);
                return customView;
            }
        });

        viewPager.setAdapter(pagerAdapter);
        tabLayout.setViewPager(viewPager);
    }
}

Ensure the custom tab layout file layout_custom_tab.xml exists and contains ImageView and TextView elements with the IDs icon and label, respectively. The required icon drawibles (ic_home, ic_favorite, ic_history) should be added to the project's drawable resourecs.

Tags: Android java SmartTabLayout ViewPager Fragment

Posted on Thu, 30 Jul 2026 16:40:59 +0000 by fallen00sniper