B4A Library AHViewPager library - Sliding panels now perfect

This library is a B4A implementation of the ViewPager object provided by the compatibility class from google. With this library it is possible to add sliding panels to your apps.

AHPageContainer - This object is a container for the pages of the AHViewPager. You should add Panels to this object.

AHViewPager - This is the main object which provides the sliding panels.

All the Tabs objects are deprecated now. You can use them but I don't enhance them anymore. For nice looking Tabs please use the DSTabLayout object of the DesignSupport library.
Alternatively you can use the TabStripViewPager.


Installation:
  • From V3.00 on the library requires B4A 6.0 or later.
  • This library depends on the Android Support library so you need to install the Android Support repository in the Extras section with SDK Manager.
  • Copy the AHViewPager.xml and AHViewPager.jar files to your additional libraries folder.
Example project:

For an example project for this library see the Design Support Library.

Your support:
Creating libraries and wrappers for existing library projects is a lot of work. The use of this library is totally free and you even don't need to mention in your app that you use it.
But if you use this library in your projects and you think it is useful to you please consider to make a donation:

Thanks very much for your support.

Version History:

1.00:
- initial version

1.01:
- Added AHViewPagerFixedTabs object for a fixed tab indicator
- Fixed a bug that it was impossible to get the canvas of a panel which was added to the container (It was impossible to display charts on a page)
- Example for AHViewPagerFixedTabs tab indicator

1.02: (Never released)
- Fixes problem with tab height (Line is now always on the bottom)

1.03:
- Fixes problem with Line sometimes not updating correctly on Android 4.0+
- Fix UppercaseTitle property

2.0:
- Complete Rewrite of the Swipey tabs code to fix some bugs with newer android versions.

2.01:
- New property for the AHViewPager object: PagingEnabled - Enables or disables paging for the ViewPager.

2.02:
- New events PageScrolled and PageScrollStateChanged (with SCROLLSTATE constants)
See post 227 for details

2.20:
- Use raiseEventfromUI() in most events
- New SupportTabs object
- New SupportTitles object
- Support for Designer (as a Custom View)
- some minor internal changes and bug fixes

2.21:
- Use raiseEvent() for PageCreated and PageDestroyed event again to prevent double UI refreshes
- Added @RaiseSynchronousEvents annotation to GotoPage() (to make it better compatible with rapid debugger.

3.00:
- Support for Designer Custom Properties.
- Uses maven repository to access support library. (B4A 6.0 or later required)

Attention: V2.20 has an API change which makes the ViewPager incompatible with older versions. The AHPageContainer parameter is removed from the Initialize() method. Initialize2() has the old signature. If you use Initialize() (or add the View to the Designer as a custom view) then you have to set the container object with ViewPager.PageContainer = <YourContainer>

The examples use the old Initialize method, so they are broken. I was too lazy to fix them because I recommend the tab indicator from the Design Support library for a nice looking Material Design app.
 

Attachments

  • screenshot-1336034831196.png
    screenshot-1336034831196.png
    10.1 KB · Views: 8,092
  • screenshot-1336034966953.png
    screenshot-1336034966953.png
    9.9 KB · Views: 7,346
  • AHViewPager2_21.zip
    39.8 KB · Views: 2,349
  • AHViewPager3_00.zip
    74.9 KB · Views: 2,264
Last edited:

DDC

Member
Licensed User
Longtime User
Hello

Very nice library, thank you corwin42

I wonder if the tab selector above could have a different behavior. The first title tab is always at the center of the screen and I would like to have it aligned to the left, like the fixed tab example. It would then be scrolled off the screen as the user slides to the other tabs, as it's doing now

Is this possible?

I would like to implement a tab mechanism similar to the BBC News App.

Thank you
 

corwin42

Expert
Licensed User
Longtime User
The tabs and sliding tabs of the AHViewPager library are more or less deprecated. For modern UI you should use the TabLayout object of the Design Support library. I think it works how you explained it.
 

Kwame Twum

Active Member
Licensed User
Longtime User
Please, whenever I load a layout file (*.bal) into a panel for one of the tabs, at times, the initial design (from the B4A Designer) gets distorted.
Thanks in advance for the help. :)
 
Last edited:

corwin42

Expert
Licensed User
Longtime User
Please, whenever I load a layout file (*.bal) into a panel for one of the tabs, at times, the initial design (from the B4A Designer) gets distorted.
Thanks in advance for the help. :)

Can you provide a sample project to show this effect?
 

Indy

Active Member
Licensed User
Longtime User
Hi corwin42

I'm using your library in a prototype app I'm doing and so far it's working great! Thanks! I do have a quick question for you though. I was wondering whether there was a way of making the FixedTabs not have a transparent background. Is this possible? I have set a background colour and set the BringToFront property but, still the main panel when moved upwards displays it's content over the tabs. You maybe wondering why I move the panel. The reason is when the keyboard appears it obscures the fields on the form therefore I move the panel by the same height of the keyboard upwards so the users can see what they're typing.

If you do know of a method of achieving this I would be very appreciative if you could share it, although my backup plan is to simply hide/un-hide the tabs accordingly, which I have tested and that does work.

Thanks.
 

Blue.Sky

Active Member
Licensed User
Longtime User
How can i change speed of changing slide?
 

Mousa Najafi

