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: 7,534
  • screenshot-1336034966953.png
    screenshot-1336034966953.png
    9.9 KB · Views: 6,783
  • AHViewPager2_21.zip
    39.8 KB · Views: 1,926
  • AHViewPager3_00.zip
    74.9 KB · Views: 1,622
Last edited:

Inman

Well-Known Member
Licensed User
Longtime User
Will it be possible to set a different background color for the current tab alone, sort of like the BackgroundColorPressed color but without pressing the tab, so that it provides a better highlighting for the currently selected tab title?
 

Jonas

Member
Licensed User
Longtime User
I have a program were I can add panels to a slider page at runtime. Works great!

But I also trigger the Panel_Touch event so I can move the panel around the page. I created the code first just on a empty activity and it worked flawless but now when I transferred it to the slider page it want to change page when I try to move the panel. Sometimes i can move the panel without changing page sometimes not.

Is there a way to disable the slide function?

I tried Pager.Enabled = False and Tabs.Enabled = False without luck.

/Jonas
 

Inman

Well-Known Member
Licensed User
Longtime User
Bug

I noticed a bug in the AHViewPagerTabs tab selector. When you set android:targetSdkVersion="14", the tab selector doesn't change the tab title properties when you switch tabs. That is, it doesn't move the underline to the selected tab title, nor does it change the tab title font color.

This doesn't happen when targetsdkversion is not set. Also AHViewPagerFixedTabs doesn't have this issue at all with or without the targetsdkversion. Could you please take a look?
 

corwin42

Expert
Licensed User
Longtime User
Corvin, could you maybe provide a short code sample for a wizard-like structure (i.e. without allowing the user to swipe backwards and without allowing him to swipe forward without having filled in all required fields). I'm trying to accomplish this with your library (which is really cool btw.) and I'm really having a hard time.

And another, yet related question: What does the "Enabled" member of the pager actually do? I assumed it would switch of the pagers functionality which would make creating wizards much easier. However, it doesn't seem to do anything (or maybe I'm just too stupid).

Sorry, I don't have an example for a wizard. I even think that the ViewPager is not a good object for such patterns. It doesn't have any methods for restricting page changes etc.

The "enabled" property is a standard property of B4A views. Since the AHViewPager Object is a B4A view it inherits all existing methods. In this special case I think the enabled property does not change anything.
 

corwin42

Expert
Licensed User
Longtime User
Will it be possible to set a different background color for the current tab alone, sort of like the BackgroundColorPressed color but without pressing the tab, so that it provides a better highlighting for the currently selected tab title?

No, there is currently no such property.

But I also trigger the Panel_Touch event so I can move the panel around the page. I created the code first just on a empty activity and it worked flawless but now when I transferred it to the slider page it want to change page when I try to move the panel. Sometimes i can move the panel without changing page sometimes not.

Is there a way to disable the slide function?

I tried Pager.Enabled = False and Tabs.Enabled = False without luck.

No, there is no way to disable slide function. I think it is not a good idea to use such a "move panel" function on a ViewPager page because it will always be confusing.

I noticed a bug in the AHViewPagerTabs tab selector. When you set android:targetSdkVersion="14", the tab selector doesn't change the tab title properties when you switch tabs. That is, it doesn't move the underline to the selected tab title, nor does it change the tab title font color.

This doesn't happen when targetsdkversion is not set. Also AHViewPagerFixedTabs doesn't have this issue at all with or without the targetsdkversion. Could you please take a look?

I will have a look into it. Do you noticed this on a real device or on the emulator? Which Android version you have noticed this on?
 

Inman

Well-Known Member
Licensed User
Longtime User
I will have a look into it. Do you noticed this on a real device or on the emulator? Which Android version you have noticed this on?

I tested on my Samsung Galaxy Note phone running Android 4.0.3. I changed android:targetSdkVersion to 12 and it works perfectly. But with value at 14 it has the issue I mentioned.
 

ukimiku

Active Member
Licensed User
Longtime User
Thank you for sharing this. It look great!

Regards,
 

giannimaione

Well-Known Member
Licensed User
Longtime User
Hi All,

i have 4 Pages/Panels
a Page/Panel #3 have a Listview
at FirstTime a ListView is empty.


