B4A Library [B4X] [XUI] AS TabMenuAdvanced

Rubsanpe · May 31, 2022

Very, very, very great work. Thank you. Donation done.

Rubén

Alexander Stolte · Jun 1, 2022

Update

1.01
- xBadge renamed to xBadgeProperties

Rubsanpe said:
Very, very, very great work. Thank you. Donation done.

Thank you very much!

Have a nice day.

Sandman · Jun 1, 2022

Very nice work. A couple of questions:

I couldn't find AS_TabMenuAdvanced.GetTabs As List, any chance for that to be added?
I couldn't find AS_TabMenuAdvanced.DeleteTab(ASTabMenuAdvanced_TabIntern), any chance for that to be added? (I get that I can hide to fake deletion, but it also makes sense to me to be able to delete if not needed.)
Would it be possible to add Tag to ASTabMenuAdvanced_TabIntern and also AS_TabMenuAdvanced.GetTabByTag(Tag)? (I get that I can do that myself outside the lib, but I thought I'd ask )

The last question is a somewhat weird, sorry about that.

In most cases an app wouldn't have a lot of buttons, but if they are generated dynamically depending on outside data, there might be a situation where there simply will be too many buttons. It will start to look cramped and ugly. For this edge-case, would it make sense to have an overflow menu to show? Something like this:

Five buttons. Looks fine, life is good.

But when we need to add one (or more) buttons it would look cramped. So enter the overflow menu, where the right-most button is moved into the first place of the overflow menu, and the rest below it:

I get that this might not fit your vision about this lib, but again I thought I should at least ask for your thoughts.

Alexander Stolte · Jun 1, 2022

Update

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

Sandman said:
I couldn't find AS_TabMenuAdvanced.GetTabs As List, any chance for that to be added?

B4X:

For Each TabIntern As ASTabMenuAdvanced_TabIntern In AS_TabMenuAdvanced1.GetTabs
    Log(TabIntern.xTab.Text)
Next

Sandman said:
I couldn't find AS_TabMenuAdvanced.DeleteTab(ASTabMenuAdvanced_TabIntern), any chance for that to be added? (I get that I can hide to fake deletion, but it also makes sense to me to be able to delete if not needed.)

B4X:

AS_TabMenuAdvanced1.RemoveTabAt(2)
AS_TabMenuAdvanced1.Refresh

Sandman said:
Would it be possible to add Tag to ASTabMenuAdvanced_TabIntern and also AS_TabMenuAdvanced.GetTabByTag(Tag)? (I get that I can do that myself outside the lib, but I thought I'd ask )

B4X:

AS_TabMenuAdvanced1.GetTab(2).xTab.Tag = "Test"
Log(AS_TabMenuAdvanced1.GetTab(2).xTab.Tag)

But you have to include a search, because a "tag" is of type object and therefore can contain everything.

B4X:

    For i = 0 To AS_TabMenuAdvanced1.GetTabs.Size -1
       
        Dim TabIntern As ASTabMenuAdvanced_TabIntern = AS_TabMenuAdvanced1.GetTabs.Get(i)
        If "Test" = TabIntern.xTab.Tag Then
            Log("Found Tab on Index: " & i)
        End If
       
    Next

Sandman said:
is a somewhat weird, sorry about that

yes it is, but not impossible, because we have all what we need on the forum

Sandman said:
So enter the overflow menu, where the right-most button is moved into the first place of the overflow menu, and the rest below it:

You can do this togehter with the ASPopupMenu or ASPopupMenuAdvanced. Maybe i can create a example later.
with the following code you can detect the x position of a tab:

B4X:

Dim xpnl_Tab As B4XView = AS_TabMenuAdvanced1.GetTab(2).xTabViews.xpnl_TabBackground
Log("The middle of the tab is: " & (xpnl_Tab.Left + xpnl_Tab.Width/2))

and then add the PopupMenu to this position on the form

Alexander Stolte · Jun 1, 2022

Sandman said:

and it looks nice

Alexander Stolte · Jun 1, 2022

[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

Maybe i have time tomorrow for the ASPopupMenuAdvanced version.

Alexander Stolte · Jun 2, 2022

Update

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

incendio · Jun 3, 2022

Hi,

Thanks for this library.

I have a problem, when the same Tab clicked more than one, it was only registered one click event, the rest were not register.

For ex, when Tab no 2 clicked twice, the event only captured for the first clicked.

Is there a way to captured clicked event on the same tab that clicked more than once?

Alexander Stolte · Jun 3, 2022

Update

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

incendio said:
have a problem, when the same Tab clicked more than one, it was only registered one click event, the rest were not register.

Yes that should actually serve as protection, but actually makes no sense, I changed it again.

Alexander Stolte · Jun 5, 2022

Update

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

B4X:

AS_TabMenuAdvanced_Design1.CornerRadius = AS_TabMenuAdvanced_Design1.mBase.Height/2 'Round
AS_TabMenuAdvanced_Design1.IndicatorVisible = True

AS_TabMenuAdvanced_Design1.IndicatorProperties.Color = xui.Color_White

yaqoob · Jun 7, 2022

Alexander Stolte said:
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.

View attachment 129807
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

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

Have Fun

Excellent job and thank you. Donation done.

Alexander Stolte · Jun 7, 2022

yaqoob said:
Excellent job and thank you

Thank you very much!

yaqoob said:
Donation done.

I have unfortunately received nothing, but thanks

yaqoob · Jun 7, 2022

Alexander Stolte said:
Thank you very much!

I have unfortunately received nothing, but thanks

Hi, alexander,
I have sent you privately a screenshot. I hope you receive it.

lucasheer · Jun 12, 2022

I developed a similar menu 4-5 years ago, I definitely prefer yours!

Very clean and easy, thank you!

Alexander Stolte · Jun 13, 2022

Update

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

MiddleButton

Middle Button:

AS_TabMenuAdvanced1.MiddleButton = True
'or in the Designer

BadgeWithoutText

B4X:

AS_TabMenuAdvanced1.BadgeWithoutText = True
'or in the designer

Daica · Jun 14, 2022

Could you add an option to remove all tabs or make certain tabs visible or not?
Disabling the tab works fine, but sometimes I would like the tabs to not be visible at all.

I use your other library, the DraggableBottomCard, when the card is shown, depending on some values, the menu is different.
I guess you could use 2 different TabMenuAdvanced and then set the visible property

I edited the library and added this function but I'm not sure if that messes with anything else.

B4X:

'Removes all tabs
'<code>
'AS_TabMenuAdvanced1.RemoveAllTabs
</code>
Public Sub RemoveAllTabs()
    Try
        xpnl_TabBackground.RemoveAllViews
        m_TabList.Clear
        Refresh
    Catch
        Log(LastException)
    End Try
End Sub

You could also remove all the tabs this way:

B4X:

For i = AS_TabMenuAdvanced1.GetTabs.Size - 1 To 0 Step -1
    AS_TabMenuAdvanced1.RemoveTabAt(i)
Next
AS_TabMenuAdvanced1.Refresh

Would be nice to have it as a function in the library though.

Awesome work as always!

Alexander Stolte · Jun 15, 2022

Daica said:
You could also remove all the tabs this way:

B4X:

For i = AS_TabMenuAdvanced1.GetTabs.Size - 1 To 0 Step -1 AS_TabMenuAdvanced1.RemoveTabAt(i) Next AS_TabMenuAdvanced1.Refresh

You have already found a way to remove all tabs

Daica said:
Could you add an option to remove all tabs or make certain tabs visible or not?

Not a chance. This is too complicated, especially now that you still have the possibility to place a button in the middle. This is how I calculate the left value of a tab:

B4X:

TabWidth*i + IIf(i >= (m_TabList.Size/2)

And if I now have to check if the previous tab or the last 4 are invisible, no I'm out.

Alexander Stolte · Jun 15, 2022

Update

1.07
- Add Visible to Type ASTabMenuAdvanced_MiddleButtonProperties - If False then the middle button is not visible, but the space is still kept free

New Example Project

[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

Alexander Stolte · Aug 16, 2022

Update

1.08
- Add Designer Property ColorIcons - If false then remains the color of the icon
  - Default: True

B4A Library [B4X] [XUI] AS TabMenuAdvanced

Attachments

Active Member

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Expert

Expert

Expert

Similar Threads