Tabs make it easy to explore and switch between different views. Provides a way for displaying grouped content. – google design specification
Supporting tabs in android is the most common and elegant design pattern. Beautiful applications are created using this design pattern namely Google play store app, Google IO 2015 application, Snapdeal application, whats app and many other. The best thing about them is
Almost every other eCommerce application use Tab Layout design pattern.
The best thing about them is the utilization of limited space and displaying content separated in different tabs just at a single place.
In this post, we will be using Google’s new TabLayout included in the support design library release for Android “M”.
The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically:
|
1 2 |
TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); |
However, if you are using a ViewPager for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager() This ensures that tab selection events update the ViewPager and page changes update the selected tab.
Sliding Tabs Layout
Simply add android.support.design.widget.TabLayout which will be used for rendering the different tab options.
|
1 2 3 4 5 6 7 |
<android.support.design.widget.TabLayout android:id="@+id/sliding_tabs_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@drawable/tab_color_selector" app:tabIndicatorColor="@color/dark_primary_color" app:tabMode="scrollable" /> |
Upon closer inspection on how the Tabs actually behave, you would have noticed each Tab upon being active brings in another screen (Fragment). In essence, the entirety of those Tab screens are Fragments, which will be handled by a ViewPager (think of it like a gallery slideshow).
The android.support.v4.view.ViewPager component will be used to page between the various fragments we will create.
|
1 2 3 4 |
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> |
Setup Sliding Tabs
|
1 2 3 4 |
mViewpager = (NonSwipeableViewPager) findViewById(R.id.viewpager); mSlidingTab = (TabLayout) findViewById(R.id.sliding_tabs_product); mViewpager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(), ... ); mSlidingTab.setupWithViewPager(mViewpager); |
Method setupWithViewPager will:
- Add a
ViewPager.OnPageChangeListenerthat will forward events to this TabLayout. - Populate the TabLayout’s tabs from the ViewPager’s
PagerAdapter. - Set our
TabLayout.OnTabSelectedListenerwhich will forward selected events to the ViewPager
Create Fragment
Now that we have the ViewPager and our tabs in our layout, we should start defining the content of each of the tabs. Since each tab is just a fragment being displayed, we need to create and define the Fragment to be shown. You may have one or more fragments in your application depending on your requirements.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
public class PageFragment extends Fragment { public static final String ARG_PAGE = "ARG_PAGE"; public static final String public static PageFragment newInstance(int page, ...) { Bundle args = new Bundle(); args.putInt(ARG_PAGE, page); PageFragment fragment = new PageFragment(); fragment.featuredProducts = featuredProducts; fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // setting up fragment } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view=...; // create view used in the fragment return view; } } |
Implement FragmentPagerAdapter
he next thing to do is to implement the adapter for your ViewPager which controls the order of the tabs, the titles and their associated content. The most important methods to implement here are getPageTitle(int position) which is used to get the title for each tab and getItem(int position) which determines the fragment for each tab.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
public class SampleFragmentPagerAdapter extends FragmentPagerAdapter { final int PAGE_COUNT = 5; private String tabTitles[] = new String[] { "Featured Products", "Latest Products", "Most Viewed", "New Products", "Sale Products" }; private Context context; private JSONArray homePageExtraData; private MobikulApplication mMobikulApplication; private int categoryIndex; public SampleFragmentPagerAdapter(FragmentManager fm, Context context, ...) { super(fm); this.context = context; } @Override public int getCount() { return PAGE_COUNT; } @Override public Fragment getItem(int position) { // Return fragment for each page to be displayed in viewpager return PageFragment.newInstance(position, ...); } @Override public CharSequence getPageTitle(int position) { // Generate title based on item position return tabTitles[position]; } } |
Stay updated to know know more about design library.
Be the first to comment.