B4A Library JSDevLightNavTabStrip - Navigation tab strip with smooth interaction

NavigationTabStrip - Navigation tab strip with smooth interaction

Wrap of this: https://github.com/DevLight-Mobile-Agency/NavigationTabStrip

Sharing it to you guys "as-is".

You can handle the tab select/change with 'OnStartTabSelected' OR 'OnEndTabSelected' event.

AHViewPager is now supported.
Designer Custom View Supported.

Spoiler: Update History

Updates:
r3 - implemented designer custom view support.
r2 - Added support to ViewPager.
- You dont have to handle the above event if you are going to use AHViewPager.
r1 - Initial

Spoiler: Module References

JSDevLightNavTabStrip
Version: 0.3

• JSDevLightNavTabStrip
  Events:
  • OnEndTabSelected (title As String, index As Int)
  • OnStartTabSelected (title As String, index As Int)
  Fields:
  • PAGE_SCROLL_STATE_DRAGGING As Int
  • PAGE_SCROLL_STATE_IDLE As Int
  • PAGE_SCROLL_STATE_SETTLING As Int
  • STRIP_GRAVITY_BOTTOM As Int
    The Constant STRIP_GRAVITY_BOTTOM.
  • STRIP_GRAVITY_TOP As Int
    The Constant STRIP_GRAVITY_TOP.
  • STRIP_TYPE_LINE As Int
    The Constant STRIP_TYPE_LINE.
  • STRIP_TYPE_POINT As Int
    The Constant STRIP_TYPE_POINT.
  Methods:
  • BringToFront
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  • deselect
    Deselect.
  Properties:
  • ActiveColor As Int
    Gets the active color.
  • AnimationDuration As Int
    Gets the animation duration.
  • Background As Drawable
  • Color As Int [write only]
  • CornersRadius As Float
    Gets the corners radius.
  • Enabled As Boolean
  • Height As Int
  • InactiveColor As Int
    Gets the inactive color.
  • Left As Int
  • Parent As Object [read only]
  • StripColor As Int
    Gets the strip color.
  • StripFactor As Float
    Gets the strip factor.
  • StripGravity As Int
    Gets the strip gravity.
  • StripType As Int
    Gets the strip type.
  • StripWeight As Float [write only]
    Sets the strip weight.
  • TabIndex As Int
    Gets the tab index.
  • Tag As Object
  • TitleSize As Float
    Gets the title size.
  • Titles() As String
    Gets the titles.
  • Top As Int
  • Typeface As Typeface
    Gets the typeface.
  • ViewPager As Object [write only]
    Sets the view pager.
  • Visible As Boolean
  • Width As Int

Spoiler: Sample Usage

Just slap this code (inside Activity_Create) on new b4a project and your good to go.

    '-- Sample 1 (Top)
    Dim tab1 As JSDevLightNavTabStrip
    tab1.Initialize("tab1")
    Activity.AddView(tab1, 0dip, 0dip, 100%x, 56dip)
    tab1.Titles = Array As String("Videos", "Images", "Song")
    tab1.ActiveColor = 0xFFE91E63
    tab1.StripColor = 0xFFE91E63
    tab1.TabIndex = 0

    '-- Sample 1 (Bottom)
    Dim tab2 As JSDevLightNavTabStrip
    tab2.Initialize("tab2")
    Activity.AddView(tab2, 0dip, tab1.Top + tab1.Height + 20%y, 100%x, 56dip)
    tab2.Titles = Array As String("Eat", "Sleep", "Conquer", "Repeat")
    tab2.TitleSize = 13dip
    tab2.TabIndex = 4

    '-- Sample 2 (Bottom)
    Dim tab3 As JSDevLightNavTabStrip
    tab3.Initialize("tab3")
    Activity.AddView(tab3, 0dip, 100%y - 56dip, 100%x, 56dip)
    tab3.Color = Colors.White
    tab3.Titles = Array As String("Home", "Think", "Design", "Animate")
    tab3.ActiveColor = 0xFF8BC34A
    tab3.InactiveColor = Colors.LightGray
    tab3.StripType = tab3.STRIP_TYPE_LINE
    tab3.StripGravity = tab3.STRIP_GRAVITY_BOTTOM
    tab3.StripColor = 0xFF8BC34A
    tab3.TabIndex = 1

Spoiler: Sample use with AHViewPager

Just slap this code on your Activity Create

' create your pages/contents
  Dim pnl1 As Panel
   pnl1.Initialize("")
   pnl1.Color = Colors.Green

   Dim pnl2 As Panel
   pnl2.Initialize("")
   pnl2.Color = Colors.Yellow

   Dim pnl3 As Panel
   pnl3.Initialize("")
   pnl3.Color = Colors.Blue

   Dim pnl4 As Panel
   pnl4.Initialize("")
   pnl4.Color = Colors.Magenta

' Add pages to page container
   Dim container As AHPageContainer
   container.Initialize
   container.AddPage(pnl1, "Home")
   container.AddPage(pnl2, "Think")
   container.AddPage(pnl3, "Design")
   container.AddPage(pnl4, "Animate")

' create view pager and add it to activity
   Dim pager As AHViewPager
   pager.Initialize2(container, "")
   Activity.AddView(pager, 0dip, 0dip, 100%x, 100%y - 56dip)

' create tabstrip and add it to activity
  Dim tab3 As JSDevLightNavTabStrip
   tab3.Initialize("tab3")
   Activity.AddView(tab3, 0dip, 100%y - 56dip, 100%x, 56dip)
   tab3.Color = Colors.White
   tab3.Titles = Array As String("Home", "Think", "Design", "Animate")
   tab3.ActiveColor = 0xFF8BC34A
   tab3.InactiveColor = Colors.LightGray
   tab3.StripType = tab3.STRIP_TYPE_LINE
   tab3.StripGravity = tab3.STRIP_GRAVITY_BOTTOM
   tab3.StripColor = 0xFF8BC34A

   ' set view pager property
   tab3.ViewPager = pager

Required Files (Android Support Files):
1. android-support-v4.jar - you can find it in your android sdk folder \extras\android\support\v4

 

[DonManfred]

Nice one! Thank you for sharing

The only thing i did not implement on this is the ViewPager.

You can add a method to set the Viewpager to use.

public void setViewpager(Viewpager pager){
  getObject().setpager(pager); // Adapt to your needs
}

then anyone can use the available AHViewpager to use inside this lib...

 

[SNOUHyhQs2]

Nice one! Thank you for sharing


You can add a method to set the Viewpager to use.

public void setViewpager(Viewpager pager){
  getObject().setpager(pager); // Adapt to your needs
}

then anyone can use the available AHViewpager to use inside this lib...

I havent tried the AHViewPager thats why i did not include it, but will try. Thanks