B4A Library SpaceNavigation

This is a wrap for this Github project.

Requirements:
- B4A 6+
- Your App must be ready for AppCompat 3.20+
- DesignSupport lib 2.0+

SpaceNavigation
Author: DonManfred (wrapper)
Version: 1

• SpaceItem
  Methods:
  • Initialize (itemName As String, Icon As String)
  • IsInitialized As Boolean
  Properties:
  • ItemIcon As Int
  • ItemName As String
• SpaceNavigationView
  Events:
  • onCentreButtonClick ( As )
  • onItemClick (index as Int As , text As String)
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • 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)
  • addSpaceItem (spaceItem As SpaceItem)
    Add space item to navigation
    spaceItem: item to add
  • changeBadgeTextAtIndex (badgeIndex As Int, badgeText As Int)
    Change badge text at index
    badgeIndex: target index
    badgeText: badge count text to change
  • changeCurrentItem (indexToChange As Int)
    Change current selected item to given index
    indexToChange: given index
  • hideAllBadges
    Hiding all available badges
  • hideBudgeAtIndex (index As Int)
    Hide badge at index
    index: badge index
  • initWithSaveInstanceState (savedInstanceState As Bundle)
    Initialization with savedInstanceState to save current selected
    position and current budges
    savedInstanceState: bundle to saveInstance
  • onSaveInstanceState (outState As Bundle)
    Save budges and current position
    outState: bundle to saveInstance
  • showBadgeAtIndex (itemIndex As Int, badgeText As Int, badgeColor As Int)
    Show badge at index
    itemIndex: index
    badgeText: badge count text
  • showIconOnly
    Show only icon in item
  • showTextOnly
    Show only text in item
  Properties:
  • ActiveSpaceItemColor As Int [write only]
    Set active item text color
  • Background As Drawable
  • CentreButtonColor As Int [write only]
    Set centre circle button background color
  • CentreButtonIcon As String [write only]
    Set centre button icon
  • Color As Int [write only]
  • Enabled As Boolean
  • Font As Typeface [write only]
    Set custom font for space item textView
  • Height As Int
  • InActiveSpaceItemColor As Int [write only]
    Set inactive item text color
  • Left As Int
  • Parent As Object [read only]
  • SpaceBackgroundColor As Int [write only]
    Set main background color
  • SpaceItemIconSize As Int [write only]
    Set item icon size
  • SpaceItemIconSizeInOnlyIconMode As Int [write only]
    Set item icon size if showIconOnly() called
  • SpaceItemTextSize As Int [write only]
    Set item text size
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

[bluedude]

I'm running the sample but unfortunately it does not look like the sample screenshots you shared. Any cooler samples?

 

[DonManfred]

it does not look like the sample screenshots you shared

i shared the sample from github... No other sample available, sorry

 

[fredo]

Awesome, you think we could have a compass for the middle button?

You can put every icon you like in the items or the centre button.
Just copy the Android Vector Drawable XML-file to the folder "Resource.Navigation/drawable" in your project and use the filename (without ".xml")

SpaceNavigationView1.CentreButtonIcon = "compass"

Spoiler: One way to get the Android Vector Drawable XML-files:

a) Open this: https://materialdesignicons.com/
b) Enter the name of the icon you are searching for

c) Click on one of the found icons

d) Click on "</>" and then on "View Vector Drawable"

e) In the appearing Viewer with the XML text click on "Download"

f) copy the downloaded XML-file to the Folder "Resource.Navigation/drawable"

 

[bluedude]

Cool, that works. No I need to see how I can rotate the vector in an easy way.

 

[bluedude]

And how can we support below API level 23? Do we need to have extra PNG's in drawable?

 

[fredo]

This is a wrap for this Github project.

The Author fixed a few issues and added

• shouldShowFullBadgeText
  
• setCentreButtonIconColor

Is it possible to update it to 1.3.2?

 

[bluedude]

I tried a few things and I see the following issues with this navigation bar:

- it does not align correctly to the bottom on 7 inch or bigger devices;
- you cannot seem to change icons on the fly;
-

 

[bluedude]

And on phones it seems to be aligned incorrectly too. The middle circle button has a small flat tire.

Good news is that it works on Android 4.3 etc

 

[DonManfred]

Good news is that it works on Android 4.3 etc

What android version does the device have where it does not work correctly?

Quote from Github project

The current minSDK version is API level 14 Android 4.0 (ICE CREAM SANDWICH).

 

[bluedude]

API level 19 and above. On a 7 inch device there is a white line below the navigation and on my phones the middle icon has a small "flat" tire effect. All these devices are above level 19.

 

[DonManfred]

will check it

 

[bluedude]

So I run Android versions 4.3 and 5.x

 

[fredo]

This is a wrap for this Github project.

This lib is really useful and beautiful.

@DonManfred Is it possible to get the update to 1.4.1?

 

[MarcoRome]

Hi Don .
in pictures i see:

what i must do for add number 4 up icon ?
Thank you

 

[DonManfred]

what i must do for add number 4 up icon ?

showBadgeAtIndex (itemIndex As Int, badgeText As Int, badgeColor As Int)

?

 

[inakigarm]

Hi Don .
in pictures i see:
View attachment 50038

what i must do for add number 4 up icon ?
Thank you

If I remember well, you'll have to play with badge items:

changeBadgeTextAtIndex (badgeIndex As Int, badgeText As Int)

