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,116
  • screenshot-1336034966953.png
    screenshot-1336034966953.png
    9.9 KB · Views: 7,372
  • AHViewPager2_21.zip
    39.8 KB · Views: 2,374
  • AHViewPager3_00.zip
    74.9 KB · Views: 2,293
Last edited:

Smee

Well-Known Member
Licensed User
Longtime User
Hello,
I wanted to create a table in one of the tab using the class [Class] TableView - Supports tables of any size.

Is it possible? If it were, I'd appreciate an example ...

Thanks


i have spent quite a few hours trying to do exactly the same but without any success. Anyone?:BangHead:
 

NJDude

Expert
Licensed User
Longtime User
Smee and javiers:

Look at the attached sample, there you'll see the "[Class] TableView - Supports tables of any size." added to a sliding panel.
 

Attachments

  • Sample_Table_toPanel.zip
    12.6 KB · Views: 329

Roger Garstang

Well-Known Member
Licensed User
Longtime User
Icons was the first thing I added to my TabBar library I just posted. What type of View is used to make the buttons/tabs? I just use setCompoundDrawablesWithIntrinsicBounds in my TabBar, so anything inheriting from a TextView can use it. (I'm actually surprised Erel hasn't added it to Labels and Buttons in B4A)

If not possible, what is needed to interface with the Sliding Panel portion and I can add it to the TabBar? I like the sliding panels...even though it has issues with one of my apps that is a panel completely made up of a Listview so doesn't play well. (If I allow the swipe then the ListView doesn't scroll right and if I block the parent's interception of Touch then it doesn't swipe well)
 

erfan

Member
Licensed User
Longtime User
can you do me a favor and make a fixed tab with icon?
i dont no idea how to do it
plzzzz
 
Last edited:

corwin42

Expert
Licensed User
Longtime User
Updated library to Version 2.02

This version adds the PageScrolled and PageScrollStateChanged events.

PageScrolled fires permanently while dragging a page and reports how much (in percent and pixel) the page is dragged.

PageScrollStateChanged fires when the scroll state changes. It can be SCROLLSTATE_IDLE, SCROLLSTATE_DRAGGING and SCROLLSTATE_SETTLING.

These events are useful to create custom Tab indicators. It should now be possible to create a swipey tab indicator completely in B4A.
Another thing is if you want to place a viewpager onto a scrollview you can stop the scrollview from intercepting the touch event if dragging a page has started.

Example:
If the page is dragged slightly to the left or right, we stop the ScrollView from intercepting the touch event so we can drag the page normal. Otherwise if you drag vertical the scrollview will handle the event.

B4X:
Sub VP_PageScrolled (Position As Int, PositionOffset As Float, PositionOffsetPixels As Int)
   If PositionOffset > 0.5 Then PositionOffset = 1 - PositionOffset
   If PositionOffset > 0.02 Then DisallowScrolling(ScrollView1)
End Sub

B4X:
Sub DisallowScrolling(sv As ScrollView)
   Dim r As Reflector
   
   r.Target = sv
   r.RunMethod4("requestDisallowInterceptTouchEvent", Array As Object(True), Array As String("java.lang.boolean"))
End Sub
 

airblaster

Active Member
Licensed User
Longtime User
Hi corwin42,

I discovered a issue with the AHViewPagerTabs:
On a HTC Wildfire everything looks perfect.
On a LG P990 however there is some space between the line and the center line.
I've tried many settings to fix this, but nothing worked on both phones.
If tabs.TabPaddingBottom is set to 15, everything looks fine on the LG P990 but not on the HTC Wildefire anymore.

I suppose this is due to different Versions of Android, as it also appears in the AVD Emulator:
Android 2.1 looks fine, Android 4.0.3 shows the same behaviour as the LG P990.
 

airblaster

Active Member
Licensed User
Longtime User
Seems there are problems with animations inside Panels: These can suddenly stop, even if they are in repeat forever mode.
I've modified the example (replaced the listview with animated panels) to demonstrate this.

It seems the animation works great the first time a Page is created.
The animation stops when a page is destroyed.

Is there any way to ensure that the animation doesn't stop?
 

Attachments

  • Animation.zip
    8.8 KB · Views: 270

Informatix

Expert
Licensed User
Longtime User
Seems there are problems with animations inside Panels: These can suddenly stop, even if they are in repeat forever mode.
I've modified the example (replaced the listview with animated panels) to demonstrate this.

It seems the animation works great the first time a Page is created.
The animation stops when a page is destroyed.

Is there any way to ensure that the animation doesn't stop?

