{"id":1777,"date":"2014-10-11T22:49:44","date_gmt":"2014-10-11T17:19:44","guid":{"rendered":"http:\/\/codetheory.in\/?p=1777"},"modified":"2016-07-11T22:30:58","modified_gmt":"2016-07-11T17:00:58","slug":"android-swipe-views-with-tabs","status":"publish","type":"post","link":"https:\/\/codetheory.in\/android-swipe-views-with-tabs\/","title":{"rendered":"Android Swipe (Touch Gesture) Views Using ViewPager, FragmentPagerAdapter and FragmentStatePagerAdapter With Action Bar Tabs"},"content":{"rendered":"<p><a href=\"http:\/\/developer.android.com\/design\/patterns\/swipe-views.html\" target=\"_blank\" rel=\"noopener\">Swipe Views<\/a> are an efficient way to allow the user to laterally navigate among related data items spread across multiple panes using a simple touch gesture (swipes\/flings), making access to data faster and much more enjoyable. Think of the android home screen where you can swipe across multiple sibling screens or the facebook or twitter app with multiple screens (and their respective tabs) where you can just swipe to navigate through them. The entire experience is super interactive and fun. They&#8217;re basically equivalent to slideshows\/carousels which has sections with\/without tabs (or similar controls to navigate) in the web development arena.<\/p>\n<p><!--more--><\/p>\n<p>Android provides us with the <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/ViewPager.html\" target=\"_blank\" rel=\"noopener\"><code>ViewPager<\/code><\/a> class that allows the user to flip left and right through pages of data. To use it, you&#8217;ll have to put the <code>&lt;ViewPager&gt;<\/code> element (from the <a href=\"http:\/\/developer.android.com\/tools\/support-library\/index.html\" target=\"_blank\" rel=\"noopener\">support library<\/a>) inside your XML layout file that&#8217;ll contain multiple child views (which will be the different pages). This is how it&#8217;s done:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;android.support.v4.view.ViewPager xmlns:android=&quot;http:\/\/schemas.android.com\/apk\/res\/android&quot;\r\n    android:id=&quot;@+id\/pager&quot;\r\n    android:layout_width=&quot;match_parent&quot;\r\n    android:layout_height=&quot;match_parent&quot; \/&gt;\r\n<\/pre>\n<p>Once this code is placed in say <code>res\/layout\/activity_main.xml<\/code>, we&#8217;ll have to hook the layout to a <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerAdapter.html\" target=\"_blank\" rel=\"noopener\"><code>PagerAdapter<\/code><\/a> which will populate our <code>ViewPager<\/code> with pages. Basically a <code>PagerAdapter<\/code> is responsible for creating the content for each page. You&#8217;ll most likely want to use one of the following two implementation of <code>PagerAdapter<\/code>:<\/p>\n<ul>\n<li>\n<a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/app\/FragmentPagerAdapter.html\" target=\"_blank\" rel=\"noopener\"><code>FragmentPagerAdapter<\/code><\/a> &#8211; Each page is a fragment and all of them are kept in memory, hence best to use when there&#8217;s a fixed small set of screens to be navigated through. If loads of fragments are shoved in using this adapter then it could lead to a laggy user experience. It works even better when the content of the fragments are static than something that constantly changes or gets updated.\n<\/li>\n<li>\n<a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/app\/FragmentStatePagerAdapter.html\" target=\"_blank\" rel=\"noopener\"><code>FragmentStatePagerAdapter<\/code><\/a> &#8211; Each page is a fragment which gets destroyed as soon as it&#8217;s not visible to the user, i.e., the user navigates to another one. Due to this behaviour it consumes much less memory but then doesn&#8217;t perform as well as its counterpart (<code>FragmentPagerAdapter<\/code>). Hence, it&#8217;s perfect in the cases where the number of pages is high or undetermined.\n<\/li>\n<\/ul>\n<h2>FragmentPagerAdapter<\/h2>\n<p>Let&#8217;s see how our Activity class will look like where we&#8217;ll get the <code>ViewPager<\/code> and hook a <code>FragmentPagerAdapter<\/code> to it.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\npublic class MainActivity extends Activity {\r\n\r\n    CustomPagerAdapter mCustomPagerAdapter;\r\n    ViewPager mViewPager;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n\r\n        \/\/ == Setting up the ViewPager ==\r\n\r\n        mCustomPagerAdapter = new CustomPagerAdapter(getFragmentManager(), this);\r\n\r\n        mViewPager = (ViewPager) findViewById(R.id.pager);\r\n        mViewPager.setAdapter(mCustomPagerAdapter);\r\n    }\r\n}\r\n<\/pre>\n<p>Here&#8217;s our <code>CustomPagerAdapter<\/code> which is a <code>FragmentPagerAdapter<\/code> implementation:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\npublic class CustomPagerAdapter extends FragmentPagerAdapter {\r\n\r\n    protected Context mContext;\r\n\r\n    public CustomPagerAdapter(FragmentManager fm, Context context) {\r\n        super(fm);\r\n        mContext = context;\r\n    }\r\n\r\n    @Override\r\n    \/\/ This method returns the fragment associated with\r\n    \/\/ the specified position.\r\n    \/\/\r\n    \/\/ It is called when the Adapter needs a fragment\r\n    \/\/ and it does not exists.\r\n    public Fragment getItem(int position) {\r\n\r\n        \/\/ Create fragment object\r\n        Fragment fragment = new DemoFragment();\r\n\r\n        \/\/ Attach some data to it that we'll\r\n        \/\/ use to populate our fragment layouts\r\n        Bundle args = new Bundle();\r\n        args.putInt(&quot;page_position&quot;, position + 1);\r\n\r\n        \/\/ Set the arguments on the fragment\r\n        \/\/ that will be fetched in DemoFragment@onCreateView\r\n        fragment.setArguments(args);\r\n\r\n        return fragment;\r\n    }\r\n\r\n    @Override\r\n    public int getCount() {\r\n        return 3;\r\n    }\r\n    \r\n}\r\n<\/pre>\n<p>The <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerAdapter.html#getCount()\" target=\"_blank\" rel=\"noopener\"><code>getCount()<\/code><\/a> method specifies how many views to show in the <code>ViewPager<\/code> and <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v13\/app\/FragmentPagerAdapter.html#getItem(int)\" target=\"_blank\" rel=\"noopener\"><code>getItem()<\/code><\/a> generates the views at the specified positions (passed in as an argument).<\/p>\n<p>What we basically do in the <code>getItem()<\/code> method is instantiate our Fragment and pass it some arguments data that&#8217;ll get used in the fragment&#8217;s (<code>DemoFragment<\/code>) <code>onCreateView()<\/code> method to populate its XML layout. Here&#8217;s how our Fragment class will look like:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\npublic class DemoFragment extends Fragment {\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {\r\n        \/\/ Inflate the layout resource that'll be returned\r\n        View rootView = inflater.inflate(R.layout.fragment_demo, container, false);\r\n\r\n        \/\/ Get the arguments that was supplied when\r\n        \/\/ the fragment was instantiated in the\r\n        \/\/ CustomPagerAdapter\r\n        Bundle args = getArguments();\r\n        ((TextView) rootView.findViewById(R.id.text)).setText(&quot;Page &quot; + args.getInt(&quot;page_position&quot;));\r\n\r\n        return rootView;\r\n    }\r\n}\r\n<\/pre>\n<p>The <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/Fragment.html#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)\" target=\"_blank\" rel=\"noopener\"><code>onCreateView()<\/code><\/a> method is the one that inflates the layout resource and hence instantiates the user interface for that fragment. Here&#8217;s how our <code>res\/layout\/fragment_demo.xml<\/code> will look like:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;FrameLayout xmlns:android=&quot;http:\/\/schemas.android.com\/apk\/res\/android&quot;\r\n    xmlns:tools=&quot;http:\/\/schemas.android.com\/tools&quot;\r\n    android:layout_width=&quot;match_parent&quot;\r\n    android:layout_height=&quot;match_parent&quot;&gt;\r\n\r\n    &lt;TextView\r\n        android:layout_width=&quot;match_parent&quot;\r\n        android:layout_height=&quot;match_parent&quot;\r\n        android:text=&quot;Page 0&quot;\r\n        android:id=&quot;@+id\/text&quot; \/&gt;\r\n\r\n&lt;\/FrameLayout&gt;\r\n<\/pre>\n<p>Pretty simple! All you need to do now is test your app and play with the <code>ViewPager<\/code> by swiping the different screens\/pages in it. They should display &#8220;Page 1&#8221;, &#8220;Page 2&#8221; and &#8220;Page 3&#8221; as texts.<\/p>\n<p><strong>Tip:<\/strong> At times you might have multiple fragments that you&#8217;ll want to return in the <code>getItem()<\/code> method of the <code>FragmentPagerAdapter<\/code> implementation. Then you could do something like this:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nswitch (position) {\r\n    case 0:\r\n        return new FirstFragment();\r\n    case 1:\r\n        return new SecondFragment();\r\n    case 2:\r\n        return new ThirdFragment();\r\n}\r\n<\/pre>\n<p>&#8230; and all of them having different layout resources that&#8217;d display different sorts of data like photo gallery, activity feed, list of messages, etc.<\/p>\n<h2>FragmentStatePagerAdapter<\/h2>\n<p>I think I&#8217;ve already explained why this <code>PagerAdapter<\/code> is useful and when it should be used. Its main advantage is low memory consumption due to the destruction of fragments as soon as they go off the screen. So as soon as the user navigates to a particular screen the one next to it is generated\/rebuilt by calling <code>getItem()<\/code> in the adapter implementation. When the number of the pages are undetermined or are too many (for example in a book reader) then this adapter makes more sense than the previous one explained.<\/p>\n<p>In order to understand how to work with it, all you need to do is use the previous example and instead of making the <code>CustomPagerAdapter<\/code> extend <code>FragmentPagerAdapter<\/code>, make it subclass <code>FragmentStatePagerAdapter<\/code>. Then in <code>getItem()<\/code> you could add a <code>Log.d()<\/code> to see when its called while swiping through the views inside the view pager.<\/p>\n<p>By now you&#8217;ll know the differences between <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/app\/FragmentPagerAdapter.html\" target=\"_blank\" rel=\"noopener\">FragmentPagerAdapter<\/a> and <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/app\/FragmentStatePagerAdapter.html\" target=\"_blank\" rel=\"noopener\">FragmentStatePagerAdapter<\/a> and which one to use when.<\/p>\n<h2>Adding Tabs to Action Bar<\/h2>\n<p>Along with having our swiping views there has to be something that hints the user that he can swipe through for a much better user experience. Tabs can do a great job for that purpose and in Android we can use the <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/ActionBar.html\" target=\"_blank\" rel=\"noopener\"><code>ActionBar<\/code><\/a> to quickly create them and integrate with our <code>ViewPager<\/code> making them work in conjunction. To specify that tabs should be displayed in the action bar we&#8217;ll have to set the navigation mode on the action bar object in <code>onCreate()<\/code> method like this:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nfinal ActionBar actionBar = getActionBar();\r\n\/\/ specify that action bar should display tabs\r\nactionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);\r\n<\/pre>\n<p>Next, we&#8217;ll have to add the tabs, specify their text and add various listeners for them.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n\/\/ == Setting up the tabs ==\r\n\r\nString&#x5B;] tabs = {\r\n        &quot;Tab One&quot;, &quot;Tab Two&quot;, &quot;Tab Three&quot;\r\n};\r\nActionBar.Tab tab;\r\nfor (int i = 0; i &lt; tabs.length; i++) {\r\n    tab = actionBar\r\n            .newTab() \/\/ create new tab\r\n            .setText(tabs&#x5B;i]) \/\/ set text\r\n            .setTabListener(tabListener); \/\/ set tab listeners\r\n    \r\n    \/\/ add the tab to the action bar finally\r\n    actionBar.addTab(tab);\r\n}\r\n<\/pre>\n<p>Pretty straightforward piece of code. Notice the part where we set the tab listener using <code>setTabListener(tabListener)<\/code>. It&#8217;s time to define the <code>tabListener<\/code> object now, whose methods will be called whenever the user changes tabs.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nActionBar.TabListener tabListener = new ActionBar.TabListener() {\r\n    @Override\r\n    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n        \/\/ show the tab\r\n\r\n        int position = tab.getPosition();\r\n        mViewPager.setCurrentItem(position);\r\n    }\r\n\r\n    @Override\r\n    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n        \/\/ hide the tab, we don't need this in this example\r\n    }\r\n\r\n    @Override\r\n    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n        \/\/ when tab is reselected, we don't really need this\r\n    }\r\n};\r\n<\/pre>\n<p>Super simple and easy! When a tab is selected, we show the respective screen in our <code>ViewPager<\/code> by calling its <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/ViewPager.html#setCurrentItem(int)\" target=\"_blank\" rel=\"noopener\"><code>setCurrentItem()<\/code><\/a> method.<\/p>\n<p>Instead of creating this <code>tabListener<\/code> object inside the <code>onCreate()<\/code> method we could have also made our Activity class implement <a href=\"http:\/\/developer.android.com\/reference\/android\/app\/ActionBar.TabListener.html\" target=\"_blank\" rel=\"noopener\"><code>ActionBar.TabListener<\/code><\/a> and then overriden the methods as our activity class&#8217;s methods. The only change then required would be to modify <code>setTabListener(tabListener)<\/code> to <code>setTabListener(this)<\/code>.<\/p>\n<p>Likewise, when the user changes the screen inside the <code>ViewPager<\/code> with a swipe touch gesture, we should select the corresponding tab. We can do this with the help of <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/ViewPager.OnPageChangeListener.html\" target=\"_blank\" rel=\"noopener\"><code>ViewPager.OnPageChangeListener<\/code><\/a> interface or the <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/ViewPager.SimpleOnPageChangeListener.html\" target=\"_blank\" rel=\"noopener\"><code>ViewPager.SimpleOnPageChangeListener<\/code><\/a> class. We&#8217;ll use the latter in this case so that we don&#8217;t have to override all the methods from the interface since when we won&#8217;t be using most of them.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n\/\/ When swiping between different sections, select the corresponding tab\r\nmViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {\r\n    @Override\r\n    public void onPageSelected(int position) {\r\n        actionBar.setSelectedNavigationItem(position);\r\n    }\r\n});\r\n<\/pre>\n<p>So the entire <code>onCreate()<\/code> method will somewhat look like this:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nCustomPagerAdapter mCustomPagerAdapter;\r\nViewPager mViewPager;\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\n    super.onCreate(savedInstanceState);\r\n    setContentView(R.layout.activity_main);\r\n\r\n    \/\/ Setup the action bar for tabs\r\n    final ActionBar actionBar = getActionBar();\r\n    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);\r\n    actionBar.setTitle(&quot;App Title&quot;); \/\/ If you want to set an app title\r\n\r\n    \/\/ == Setting up the ViewPager ==\r\n\r\n    mCustomPagerAdapter = new CustomPagerAdapter(getFragmentManager(), this);\r\n\r\n    mViewPager = (ViewPager) findViewById(R.id.pager);\r\n    mViewPager.setAdapter(mCustomPagerAdapter);\r\n\r\n    \/\/ When swiping between different sections, select the corresponding tab\r\n    mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {\r\n        @Override\r\n        public void onPageSelected(int position) {\r\n            actionBar.setSelectedNavigationItem(position);\r\n        }\r\n    });\r\n\r\n\r\n    \/\/ == Setting up the tabs ==\r\n\r\n    ActionBar.TabListener tabListener = new ActionBar.TabListener() {\r\n        @Override\r\n        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n            \/\/ show the tab\r\n\r\n            int position = tab.getPosition();\r\n            mViewPager.setCurrentItem(position);\r\n        }\r\n\r\n        @Override\r\n        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n            \/\/ hide the tab, we don't need this in this example\r\n        }\r\n\r\n        @Override\r\n        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {\r\n            \/\/ when tab is reselected, we don't really need this\r\n        }\r\n    };\r\n\r\n    String&#x5B;] tabs = {\r\n            &quot;Tab One&quot;, &quot;Tab Two&quot;, &quot;Tab Three&quot;\r\n    };\r\n    ActionBar.Tab tab;\r\n    for (int i = 0; i &lt; tabs.length; i++) {\r\n        tab = actionBar\r\n                .newTab() \/\/ create new tab\r\n                .setText(tabs&#x5B;i]) \/\/ set text\r\n                .setTabListener(tabListener); \/\/ set tab listener\r\n        actionBar.addTab(tab);\r\n    }\r\n}\r\n<\/pre>\n<p>If for some reason you don&#8217;t want to include tabs in the action bar but have it in the <code>ViewPager<\/code> itself as <a href=\"http:\/\/developer.android.com\/design\/building-blocks\/tabs.html#scrollable\" target=\"_blank\" rel=\"noopener\">scrollable tabs<\/a> then we can make use of <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTitleStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTitleStrip<\/code><\/a> or <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTabStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTabStrip<\/code><\/a> that we&#8217;ll cover in another tutorial.<\/p>\n<h2>Conclusion<\/h2>\n<p>So we covered quite a bit in this tutorial. We learnt how to create a swipeable UI element with multiple screens using <code>ViewPager<\/code> and injecting the screens\/pages into it through <code>PagerAdapter<\/code> implementations like <code>FragmentPagerAdapter<\/code> and <code>FragmentStatePagerAdapter<\/code>. We also saw how we can integrate tabs to the entire Activity in the action bar that works in correspondence with the <code>ViewPager<\/code>.<\/p>\n<p>It&#8217;s quite interesting to note that <code>ViewPager<\/code> is not only restricted to be used with fragments but can be used with any other View like <code>ImageView<\/code> to create an image based slideshow. In that case the custom pager adapter implementation has to be of <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerAdapter.html\" target=\"_blank\" rel=\"noopener\"><code>PagerAdapter<\/code><\/a> directly. We&#8217;ll see how to do this in another post.<\/p>\n<p>If you have any questions or want to discuss something regarding this topic, then feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Swipe Views are an efficient way to allow the user to laterally navigate among related data items spread across multiple panes using a simple touch gesture (swipes\/flings), making access to data faster and much more enjoyable. Think of the android home screen where you can swipe across multiple sibling screens or the facebook or twitter &hellip; <a href=\"https:\/\/codetheory.in\/android-swipe-views-with-tabs\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Android Swipe (Touch Gesture) Views Using ViewPager, FragmentPagerAdapter and FragmentStatePagerAdapter With Action Bar Tabs&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[105,128,89],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1777"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=1777"}],"version-history":[{"count":8,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1777\/revisions"}],"predecessor-version":[{"id":2500,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1777\/revisions\/2500"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=1777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=1777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=1777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}