B4A Library [B4X] [XUI] AS TabMenuAdvanced

Alexander Stolte · May 31, 2022

A container view controller that manages a multiselection interface, where the selection determines which child view controller to display.

This view was developed and structured from scratch

i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal or with a coffee.

MiddleButton = True - Designer Property
Examples:

B4X:

AS_TabMenuAdvanced1.GetTab(2).xTab.BadgeValue = 5 'Sets the Badge Value for the 3. Tab to 5
AS_TabMenuAdvanced1.GetTab(3).xTab.Enabled = False 'Disabled the 4. Tab
AS_TabMenuAdvanced1.Refresh 'Commits the changes

Example Projects

[B4X] AS_TabMenuAdvanced + ASPopupMenu

This is a example how to use the AS_TabMenuAdvanced together with the ASPopupMenu. For this example you need the 2 libs. https://www.b4x.com/android/forum/threads/as-tabmenuadvanced.140907/ https://www.b4x.com/android/forum/threads/b4x-xui-as-popup-menu-on-any-view-beta.121832/

www.b4x.com

[B4X] AS_TabMenuAdvanced + ASPopupMenuAdvanced

This is a example how to use the AS_TabMenuAdvanced together with the ASPopupMenuAdvanced. For this example you need the 2 libs. https://www.b4x.com/android/forum/threads/as-tabmenuadvanced.140907/...

www.b4x.com

[B4X] AS TabMenuAdvanced Designs

https://www.b4x.com/android/forum/threads/b4x-xui-as-tabmenuadvanced.140907/

www.b4x.com

[B4X] AS_TabMenuAdvanced Custom Middle Button

In this example we add a MiddleButton that is larger than the internal one and is outside the TabMenu. https://www.b4x.com/android/forum/threads/b4x-xui-as-tabmenuadvanced.140907/ AS_TabMenuAdvanced1.MiddleButtonProperties.Visible = False 'Makes the lib. MiddleButton invisible...

www.b4x.com

ASTabMenuAdvanced
Author: Alexander Stolte
Version: 1.02

ASTabMenuAdvanced_BadgeProperties
- Fields:
  - BackgroundColor As Int
  - Height As Float
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - TextColor As Int
  - TextFont As B4XFont
  - TextPadding As Float
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASTabMenuAdvanced_Tab
- Fields:
  - BadgeValue As Int
  - Enabled As Boolean
  - IconDisabled As B4XBitmap
  - IconSelected As B4XBitmap
  - IconUnselected As B4XBitmap
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - Tag As Object
  - Text As String
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASTabMenuAdvanced_TabIntern
- Fields:
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - xBadgeProperties As ASTabMenuAdvanced_BadgeProperties
  - xTab As ASTabMenuAdvanced_Tab
  - xTabProperties As ASTabMenuAdvanced_TabProperties
  - xTabViews As ASTabMenuAdvanced_TabViews
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASTabMenuAdvanced_TabProperties
- Fields:
  - BackgroundColor As Int
  - DisabledColor As Int
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - SelectedColor As Int
  - TextFont As B4XFont
  - TextIconPadding As Float
  - UnselectedColor As Int
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASTabMenuAdvanced_TabViews
- Fields:
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - xiv_TabIcon As B4XView
  - xlbl_Badge As B4XView
  - xlbl_TabText As B4XView
  - xpnl_TabBackground As B4XView
- Functions:
  - Initialize
    Initializes the fields to their default value.
AS_TabMenuAdvanced
- Events:
  - TabClick (Index As Int)
- Fields:
  - mBase As B4XView
  - Tag As Object
