Download pdf - A Deep Dive Into ViewPager

Copyright © 2013 CommonsWare, LLC

A Deep Dive Into ViewPager

AnDevCon Boston 2013


Getting Horizontal

● Classic Android UX– Focused on vertical scrolling in conventional

apps● Now Presenting: Matias Duarte

– Hired by Google away from Palm/WebOS– Re-emphasized horizontal swiping as a pattern

for moving between peer content


Enter the Protagonist, Stage Left

● ViewPager: Leading Horizontal Swipe Solution– Ships with Android Support package

● Not a backport!

– Works a Bit Like a ListView● You supply an adapter, which supplies “pages”● ViewPager shows current page● User horizontal swipes to move back and forth

between pages


The ViewPager Recipe

● Add a ViewPager to your activity layout● Create a PagerAdapter

– Typical: FragmentPagerAdapter or FragmentStatePagerAdapter

– Extend, override getCount() and getItem()

● Attach the PagerAdapter to the ViewPager via setAdapter()


Where We At?

● Indicators: PagerTitleStrip, PagerTabStrip– Supplied with Android Support package– Add as child of ViewPager– Set android:layout_gravity to be top


Where We At: Wharton Style

● ViewPagerIndicator– Library of indicators– Add as siblings of ViewPager

● E.g., stacked in vertical LinearLayout

– Connect to ViewPager in Java code


ViewPager: Not Perfect

● Cannot Easily Be Used In a Fragment– Nested fragments possible but a bit tricky– Requires Android 4.2 or Android Support

package● Minimum Three Pages Loaded

– Make sure your pages are fast to be created– More likely to be trouble since larger than ListView rows or other AdapterView scenarios


Lights Bar! Camera Bar! Action Bar!

● Fragment Pages and the Action Bar– Standard Fragment/Action Bar Recipe

● setHasOptionsMenu(true)● onCreateOptionsMenu()● onOptionsItemSelected()

– As pages are swiped, action bar items are added/removed


It's Scrolling, All The Way Down

● Handling Scrollable Page Content– Subclass ViewPager– Override canScroll()

● Return true if the designated content could be scrolled, false otherwise

● Touch point and scroll delta supplied, in case you need it (e.g., bezel swiping)


N-Up Printing (Without the Printing Part)

● Showing Multiple Pages at Once– Implement getPageWidth() on your

PagerAdapter● Returns float indicating amount of pager space to

devote to this page (e.g., 0.5f)

– May wish to call setOffscreenPageLimit() on ViewPager to raise number of cached pages


Plume: A Column of Smoke

● Pages on Phones, Columns on Tablets– Devise proper layouts for the screen sizes– If you have a ViewPager, give it the adapter– If you do not have a ViewPager:

● Use static fragments, or● Use the adapter to give you fragments for slots

– Limitation: same basic structure in all configurations (cannot deal with change)


I Can Haz Better Adapter?

● FragmentPagerAdapter and FragmentStatePagerAdapter are nice but not perfect

● Limitations– Using ViewPager in some configurations, but not

all– Adding/removing/reordering pages


Speaker ContactInformation

Source Code