Share My Creation Toolbar Code Module

Hi there,
I've ordered B4A just a few weeks ago and i must say: i'm really happy with this powerful language and the
outstanding support in this forum. And here it is, my first B4A Code Module. I hope, some will find it useful.

toolbar.bas is an Easy-To-Use Toolbar: 5 Lines of Code in your Sub Main are enough to make it work.

Features:
-Alignment(Left,Centered and Right) on Top or Bottom of the Activity.
-Click and HighLight Events
-2-State Buttons(Play/Pause, Checked/Unchecked etc.)
-Skin-Support: Layout can be changed at Runtime.
-Scalable Size


ToolbarDemo1 is a minimal Program with just 9 Lines of Codes.
ToolbarDemo2 is a little bit more complex and shows, how to configure the Toolbar manually.

If you have any suggestions, let me know.
Enjoy.

Regards,
Joerg


How to use the Toolbar in your Code:

1. Add the Toolbar Code Module to your Project (Project->Add Existing Module)

2. Add the following Images to your Files Folder:
toolbar_blank.png (the Button Image without any Icon/Text)
toolbar_highlight.png (the highlighted Button Image without any Icon/Text, same size as toolbar_blank.png)
toolbar_texture.png (the Toolbar Background Image, should have same Height as toolbar_blank.png)

3. Add as many transparent Icons as you need, to your Files Folder (with the same size as toolbar_blank.png)
toolbar_1.png
toolbar_2.png
toolbar_3.png
etc...



Optionally, add Icons for Two-State-Buttons, for Example:
toolbar_2a.png (this will automatically make the second Button a 2-State Button)
etc...

4. Add the following Code to your Sub Main:

B4X:
Sub Globals
    Dim cnv As Canvas                                        
End Sub

Sub Activity_Create(FirstTime As Boolean)
    If FirstTime then Toolbar.Initialize                     
    cnv.Initialize(Activity)                                
    Toolbar.Draw(Activity,cnv,0)                             
End Sub

Sub Activity_Touch(Action as Int, X As Float, Y As Float)
    Toolbar.Touch(Activity,cnv,Action,x,y)                   
End Sub

5. Add the following Events to your Sub Main:

B4X:
Sub Toolbar_Click(ButtonIndex As Int)                        
End Sub                                                      

Sub Toolbar_Highlight(ButtonIndex As Int)                    
End Sub
 

Attachments

  • screenshot.jpg
    screenshot.jpg
    5.5 KB · Views: 18,209
  • ToolbarExample1.zip
    114 KB · Views: 864
  • ToolbarExample2.zip
    114.7 KB · Views: 911

Smee

Well-Known Member
Licensed User
Longtime User
i am looking to incorporate your code.

Thanks for sharing

this will save a lot of work hopefully
:sign0098:
 

Smee

Well-Known Member
Licensed User
Longtime User
Joerg,

Is there a way to make your toolbar temporarily invisible. I have tried many things but nothing seems to work

Thanks

Joe
 

Djembefola

Active Member
Licensed User
Longtime User
Hello Joe,

I have not implemented a
.visible
Property or something like that.

What you can do as a Workaround, is drawing a Rectangle in the Toolbar Area to delete it and later redraw it with

B4X:
Toolbar.Draw(Activity,cnv,0)

Regards
Joerg
 

Hajzenberg

Member
Licensed User
Longtime User
Hello,
I think that there are several errors in your bas module.

1. Declaration of toolbar buttons in line 116 (Dim m_Buttons(m_MaxButtons-1) As ToolbarButton) will cause Sub Clear() to break in line 357 with ArrayIndexOutOfBoundsException. Solution is to dimension it not with minus 1 value.

2. Sub Touch has hardcoded "Main" Activity value in event callbacks in lines 325 & 339 instead of argument passed Activity value.

Regards.
 

luke2012

Well-Known Member
Licensed User
Longtime User
Hi there,
I've ordered B4A just a few weeks ago and i must say: i'm really happy with this powerful language and the
outstanding support in this forum. And here it is, my first B4A Code Module. I hope, some will find it useful.

toolbar.bas is an Easy-To-Use Toolbar: 5 Lines of Code in your Sub Main are enough to make it work.

Features:
-Alignment(Left,Centered and Right) on Top or Bottom of the Activity.
-Click and HighLight Events
-2-State Buttons(Play/Pause, Checked/Unchecked etc.)
-Skin-Support: Layout can be changed at Runtime.
-Scalable Size


ToolbarDemo1 is a minimal Program with just 9 Lines of Codes.
ToolbarDemo2 is a little bit more complex and shows, how to configure the Toolbar manually.

If you have any suggestions, let me know.
Enjoy.

Regards,
Joerg


How to use the Toolbar in your Code:

1. Add the Toolbar Code Module to your Project (Project->Add Existing Module)

2. Add the following Images to your Files Folder:
toolbar_blank.png (the Button Image without any Icon/Text)
toolbar_highlight.png (the highlighted Button Image without any Icon/Text, same size as toolbar_blank.png)
toolbar_texture.png (the Toolbar Background Image, should have same Height as toolbar_blank.png)

3. Add as many transparent Icons as you need, to your Files Folder (with the same size as toolbar_blank.png)
toolbar_1.png
toolbar_2.png
toolbar_3.png
etc...



Optionally, add Icons for Two-State-Buttons, for Example:
toolbar_2a.png (this will automatically make the second Button a 2-State Button)
etc...

4. Add the following Code to your Sub Main:

B4X:
Sub Globals
    Dim cnv As Canvas                                       
End Sub

Sub Activity_Create(FirstTime As Boolean)
    If FirstTime then Toolbar.Initialize                    
    cnv.Initialize(Activity)                               
    Toolbar.Draw(Activity,cnv,0)                            
End Sub

Sub Activity_Touch(Action as Int, X As Float, Y As Float)
    Toolbar.Touch(Activity,cnv,Action,x,y)                  
End Sub

5. Add the following Events to your Sub Main:

B4X:
Sub Toolbar_Click(ButtonIndex As Int)                       
End Sub                                                     

Sub Toolbar_Highlight(ButtonIndex As Int)                   
End Sub

Hi, it's possible to draw the toolbar in a custom position ?
 
Top