I don't think it's the best way to animate a spinning wait cursor. You should use either an AnimationDrawable (AnimationPlus library) or a ProgressBar with Indeterminate set to true.
 

airblaster

Active Member
Licensed User
Longtime User
Hi Informatix,

thanks for your input!

The reason I don't use a ProgressBar is that it takes a long time to load and the drawable used is unpredictable.

Regarding animationdrawable, isn't it for frame based animation?

Why do you advise against a normal animation?
 

Informatix

Expert
Licensed User
Longtime User
Regarding animationdrawable, isn't it for frame based animation?

When the standard animation repeats, there's a noticeable delay. To avoid this, you can use an AnimationDrawable that loops without this small stop. The AnimationDrawable works with a sequence of images. With a free paint program like Paint.Net or Gimp, it's not really a problem to draw all the needed frames because they include a rotate function. But it's not as convenient as a tween animation, I agree. A trick can be to set a high value for the duration and a high value for the rotation angle.
 

corwin42

Expert
Licensed User
Longtime User
I discovered a issue with the AHViewPagerTabs:
On a HTC Wildfire everything looks perfect.
On a LG P990 however there is some space between the line and the center line.
I've tried many settings to fix this, but nothing worked on both phones.
If tabs.TabPaddingBottom is set to 15, everything looks fine on the LG P990 but not on the HTC Wildefire anymore.

I suppose this is due to different Versions of Android, as it also appears in the AVD Emulator:
Android 2.1 looks fine, Android 4.0.3 shows the same behaviour as the LG P990.

The tabs have a variable size and this is bad for B4A. I have created a workaround for this. I use a small Sub to set the Tab style and this Sub returns a calculated tab height. I use this measured Height to add the tab to the activity:

B4X:
Sub SetVPTabStyle(tabs As AHViewPagerTabs) As Int
   Dim p As Panel
   Dim l As Label
   Dim su As StringUtils

   tabs.Color = Colors.Transparent
   tabs.BackgroundColorPressed = C.COLOR_BACKGROUND_PRESSED
   tabs.LineColorCenter = C.COLOR_SEPARATOR
   tabs.TextColorCenter = Colors.White
   tabs.LineHeight = 3dip

   l = Util.CreateLabel("", Typeface.DEFAULT, Gravity.CENTER, tabs.TextSize, Colors.White)
   p.Initialize("")
   p.AddView(l, 0, 0, 100%x, 10dip)
   
   Return su.MeasureMultilineTextHeight(l, "WBgy") + tabs.TabPaddingTop + tabs.TabPaddingBottom
End Sub

This creates a dummy label with the tabs TextSize and measures the needed height for the tabs. Perhaps you can try this. This even works for me if the user changes the default text size in the system settings. The Util.CreateLabel just creates a label with the given properties.

Seems there are problems with animations inside Panels: These can suddenly stop, even if they are in repeat forever mode.
I've modified the example (replaced the listview with animated panels) to demonstrate this.

It seems the animation works great the first time a Page is created.
The animation stops when a page is destroyed.

Is there any way to ensure that the animation doesn't stop?

I don't know what the ViewPager Object does internally if a page is "destroyed". A solution you can try is to restart the animation in the PageCreated event.
 

airblaster

Active Member
Licensed User
Longtime User
Hi corwin42 and Informatix,

thanks for your suggestions!
I'll look into how to apply this to the project.
 

airblaster

Active Member
Licensed User
Longtime User
@corwin42
Just tested the code.
It works fine on my LG P990.
However, on the HTC Wildfire the measured height is too big (by 2 dip).

For now I'm using the following code, hoping that it catches most scenarios:
B4X:
   If Global.p.SdkVersion > 7 Then
      tabs.TabPaddingBottom = 15
   Else
      tabs.TabPaddingBottom = 6
   End If
 

yves67

Active Member
Licensed User
Longtime User
How to load a Layout to the container

Hello
I am a newbee, and I have build a layout with the designer tool.
This layout is called QuickCall1
I would like to load this layout to the container
I don't know how to write the container.addpage statement ??
Thanks a lot for any help
Best regards
yves67
 

noclass1980

Active Member
Licensed User
Longtime User
Hi, I've used the AHViewpager library to create 3 panels which work very well. How do I set the orientation of a panel to landscape if the other panels are unspecified (but work well in portrait)? I've added the panels to an array so can ref each panel as allpanels(i) etc. so what i'm really after is to be able to code something like allpanels(1).orientation=landscape so that the second panel is landscape whilst the other two panels are unspecified. Any suggestions? Thanks.
 
Top