- Functions:
  - AddTab (Text As String, IconSelected As B4XBitmap, IconUnselected As B4XBitmap) As String
    Text - Pass "" if you dont want Text
    IconSelected - Pass NULL if you dont want a Icon
    IconUnselected - Pass NULL if you dont want a Icon
    If you want to change TabProperties then call this before you add the tab
    <code>AS_TabMenuAdvanced1.TabProperties.TextColor = xui.Color_White</code>
  - AddTabAdvanced (xTab As ASTabMenuAdvanced_Tab, xTabProperties As ASTabMenuAdvanced_TabProperties) As String
    Example:
    <code>
    Dim xTab As ASTabMenuAdvanced_Tab = AS_TabMenuAdvanced1.CreateASTabMenuAdvanced_Tab("Test Item",Null,Null)
    Dim xTabProperties As ASTabMenuAdvanced_TabProperties = AS_TabMenuAdvanced1.CreateASTabMenuAdvanced_TabProperties(xui.CreateDefaultFont(15),xui.Color_ARGB(255,32, 33, 37),xui.Color_ARGB(255,45, 136, 121),xui.Color_ARGB(255,255,255,255),xui.Color_ARGB(255,60, 64, 67),0)
    AS_TabMenuAdvanced1.AddTabAdvanced(xTab,xTabProperties)</code>
  - ChangeColorBasedOnAlphaLevel (bmp As B4XBitmap, NewColor As Int) As B4XBitmap
  - Class_Globals As String
  - CreateASTabMenuAdvanced_BadgeProperties (TextColor As Int, TextFont As B4XFont, Height As Float, TextPadding As Float, BackgroundColor As Int) As ASTabMenuAdvanced_BadgeProperties
  - CreateASTabMenuAdvanced_Tab (Text As String, IconSelected As B4XBitmap, IconUnselected As B4XBitmap) As ASTabMenuAdvanced_Tab
  - CreateASTabMenuAdvanced_TabIntern (xTab As ASTabMenuAdvanced_Tab, xTabProperties As ASTabMenuAdvanced_TabProperties, xBadgeProperties As ASTabMenuAdvanced_BadgeProperties, xTabViews As ASTabMenuAdvanced_TabViews) As ASTabMenuAdvanced_TabIntern
  - CreateASTabMenuAdvanced_TabProperties (TextFont As B4XFont, BackgroundColor As Int, SelectedColor As Int, UnselectedColor As Int, DisabledColor As Int, TextIconPadding As Float) As ASTabMenuAdvanced_TabProperties
  - CreateASTabMenuAdvanced_TabViews (xpnl_Tab As B4XView, xlbl_TabText As B4XView, xiv_TabIcon As B4XView, xlbl_Badge As B4XView) As ASTabMenuAdvanced_TabViews
  - CreateImageView (EventName As String) As B4XView
  - CreateLabel (EventName As String) As B4XView
  - DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
    Base type must be Object
  - FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
    
    FontAwesome To Bitmap
    
    Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
    
    www.b4x.com
  - getIndex As Int
  - GetTab (Index As Int) As ASTabMenuAdvanced_TabIntern
    Example:
    <code>
    AS_TabMenuAdvanced1.GetTab(0).xTabProperties.SelectedColor = xui.Color_Magenta
    AS_TabMenuAdvanced1.Refresh</code>
  - getTabProperties As ASTabMenuAdvanced_TabProperties
  - GetTabs As List
    Example:
    <code>
    For Each TabIntern As ASTabMenuAdvanced_TabIntern In AS_TabMenuAdvanced1.GetTabs
    Log(TabIntern.xTab.Text)
    Next</code>
  - Initialize (Callback As Object, EventName As String) As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - Refresh As String
  - RemoveTabAt (Index As Int) As String
    Removes a tab
    <code>
    AS_TabMenuAdvanced1.RemoveTabAt(2)
    AS_TabMenuAdvanced1.Refresh</code>
  - setIndex (Index As Int) As String
- Properties:
  - Index As Int
  - TabProperties As ASTabMenuAdvanced_TabProperties [read only]

Changelog

1.00
- Release
1.01
- xBadge renamed to xBadgeProperties
1.02
- Add GetTabs - Gets a list of tab properties of type ASTabMenuAdvanced_TabIntern
- Add RemoveTabAt - Removes a tab
- Add Tag Property to Type ASTabMenuAdvanced_Tab
- Add new Type ASTabMenuAdvanced_TabViews - contains the control elements of a tab
1.03
- Add LeftPadding to ASTabMenuAdvanced_BadgeProperties - You can move the badge to left or right with this property
- Add get BadgeProperties - here you can set the global Badge Properties
1.04
- The TabClick Event is now always triggered, even if the tab is already selected
- The BadgeValue Data Type from Type ASTabMenuAdvanced_Tab is now String
1.05
- Add get and set CornerRadius
- Add new Type ASTabMenuAdvanced_IndicatorProperties
- Add Designer Property Indicator - If True the Indicator is visible
  - Default: False
- BugFixes
1.06
- Add Designer Property MiddleButton - You can now show a middle button
  - Default: False
  - Limitation: Only an even number of tabs may be present 2,4,6,8,10...
