Android Design library has brought a number of important material design components to all android 2.1 and higher devices like navigation drawer, snackbar, tab layout , floating labels,floating action button etc .
In this tutorial , we will create one simple application to understand how to implement material tabs in android.
-
Create one project on Android Studio with an activity MainActivity and activity_main.xml as its layout.
-
Change **styles.xml **to use AppCompat NoActionBar theme as :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>- Change activity_main.xml :
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:title="@string/app_name"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>- Create One Fragment FragmentOne with layout fragment_one.xml
public class FragmentOne extends Fragment {
public FragmentOne() {
// empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}
}<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="@color/fragmentOneBack"
android:layout_height="match_parent">
</ScrollView>Similarly create seven more fragments as FragmentTwo, FragmentThree,FragmentFour,FragmentFive…etc.
- Update your **colors.xml **as below and use different colours on each fragment’s xml files .
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="fragmentOneBack">#4FC3F7</color>
<color name="fragmentTwoBack">#DCE775</color>
<color name="fragmentThreeBack">#90A4AE</color>
<color name="fragmentFourBack">#61a745</color>
<color name="fragmentFiveBack">#ba68c8</color>
<color name="fragmentSixBack">#e57373</color>
<color name="fragmentSevenBack">#ff7043</color>
<color name="fragmentEightBack">#aed581</color>
</resources>
- Update your MainActivity :
-
Create one adapter for ViewPager
-
Add fragments to the adapter using
addFragment()method . -
addFragment()method inside the adapter will add the fragment to an ArrayListfragmentListand name of the fragment to a different ArrayListfragmentTitleList -
set up the tablayout with viewpager using
tabLayout.setupWithViewPager(viewPager)
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
//create one adapter , add fragments and set the adapter with viewpager
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "one");
adapter.addFragment(new FragmentTwo(), "two");
adapter.addFragment(new FragmentThree(), "three");
adapter.addFragment(new FragmentFour(), "four");
adapter.addFragment(new FragmentFive(), "five");
adapter.addFragment(new FragmentSix(), "six");
adapter.addFragment(new FragmentSeven(), "seven");
adapter.addFragment(new FragmentEight(), "eight");
viewPager.setAdapter(adapter);
//setup tab layout with viewpager
tabLayout.setupWithViewPager(viewPager);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
private final List<String> fragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
fragmentList.add(fragment);
fragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return fragmentTitleList.get(position);
}
}
}Run this application , result should be look like as below :
You can clone this project from here .
In our next tutorial, we will discuss about different types of customization that can be done with tab layout.