Change badge text at index
badgeIndex: target index
badgeText: badge count text to change

Hiding all available badges

hideBudgeAtIndex (index As Int)

Hide badge at index
index: badge index

showBadgeAtIndex (itemIndex As Int, badgeText As Int, badgeColor As Int)

Show badge at index
itemIndex: index
badgeText: badge count text[/CODE]

 

[MarcoRome]

showBadgeAtIndex (itemIndex As Int, badgeText As Int, badgeColor As Int)

?

No. Already try this go in error

Look movie:



Where i wrong ?
Thanks

 

[DonManfred]

Post the log as text please. It is not readable in video....

 

[inakigarm]

Works here (click on center button to show badge)

#Region  Project Attributes
    #ApplicationLabel:spacenavigation
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: False
#End Region

#AdditionalRes: ..\Resource.Navigation
#Extends: android.support.v7.app.AppCompatActivity

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    'Dim l as Label
   
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private SpaceNavigationView1 As SpaceNavigationView
    Dim lbl As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    lbl.Initialize("")
   
    Activity.LoadLayout("Layout1")
   
    SpaceNavigationView1.ActiveSpaceItemColor = Colors.Red
    SpaceNavigationView1.CentreButtonColor = Colors.blue
    SpaceNavigationView1.CentreButtonIcon = "settings_1"
   
    Dim item As SpaceItem
    item.Initialize("Account","account")   
    SpaceNavigationView1.addSpaceItem(item)
    Dim item As SpaceItem
    item.Initialize("Bell","bell")   
    SpaceNavigationView1.addSpaceItem(item)

    Dim item As SpaceItem
    item.Initialize("Camera","camera")   
    SpaceNavigationView1.addSpaceItem(item)
    Dim item As SpaceItem
    item.Initialize("B4A","heart")   
    SpaceNavigationView1.addSpaceItem(item)
    SpaceNavigationView1.showIconOnly
     
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub SpaceNavigationView1_onCentreButtonClick()
    Log("SpaceNavi_onCentreButtonClick()")
    lbl.Text=$"SpaceNavi_onCentreButtonClick()"$
    SpaceNavigationView1.showBadgeAtIndex(1,1,Colors.Red)
End Sub
Sub SpaceNavigationView1_onItemClick(index As Int, text As String)
    'IF SpaceNavigationView1.
    Log($"SpaceNavi_onItemClick(${index},${text})"$)
    lbl.Text=$"SpaceNavi_onItemClick(${index},${text})"$
End Sub

 

[MarcoRome]

Works here (click on center button to show badge)

#Region  Project Attributes
    #ApplicationLabel:spacenavigation
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: False
#End Region

#AdditionalRes: ..\Resource.Navigation
#Extends: android.support.v7.app.AppCompatActivity

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    'Dim l as Label
  
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private SpaceNavigationView1 As SpaceNavigationView
    Dim lbl As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    lbl.Initialize("")
  
    Activity.LoadLayout("Layout1")
  
    SpaceNavigationView1.ActiveSpaceItemColor = Colors.Red
    SpaceNavigationView1.CentreButtonColor = Colors.blue
    SpaceNavigationView1.CentreButtonIcon = "settings_1"
  
    Dim item As SpaceItem
    item.Initialize("Account","account")  
    SpaceNavigationView1.addSpaceItem(item)
    Dim item As SpaceItem
    item.Initialize("Bell","bell")  
    SpaceNavigationView1.addSpaceItem(item)

    Dim item As SpaceItem
    item.Initialize("Camera","camera")  
    SpaceNavigationView1.addSpaceItem(item)
    Dim item As SpaceItem
    item.Initialize("B4A","heart")  
    SpaceNavigationView1.addSpaceItem(item)
    SpaceNavigationView1.showIconOnly
    
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub SpaceNavigationView1_onCentreButtonClick()
    Log("SpaceNavi_onCentreButtonClick()")
    lbl.Text=$"SpaceNavi_onCentreButtonClick()"$
    SpaceNavigationView1.showBadgeAtIndex(1,1,Colors.Red)
End Sub
Sub SpaceNavigationView1_onItemClick(index As Int, text As String)
    'IF SpaceNavigationView1.
    Log($"SpaceNavi_onItemClick(${index},${text})"$)
    lbl.Text=$"SpaceNavi_onItemClick(${index},${text})"$
End Sub

Yes if you insert in event:

SpaceNavigationView1_onCentreButtonClick()
SpaceNavigationView1_onItemClick(index As Int, text As String)

work but if you insert this in create event ( i want see this when i open the app ) i have this error:

main_activity_create (java line: 375)
java.lang.IndexOutOfBoundsException: Invalid index 2, size is 0
at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255)
at java.util.ArrayList.get(ArrayList.java:308)
at com.luseen.spacenavigation.SpaceNavigationView.showBadgeAtIndex(SpaceNavigationView.java:822)
at de.donmanfred.SpaceNavigationViewWrapper.showBadgeAtIndex(SpaceNavigationViewWrapper.java:289)
at b4a.example.main._activity_create(main.java:375)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:169)
at b4a.example.main.afterFirstLayout(main.java:102)
at b4a.example.main.access$000(main.java:17)
at b4a.example.main$WaitForLayout.run(main.java:80)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:145)
at android.app.ActivityThread.main(ActivityThread.java:6912)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1404)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1199)

Any solution ?
Thanks again