- Add Event MiddleButtonClick
- Add Type ASTabMenuAdvanced_MiddleButtonProperties
  - CustomWidth
    - Default: 0
- Add Designer Property BadgeWithoutText - If True then the badges have no text
  - Default: False
1.07
- Add Visible to Type ASTabMenuAdvanced_MiddleButtonProperties - If False then the middle button is not visible, but the space is still kept free
1.08
- Add Designer Property ColorIcons - If false then remains the color of the icon
  - Default: True
1.09
- Add Event CustomDrawTab - This ensures that whenever a tab is refreshed, your custom code is also applied
1.10
- BugFix
1.11
- Badge optimizations
1.12
- Add Clear - Clears all tabs
1.13
- BugFix - the badge was not round when the width was smaller than the height
- Add BadgeValue - Sets the badge value without having to call refresh
- set Index no longer needs a "refresh" to be changed
1.14
- BugFix on .Clear
1.15
- BugFix on MiddleButtonProperties.CustomWidth
1.16
- BugFixes
1.17
- Add Designer Property ShapeColor - A thin line on top of the view
  - Default: Transparent

Have Fun

Alexander Stolte · Apr 4, 2023

ferliner said:
Is it possible to achieve that with TabMenuAdvanced?

[B4X] AS TabMenuAdvanced Designs

https://www.b4x.com/android/forum/threads/b4x-xui-as-tabmenuadvanced.140907/

www.b4x.com

ivanomonti · Apr 4, 2023

Hello and thank you and for this library that offers a lot of potential, that if I do a good job with it I'll offer you so many coffees that you'll feel nauseous but I found some doubts.

1) disable for example a key at runtime

2) a space key wouldn't hurt, for example put 5 buttons and fill the length of the screen, but if you put two they stay in the center, but if I put three, one on the left and two at the bottom right? the thing becomes almost impossible, at this point a disable key that takes up space of two buttons would be the solution.

3) Another thing that I don't know if it can be done and make sure that there is a click and not a selection, let me explain when I select an item it remains selected, I would like it to behave like a button and not like a switch.

button (click)
switch (off)(on)

-------------------------------------------------------------------------------- italiano --------

Ciao e grazie e per questa libreria che offre molte potenzialità, che se faccio un buon lavoro con essa ti offro tanti caffè da aver la nausea ma ho trovato alcuni dubbi.

1) disabilitare ad esempio un tasto a runtime
2) non ci starebbe male un tasto space, esempio metti 5 bottoni e riempi la lungezza dello schermo, ma se ne metti due stanno al centro, ma se ne metto tre di cui uno a sx e due in fondo a destra? la cosa diventa quasi impossibile, a questo punto un tasto disable che prenda spazio di due bottoni sarebbe la soluzione.

3) Altra cosa che non so se si può fare e fare in modo che ci sia il click e non selezione, mi spiego quando seleziono una voce rimane selezionata, a me piacerebbe che si comportasse come un pulsante e non come interruttore.

pulsante (click)
interrutore (off)(on)

Alexander Stolte · Apr 4, 2023

ivanomonti said:
3) Another thing that I don't know if it can be done and make sure that there is a click and not a selection, let me explain when I select an item it remains selected, I would like it to behave like a button and not like a switch.

button (click)
switch (off)(on)

I don't quite understand what the point of this is supposed to be?
Should none of the tabs be selected and only be selected when the user clicks on one and if this clicks again the same, then the selection should disappear?

ivanomonti said:
1) disable for example a key at runtime

B4X:

AS_TabMenuAdvanced1.GetTab(0).xTab.Enabled = False
AS_TabMenuAdvanced1.Refresh

ivanomonti · Apr 4, 2023

Alexander Stolte said:
I don't quite understand what the point of this is supposed to be?
Should none of the tabs be selected and only be selected when the user clicks on one and if this clicks again the same, then the selection should disappear?

B4X:

AS_TabMenuAdvanced1.GetTab(0).xTab.Enabled = False AS_TabMenuAdvanced1.Refresh

no, it remains selected, I try again and I send you a screen, as you can see the red parts highlight the brighter text because it has been selected, in reality it should be like all the others.

I don't use icons but only text at the moment, and there's already too much stuff

ivanomonti · Apr 4, 2023

Error:

Error occurred on line: 287 (AS_TabMenuAdvanced)