how to fill a ListView when user select Page/Panel #3?


Thank you for sharing this. It look great!

Regards,
 

corwin42

Expert
Licensed User
Longtime User
I tested on my Samsung Galaxy Note phone running Android 4.0.3. I changed android:targetSdkVersion to 12 and it works perfectly. But with value at 14 it has the issue I mentioned.

My Galaxy Nexus arrived today. I will check the issue soon.

Hi All,

i have 4 Pages/Panels
a Page/Panel #3 have a Listview
at FirstTime a ListView is empty.


how to fill a ListView when user select Page/Panel #3?

If you want to fill/update the listview whenever the user swipes to page #3 then use ViewPager_PageChanged event for this.
 

giannimaione

Well-Known Member
Licensed User
Longtime User
sorry for my bad english.

If you want to fill/update the listview whenever the user swipes to page #3 then use ViewPager_PageChanged event for this.

I understand a event ViewPager_PageChanged,

but how to fill/update ListView or manipulate any object property? (Top, text, Left, ....)

Can you post a bit Code?
 

bluedude

Well-Known Member
Licensed User
Longtime User
Bug still exists

The bug with tabs that don't change to active color still exists on Jelly Bean, both on my Galaxy Nexus and Nexus 7 (real devices).

Anything you can do about it?
 

corwin42

Expert
Licensed User
Longtime User
That is strange. I can reproduce it with the example but not with my weather app. Though if you slide very slowly it seems to work.

It seems that this is because of hardwareacceleration which is on by default with targetSdkVersion="14". If you add SetApplicationAttribute(android:hardwareAccelerated, "false")
to the manifest then everything is fine again.

I will try to find a solution for it but this may take a while.
 

asmag

Member
Licensed User
Longtime User
Congratulations Marcus!

It is functional and makes the application beautiful.

Thanks for sharing.
 

Roger Garstang

Well-Known Member
Licensed User
Longtime User
There Appears to be a Logic Error with UpperCaseTitle. I'm guessing it is comparing to null or something because setting it to False is like setting it to True and if I never set it then it behaves like False. This is at the beginning setting things up too. I'd assume if changed later you'd need to refresh the titles, but I had just set it to False from the start and it didn't work.

I can't seem to see what OutsideOffset does either...do you have any documentation or explanations/examples for it?
 

Roger Garstang

Well-Known Member
Licensed User
Longtime User
I also seem to be having the drawing issue with the moving tabs not showing the current selection right on Android 4.0.4. First one always shows selected when sliding. If I touch other tabs then they will show selected as well as the first one. Touching a 3rd or 4th will also draw them selected. Then it behaves random after that. The hardwareAccelerated option does nothing for me. Tried every combination of SDK options too and no change. Sometimes if I slide really slow like you say above it will move the bar, but not all the time. Fixed tabs draw fine though. Hopefully it is something simple because the moving tabs look so much better on 2.3.x devices.
 

corwin42

Expert
Licensed User
Longtime User
There Appears to be a Logic Error with UpperCaseTitle.

I can't seem to see what OutsideOffset does either...do you have any documentation or explanations/examples for it?

You are correct. UpperCaseTitle will always set the titles to uppercase regardless of what you use as parameter. Will be fixed in a future version.

This is from the source for OutsideOffset:

B4X:
// The offset at which tabs are going to
// be moved, if they are outside the screen

I haven't used it and it seems that it doesn't change anything.

The author of the original library has released a new project which fixes some bugs and adds several features (the fixed tabs was ported from this new project). Perhaps I will update to this in the future.

B4X:
SetApplicationAttribute(android:hardwareAccelerated, "false")
fixes the drawing issues for me. Though I never had the problem in my real life application only in the example. I think you can even set this attribute on activity level.
 

corwin42

Expert
Licensed User
Longtime User

corwin42

Expert
Licensed User
Longtime User
Version 1.03 released

Updated the first post with version 1.03.

This version should fix the problem with the line not updating on Android 4.0+.

Attention: I have deleted the older versions from the first post. The archive does not include the mandatory android-support-v4.jar anymore. You can find it in the Android SDK. See first post for details.
 
Top