Member
Licensed User
Longtime User
I added webview to fixedtabbedlayout which is showing webpages correctly on android 4.2 but is blank on android 5
also in one tab I used customlistview including iconbutton that id invisible on android 5 but is ok on older android versions
I don't know this relates to iconbutton and webview or AHViewPager
 

Indy

Active Member
Licensed User
Longtime User
Has anybody else noticed that there is a gap between the page container and the Android navigation bar (vertically speaking)? Is this a bug or by design?
 

buras3

Active Member
Licensed User
Longtime User
I get an error when I open the exmple
java.lang.NoSuchMethodError: addOnPageChangeListener
help
 

Indy

Active Member
Licensed User
Longtime User
Has anybody else noticed that there is a gap between the page container and the Android navigation bar (vertically speaking)? Is this a bug or by design?
Fixed! It was within the example code. I hadn't spotted it but, there was a reduction in the height calculation of 180dip, which resulted in a permanent blank area above the navigation bar. Removed this and set height=100%y fixed it.

Thanks
 

BarryW

Active Member
Licensed User
Longtime User
This library is a B4A implementation of the ViewPager object provided by the compatibility class from google. With this library it is possible to add sliding panels to your apps with a very nice tab selector and page indicator like in some google apps (Market etc)

There are four objects in this library:

AHPageContainer - This object is a container for the pages of the AHViewPager. You should add Panels to this object.

AHViewPager - This is the main object which provides the sliding panels.

AHViewPagerTabs - This (optional) object provides a nice tab selector and indicator for the sliding panels. This object is based on the ViewPagerTabs implementation from Andreas Stütz and you can find it here.

AHViewPagerFixedTabs - This (optional) object provides a nice tab selector with fixed tabs. This object is based on the ViewPagerExtensions library from Andreas Stütz See here
For a detailed usage explanation see the example project.

Installation:
You need at least B4A 1.8.
Copy the jar file and the xml file to your custom libs folder.
Copy the android-support-v4.jar from the Android SDK to your custom libs folder (see below)

Attention: This library uses the android-support-v4.jar library. You have to install it with the Android SDK Manager. Please add the Extras/Android Support package. Then you will find the jar under <SDK root folder>\extras\android\support\v4. Please copy the android-support-v4.jar file to your custom libs folder!

Be sure to always use the latest support library!




Version History:

1.00:
- initial version

1.01:
- Added AHViewPagerFixedTabs object for a fixed tab indicator
- Fixed a bug that it was impossible to get the canvas of a panel which was added to the container (It was impossible to display charts on a page)
- Example for AHViewPagerFixedTabs tab indicator

1.02: (Never released)
- Fixes problem with tab height (Line is now always on the bottom)

1.03:
- Fixes problem with Line sometimes not updating correctly on Android 4.0+
- Fix UppercaseTitle property

2.0:
- Complete Rewrite of the Swipey tabs code to fix some bugs with newer android versions.

2.01:
- New property for the AHViewPager object: PagingEnabled - Enables or disables paging for the ViewPager.

2.02:
- New events PageScrolled and PageScrollStateChanged (with SCROLLSTATE constants)
See post 227 for details

2.20:
- Use raiseEventfromUI() in most events
- New SupportTabs object
- New SupportTitles object
- Support for Designer (as a Custom View)
- some minor internal changes and bug fixes

2.21:
- Use raiseEvent() for PageCreated and PageDestroyed event again to prevent double UI refreshes
- Added @RaiseSynchronousEvents annotation to GotoPage() (to make it better compatible with rapid debugger.

Attention: V2.20 has an API change which makes the ViewPager incompatible with older versions. The AHPageContainer parameter is removed from the Initialize() method. Initialize2() has the old signature. If you use Initialize() (or add the View to the Designer as a custom view) then you have to set the container object with ViewPager.PageContainer = <YourContainer>

The examples use the old Initialize method, so they are broken. I was too lazy to fix them because I recommend the tab indicator from the upcoming Design Support library for a nice looking Material Design app.

Is it possible to swipe from top to botton. Animate from top to botton vise versa... Tnx
 

wimpie3

Well-Known Member
Licensed User
Longtime User
Is it possible to make the sliding panels scroll infinite? That could be useful to create a calendar for instance.
 

BarryW

Active Member
Licensed User
Longtime User
What kind of animation or gesture used in this library to make it smooth upon swiping? Tnx..
 

corwin42

Expert
Licensed User
Longtime User
Is it possible to make the sliding panels scroll infinite? That could be useful to create a calendar for instance.
Should be, though I never tested it myself. With PageContainer.AddPageAt() you can dynamically add and remove pages whereever you want. It should be possible to create infinite scrolling with it.

What kind of animation or gesture used in this library to make it smooth upon swiping? Tnx..
The ViewPager object from the support library does all the sliding and animations itself. AHViewPager is based on it and does not add additional animations.
 

wimpie3

Well-Known Member
Licensed User
Longtime User
Should be, though I never tested it myself. With PageContainer.AddPageAt() you can dynamically add and remove pages whereever you want. It should be possible to create infinite scrolling with it.

That sounds easier than it is. You can indeed insert and delete pages on the Pager_PageDestroyed event. But doing so fires the same event AGAIN (which is logical to me, but in this case this is a real problem).
 

corwin42

Expert
Licensed User
Longtime User
Why do you want to modify the page structure on Pager_PageDestroyed? Seems to be a bad place for me. Something like Pager_PageChanged sounds much more useful.
 
Top