code:

    AS_TabMenuAdvanced_main_social.AddTab("MIASmart",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("New Post",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("Load Post",Null,Null)
    AS_TabMenuAdvanced_main_social.Refresh
    AS_TabMenuAdvanced_main_social.GetTab(1).xTab.Enabled = False
    AS_TabMenuAdvanced_main_social.Refresh

Alexander Stolte · Apr 4, 2023

ivanomonti said:
no, it remains selected, I try again and I send you a screen, as you can see the red parts highlight the brighter text because it has been selected, in reality it should be like all the others.

And why don't you just set the selection color to the same color as the unselected color?

Alexander Stolte · Apr 4, 2023

ivanomonti said:
AS_TabMenuAdvanced_main_social.AddTab("",Null,Null)

Make a space:
AS_TabMenuAdvanced_main_social.AddTab(" ",Null,Null)

ivanomonti · Apr 4, 2023

Alexander Stolte said:
And why don't you just set the selection color to the same color as the unselected color?

I hadn't thought of this shortcut

ivanomonti · Apr 4, 2023

Alexander Stolte said:
Make a space:
AS_TabMenuAdvanced_main_social.AddTab(" ",Null,Null)

man, anyway I find it a flaw, I need to have the possibility to make an elastic space between the buttons, mmm for the rest and a great job, it can be improved but it's great

Alexander Stolte · Apr 4, 2023

ivanomonti said:
man, anyway I find it a flaw, I need to have the possibility to make an elastic space between the buttons, mmm for the rest and a great job, it can be improved but it's great

On tablets you usually have such a gap on the sides, but no idea how to calculate something like that. The workaround with 2 disabled tabs is quite good.

ivanomonti · Apr 4, 2023

Alexander Stolte said:
On tablets you usually have such a gap on the sides, but no idea how to calculate something like that. The workaround with 2 disabled tabs is quite good.

true but if you use 5 buttons by default the problem is solved simply also because maybe I would like a large button so that you can see it immediately, anyway yes, I used two empty buttons and bona there

ivanomonti · Apr 5, 2023

you haven't thought about the size of the numbers, moreover the background is cut by the next index, nice round but you mustn't go beyond the decimal mmmm, if I use height 50 or 60 that background is cut and here it's 70 but too high.

Setlodi · Apr 15, 2023

@Alexander Stolte
Beautiful and useful library. Quick question:

How do you load a layout when you click a tab?

Thx

Alexander Stolte · Apr 16, 2023

Setlodi said:
How do you load a layout when you click a tab?

Place panel over it and bring to the foreground the panel you want to display. Or use the AS_ViewPager and place it over it. For further questions please open a new thread.

Alexander Stolte · Apr 16, 2023

Update

1.11
- Badge optimizations

Sergio Haurat · Jul 13, 2023

Hi @Alexander Stolte, your work is incredible! I can't find a way to leave an icon by default, for example:

Selected as default at start:

Dim AS_TabMenuAdvanced1 As AS_TabMenuAdvanced
'
' more code...
'
AS_TabMenuAdvanced1.GetTab(0).xTab.Default = True

Thank you

Alexander Stolte · Jul 13, 2023

Sergio Haurat said:
AS_TabMenuAdvanced1.GetTab(0).xTab.Default = True

??????????

Sergio Haurat · Jul 13, 2023

Alexander Stolte said:
??????????

I am attaching some images to see if you can understand me better

App Normal Start	Application after button pressed

Is there a property that allows me to display one of the default options without having to go and click?

This is what I mean by this imaginary line of code

AS_TabMenuAdvanced1.GetTab(0).xTab.Default = True

Alexander Stolte · Jul 13, 2023

Sergio Haurat said:
Is there a property that allows me to display one of the default options without having to go and click?

B4X:

AS_TabMenuAdvanced1.Index = 0

byz · Jul 14, 2023

good job man, its so nice. i used it, the FontToBitmap is great to me,because i create image just soso. thanks agin Alexander Stolte.
this is my code

add title and icon:

    AS_TabMenuAdvanced1.AddTab("后退",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C4),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C4),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("前进",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C8),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C8),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("主页",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE88A),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE88A),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("搜索",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE8B6),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE8B6),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("分享",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE80D),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE80D),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.Index=(2)
    AS_TabMenuAdvanced1.Refresh

B4A Library [B4X] [XUI] AS TabMenuAdvanced

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency