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.