{"id":1781,"date":"2014-10-12T23:24:36","date_gmt":"2014-10-12T17:54:36","guid":{"rendered":"http:\/\/codetheory.in\/?p=1781"},"modified":"2014-10-13T13:16:15","modified_gmt":"2014-10-13T07:46:15","slug":"android-pagertabstrip-pagertitlestrip-viewpager","status":"publish","type":"post","link":"https:\/\/codetheory.in\/android-pagertabstrip-pagertitlestrip-viewpager\/","title":{"rendered":"Android PagerTabStrip and PagerTitleStrip with ViewPager"},"content":{"rendered":"<p><strong>Note:<\/strong> This post is sort of a continuation of my <a href=\"http:\/\/codetheory.in\/android-swipe-views-with-tabs\/\">previous post<\/a> on <code>ViewPager<\/code> and its related pager adapters with tabs.<\/p>\n<p>When working with <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/ViewPager.html\" target=\"_blank\" rel=\"noopener\"><code>ViewPager<\/code><\/a> we most likely include action bar tabs and integrate them with their corresponding screens in the <code>ViewPager<\/code>. Action bar tabs works great but just incase if you prefer <a href=\"http:\/\/developer.android.com\/design\/building-blocks\/tabs.html#scrollable\" target=\"_blank\" rel=\"noopener\">scrollable tabs<\/a> and want to use them over action bar tabs then there are two ways to achieve that:<\/p>\n<ul>\n<li><a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTabStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTabStrip<\/code><\/a><\/li>\n<li><a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTitleStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTitleStrip<\/code><\/a><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>Both of them are supposed to be used as a child view of the <code>ViewPager<\/code> widget in the XML layout resource. So here&#8217;s how a <code>ViewPager<\/code> with a <code>PagerTabStrip<\/code> in it would look like in the layout file:<\/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\r\n    &lt;android.support.v4.view.PagerTabStrip\r\n        android:id=&quot;@+id\/pager_tab_strip&quot;\r\n        android:layout_width=&quot;match_parent&quot;\r\n        android:layout_height=&quot;wrap_content&quot;\r\n        android:layout_gravity=&quot;top&quot;\r\n        android:background=&quot;#33b5e5&quot;\r\n        android:textColor=&quot;#fff&quot;\r\n        android:paddingTop=&quot;5dp&quot;\r\n        android:paddingBottom=&quot;5dp&quot; \/&gt;\r\n\r\n\r\n&lt;\/android.support.v4.view.ViewPager&gt;\r\n<\/pre>\n<p>Similarly, this is how the layout code for a <code>ViewPager<\/code> with a top-aligned <code>PagerTitleStrip<\/code> would be like:<\/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\r\n    &lt;android.support.v4.view.PagerTitleStrip\r\n        android:id=&quot;@+id\/pager_title_strip&quot;\r\n        android:layout_width=&quot;match_parent&quot;\r\n        android:layout_height=&quot;wrap_content&quot;\r\n        android:layout_gravity=&quot;top&quot;\r\n        android:background=&quot;#33b5e5&quot;\r\n        android:textColor=&quot;#fff&quot;\r\n        android:paddingTop=&quot;5dp&quot;\r\n        android:paddingBottom=&quot;5dp&quot; \/&gt;\r\n\r\n\r\n&lt;\/android.support.v4.view.ViewPager&gt;\r\n<\/pre>\n<p>Not much of a difference in the code between both the versions. Only the tag name and ID got changed.<\/p>\n<p>Now when you test this code in your emulator or a physical android device, then you&#8217;ll notice a blue strip at the top of the view pager. You&#8217;ll be able to navigate through the pager screens but there won&#8217;t be any text in the pager strip unless they&#8217;re specified in the <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerAdapter.html#getPageTitle(int)\" target=\"_blank\" rel=\"noopener\"><code>getPageTitle()<\/code><\/a> method of the pager adapter implementation which should return the title for specific pages. The method implementation should look something like this:<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n@Override\r\npublic CharSequence getPageTitle(int position) {\r\n    switch (position) {\r\n        case 0:\r\n            return &quot;Tab One&quot;;\r\n        case 1:\r\n            return &quot;Tab Two&quot;;\r\n        case 2:\r\n            return &quot;Tab Three&quot;;\r\n    }\r\n\r\n    return null;\r\n}\r\n<\/pre>\n<p>The method should return <code>null<\/code> which would indicate no title for that particular page. Although I used <code>switch<\/code> block you could also write the same code in another way by using arrays and returning the corresponding title by using the <code>position<\/code> argument as the array index.<\/p>\n<h2>Code Sample<\/h2>\n<p>For the sake of quickly testing `PagerTabStrip` I&#8217;ve put together some code. Here&#8217;s the Activity bit:<\/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        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    class CustomPagerAdapter extends FragmentPagerAdapter {\r\n\r\n        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        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 the fragment\r\n            \/\/ that we'll 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 the\r\n            \/\/ 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        @Override\r\n        public CharSequence getPageTitle(int position) {\r\n            return &quot;Page &quot; + (position + 1);\r\n        }\r\n    }\r\n\r\n    class DemoFragment extends Fragment {\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.textView)).setText(&quot;Page &quot; + args.getInt(&quot;page_position&quot;));\r\n\r\n            return rootView;\r\n        }\r\n    }\r\n\r\n    @Override\r\n    public boolean onCreateOptionsMenu(Menu menu) {\r\n        \/\/ Inflate the menu; this adds items to the action bar if it is present.\r\n        getMenuInflater().inflate(R.menu.gesture, menu);\r\n        return true;\r\n    }\r\n\r\n    @Override\r\n    public boolean onOptionsItemSelected(MenuItem item) {\r\n        \/\/ Handle action bar item clicks here. The action bar will\r\n        \/\/ automatically handle clicks on the Home\/Up button, so long\r\n        \/\/ as you specify a parent activity in AndroidManifest.xml.\r\n        int id = item.getItemId();\r\n        if (id == R.id.action_settings) {\r\n            return true;\r\n        }\r\n        return super.onOptionsItemSelected(item);\r\n    }\r\n}\r\n<\/pre>\n<p>This is how the <code>res\/layout\/activity_main.xml<\/code> should be like:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;RelativeLayout 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;\r\n    android:paddingLeft=&quot;@dimen\/activity_horizontal_margin&quot;\r\n    android:paddingRight=&quot;@dimen\/activity_horizontal_margin&quot;\r\n    android:paddingTop=&quot;@dimen\/activity_vertical_margin&quot;\r\n    android:paddingBottom=&quot;@dimen\/activity_vertical_margin&quot;\r\n    android:id=&quot;@+id\/relativeLayout&quot;&gt;\r\n\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\r\n        &lt;android.support.v4.view.PagerTabStrip\r\n            android:id=&quot;@+id\/pager_title_strip&quot;\r\n            android:layout_width=&quot;match_parent&quot;\r\n            android:layout_height=&quot;wrap_content&quot;\r\n            android:layout_gravity=&quot;top&quot;\r\n            android:background=&quot;#33b5e5&quot;\r\n            android:textColor=&quot;#fff&quot;\r\n            android:paddingTop=&quot;5dp&quot;\r\n            android:paddingBottom=&quot;5dp&quot; \/&gt;\r\n\r\n    &lt;\/android.support.v4.view.ViewPager&gt;\r\n\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p>Finally here&#8217;s the <code>res\/layout\/fragment_demo.xml<\/code>:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n\r\n&lt;LinearLayout xmlns:android=&quot;http:\/\/schemas.android.com\/apk\/res\/android&quot;\r\n    android:orientation=&quot;vertical&quot; 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;wrap_content&quot;\r\n        android:layout_height=&quot;wrap_content&quot;\r\n        android:text=&quot;New Text&quot;\r\n        android:id=&quot;@+id\/textView&quot; \/&gt;\r\n&lt;\/LinearLayout&gt;\r\n<\/pre>\n<p>Go ahead and test your app now! Play with the view pager and its top-aligned pager strip. You can also customize the <code>PagerTabStrip<\/code> programatically. Feel free to go through the public methods <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTabStrip.html\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h2>PagerTabStrip vs PagerTitleStrip &#8211; the Difference<\/h2>\n<p>Although both of them are quite similar there are certain differences which makes <code>PagerTabStrip<\/code> superior compared to the other one and hence most likely you&#8217;ll always want to use it over the other.<\/p>\n<p><code>PagerTitleStrip<\/code> only indicates the section we&#8217;re in through the title names. On the contrary, <code>PagerTabStrip<\/code> not only indicates the section name but also has the tab indicator (bottom border) that depicts the active tab. Also <code>PagerTabStrip<\/code> is interactive which means you can click on the tabs to switch among screens while you cannot do that with <code>PagerTitleStrip<\/code> (major limitation IMHO).<\/p>\n<p>On going through the public methods for both in the docs, you&#8217;ll notice <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTabStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTabStrip<\/code><\/a> has marginally more methods or options to customize compared to <a href=\"http:\/\/developer.android.com\/reference\/android\/support\/v4\/view\/PagerTitleStrip.html\" target=\"_blank\" rel=\"noopener\"><code>PagerTitleStrip<\/code><\/a>.<\/p>\n<p>I came across this plugin called <a href=\"http:\/\/viewpagerindicator.com\/\" target=\"_blank\" rel=\"noopener\">ViewPagerIndicator<\/a> that allows you to customize your pager strip in so many different ways. You can even replicate the google play scrollable tabs with this plugin.<\/p>\n<p>Hope that helps!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is sort of a continuation of my previous post on ViewPager and its related pager adapters with tabs. When working with ViewPager we most likely include action bar tabs and integrate them with their corresponding screens in the ViewPager. Action bar tabs works great but just incase if you prefer scrollable tabs &hellip; <a href=\"https:\/\/codetheory.in\/android-pagertabstrip-pagertitlestrip-viewpager\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Android PagerTabStrip and PagerTitleStrip with ViewPager&#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,89],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1781"}],"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=1781"}],"version-history":[{"count":4,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1781\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/1781\/revisions\/1785"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=1781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=1781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=1781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}