Unidev Tech Blog

Posts Tagged ‘Android 3.2’

Android doesn’t provide a default horizontal pager view. It appears as though the Gallery and Horizontal Scroll View can provide this same functionality. The solution described below allows for easy left and right swipes to load different screens controlled by a single activity. We’ll look at an example of how to use these classes to provide swiping behavior.

There are few steps to follow when getting started.  We provide the full source code for the sample application discussed in this tutorial.  Use the link to see examples.

Step One

Define a linear layout and add a weight sum attribute to “1.0”, add 2 more linear layouts inside a main linear layout with an attribute layout weight to “.50” and set the orientation to “horizontal”. Doing this will cause the 2 linear layouts to share the screen equally (horizontal). In the example we will display 6 images (with a text below the image) on each view, to achieve this add 3 more linear layouts in each sub linear layout added above with layout weight set to “.33” and orientation to vertical. Add image views and text views within the linear layouts. Find the attached source code panellinearview.xml file for the complete code.

Step Two

Create a custom view Group. Your activity needs a view group to determine users on touch event, motion event and screen switched to left or right event. Override onTouchEvent and onInterceptTouchEvent method you’ll need to implement several key methods. Find the attached source code PanelPager.java file for the complete code.

Step Three

Define a PanelPager view in your layout resource file and wrap with a linear layout. In the example we will retrieve display list from a web service and load images from the web. So you’ll add the child views to PanelPager view programmatically based on the display list items size.

Step Four

Retrieve the data list. In the display list iteration process inflate the panellinearview.xml for every six items then populate images and text views in the panellinearview.xml. After every six items in the display list add the inflated panellinearview.xml to the PanelPager view. Since you are loading images from the web you can lazy load the images using LazyLoadImage.java file attached source code. Find the attached source code UnidevBlogActivity.java and LazyLoadImage.java files for the complete code.

The PanelPager will provide a neat swiping behavior same as swipe between multiple views on the Android home screen. There are also classes I included for lazy load images in the panel view. In the layout resource file and activity file you will find the code for pagination as well. In your activity you can implement onScreenSwitchListener to handle pagination.

1) System configuration

• Eclipse Helios
• Android SDK – Android 3.2

2) Requirement

• Panel view/multiple views and swipe between multiple views
• Pagination with active and inactive dots.
• Image Lazy loading if image need to load from the web
• Work on all resolutions and sizes

i. Tablet 1280X800

ii. Tablet 1024X600

iii. 7 inch

iv. 10inch

• Screenshots

3)      Solution

• panelview.xml
• panellinearview.xml
• UnidevBlogActivity.java
• PanelPager.java
• LazyLoadImage.java