B4A Library [B4X] [XUI] AS SegmentedTab

New year, new ASViews :)

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)
B4j: jXUI,JavaObject
B4a: XUi,JavaObject
B4i: iXUI
Screenshot_20210110-184421.jpg
ezgif.com-resize.gif

IMG_1881.jpg
IMG_1882.jpg

NEW PaddingSelectionPanel - Picture Value: 5
IMG_7426.jpg

NEW ShowSeperators
IMG_7732.jpg

Custom Tab Width Example
AS SegmentedTab Custom Tab Width.gif

ASSegmentedTab
Author: Alexander Stolte
Version: 1.11

  • ASSegmentedTab
    • Events:
      • TabChanged (index As Int)
    • Fields:
      • mAutoDecreaseTextSize As Boolean
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddTab (Text As String, icon As B4XBitmap) As String
      • Class_Globals As String
      • CreateASSegmentedTab_ItemTextProperties (TextColor As Int, TextFont As B4XFont, TextAlignment_Vertical As String, TextAlignment_Horizontal As String, BackgroundColor As Int) As ASSegmentedTab_ItemTextProperties
      • CreateASSegmentedTab_SeperatorProperties (Color As Int, Width As Float, HeightPercentage As Int, CornerRadius As Float) As ASSegmentedTab_SeperatorProperties
      • 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
      • getAutoDecreaseTextSize As Boolean
        The text size is automatically adjusted to the space, if the text should not fit on one line.
      • getBackgroundPanel As B4XView
        the child panel of mBase
      • getBase As B4XView
      • getIndex As Int
      • getItemTextProperties As ASSegmentedTab_ItemTextProperties
        change the properties before you add atab, then this settings will be change the on the next added tab
        <code>ASSegmentedTab1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(15)</code>
      • getSelectionPanel As B4XView
        gets the selection panel - the panel that highlight the selected tab
      • getSeperatorProperties As ASSegmentedTab_SeperatorProperties
      • getSeperatorsHeight As Float
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • SelectedIndex (index As Int, Duration As Int) As String
      • setAutoDecreaseTextSize (DecreaseTextSize As Boolean) As String
      • setCornerRadiusBackground (corner_radius As Float) As String
        changes the CornerRadius of the view
      • setCornerRadiusSelectionPanel (corner_radius As Float) As String
        changes the CornerRadius of the selector
      • setImageHeight (height As Float) As String
      • setIndex (Index As Int) As String
        get or sets the index - sets the index without animation
      • setPaddingSelectionPanel (padding As Float) As String
        set a distance from the corners for the selector
      • setShowSeperators (visible As Boolean) As String
      • UpdateSeperators As String
    • Properties:
      • AutoDecreaseTextSize As Boolean
        The text size is automatically adjusted to the space, if the text should not fit on one line.
      • BackgroundPanel As B4XView [read only]
        the child panel of mBase
      • Base As B4XView [read only]
      • CornerRadiusBackground
        changes the CornerRadius of the view
      • CornerRadiusSelectionPanel
        changes the CornerRadius of the selector
      • ImageHeight
      • Index As Int
        get or sets the index - sets the index without animation
      • ItemTextProperties As ASSegmentedTab_ItemTextProperties [read only]
        change the properties before you add atab, then this settings will be change the on the next added tab
        <code>ASSegmentedTab1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(15)</code>
      • PaddingSelectionPanel
        set a distance from the corners for the selector
      • SelectionPanel As B4XView [read only]
        gets the selection panel - the panel that highlight the selected tab
      • SeperatorProperties As ASSegmentedTab_SeperatorProperties [read only]
      • SeperatorsHeight As Float [read only]
      • ShowSeperators
  • ASSegmentedTab_ItemTextProperties
    • Fields:
      • BackgroundColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextAlignment_Horizontal As String
      • TextAlignment_Vertical As String
      • TextColor As Int
      • TextFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSegmentedTab_SeperatorProperties
    • Fields:
      • Color As Int
      • CornerRadius As Float
      • HeightPercentage As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Width As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix the selected tab is now keeping if the view is resizing
  • 1.02
    • Adds getSelectionPanel - gets the selection panel - the panel that highlight a tab on click
      • this is now possible:
      • IMG_1881.jpg
      • IMG_1882.jpg
    • Adds getBackgroundPanel - the child panel of mBase
    • TabChanged is now only triggered on a new tab, if you click on the same tab, nothing happens
  • 1.03
    • Adds getItemTextProperties - change the properties before you add atab, then this settings will be change the on the next added tab
      • now you can add Material- or FontAwesome-Icons on the Text parameter
  • 1.04 (read more about this update)
    • B4A and B4J - Corner Radius Fix
    • Add DesignerProperty CornerRadiusBackground - changes the CornerRadius of the view
    • Add DesignerProperty CornerRadiusSelectionPanel - changes the CornerRadius of the selector
    • Add DesignerProperty PaddingSelectionPanel - set a distance from the corners for the selector
      • IMG_7426.jpg
  • 1.05 (read more about this update)
    • Add Seperators - displays seperator items between non selected tabs
      • Add Designer Property "ShowSeperators" - default: False
      • Add UpdateSeperators - commit style changes
      • Add get SeperatorProperties - change the properties and call UpdateSeperators
      • IMG_7732.jpg
  • 1.06 (read more about this update)
    • Performance Improvements
      • Seperators only added if ShowSeperators = True
        • If you set the ShowSeperators = False then the seperators will be removed and vice versa
    • Seperators - Add HeightPercentage - default:50% - 50% from the view height
      • ASSegmentedTab1.SeperatorProperties.HeightPercentage = 50
    • Seperators - Add CornerRadius - default:0 - set the corner radius of the seperators
      • ASSegmentedTab2.SeperatorProperties.CornerRadius = ASSegmentedTab2.SeperatorProperties.Width/2'round seperators
    • Add get SeperatorProperties - gets the seperators height
    • B4J and B4I Resize BugFixes
    • Add set ImageHeight - sets the image Height/Width
  • 1.07
    • BugFix - SelectedIndex the index was not set
    • Add set Index - change the index without animation, do the same as SelectedIndex(1,0)
  • 1.08
    • BugFix - get Index
  • 1.09
    • BugFix - The new index at getIndex was assigned only after the TabChanged event
  • 1.10
    • BugFix - SelectedIndex the PaddingSelectionPanel is now observed with
  • 1.11 (read more about this update)
    • Add get and set AutoDecreaseTextSize - The text size is automatically adjusted to the space, if the text should not fit on one line
  • 1.12
    • Add GetTab - Gets the tab text, icon and the text properties
    • Add RefreshTab - If you change something on the tab, then call this
  • 1.13
    • Add Designer Porperty TabBackgroundColor
    • Add Designer Porperty SelectionColor
    • Add Designer Porperty SeperatorColor
    • Add Designer Porperty TextColor
  • 1.14
    • Designer Properties are now converted into dip
  • 1.15 (read more)
    • Add AddTab2
    • Add GetValue
    • Add Value to Type ASSegmentedTab_Tab
  • 1.16
    • Add Designer Property SelectionTextColor
    • Add SelectionTextColor to Type ASSegmentedTab_ItemTextProperties
  • 1.17
    • BugFix
  • 1.18
    • Add get Size - Number of tabs
  • 1.19 (read more)
    • Add AddTabAdvanced - Add a tab with the ASSegmentedTab_Tab type
    • Add Width to the ASSegmentedTab_Tab type
      • It's a optional tab property
      • If 0, then the width of the tab is calculated automatically
      • Default: 0
  • 1.20
    • B4J BugFix
Have Fun :)
 

Attachments

  • AS SegmentedTab Example.zip
    178.2 KB · Views: 751
  • 1.05 ASSegmentedTab.b4xlib
    3.6 KB · Views: 607
  • ASSegmentedTab.b4xlib
    6.5 KB · Views: 72
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
i will be much more thankful to you if you go through it and suggest or make it scrollable,
but then you don't learn it.
  1. Put the ASSegmentedTab to a own form
  2. add a xCustomListView under the ACToolBarLight
  3. use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"
  4. create a new panel
    1. B4X:
      Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")
  5. set a larger width than your ASSegmentedTab width is
    1. B4X:
      xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)
  6. load the form with the ASSegmentedTab to this panel
    1. B4X:
      xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")
  7. add this panel to your xCustomListView
    1. B4X:
      CustomListView1.Add(xpnl_seg_Tab_background,"")
For further questions, please make a new thread, I don't want this thread to be endless.
 
but then you don't learn it.
  1. Put the ASSegmentedTab to a own form
  2. add a xCustomListView under the ACToolBarLight
  3. use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"
  4. create a new panel
    1. B4X:
      Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")
  5. set a larger width than your ASSegmentedTab width is
    1. B4X:
      xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)
  6. load the form with the ASSegmentedTab to this panel
    1. B4X:
      xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")
  7. add this panel to your xCustomListView
    1. B4X:
      CustomListView1.Add(xpnl_seg_Tab_background,"")
For further questions, please make a new thread, I don't want this thread to be endless.
Thanks a lot
i will try your suggestion, and also i will start new thread if required
 
Thanks again

I have created new thread at following link

Regards
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
1.04

  • B4A and B4J - Corner Radius Fix
  • Add DesignerProperty CornerRadiusBackground - changes the CornerRadius of the view
  • Add DesignerProperty CornerRadiusSelectionPanel - changes the CornerRadius of the selector
  • Add DesignerProperty PaddingSelectionPanel - set a distance from the corners for the selector
Corner Radius Old VS New:
mBase:
'old way:
ASSegmentedTab2.Base.SetColorAndBorder(ASSegmentedTab2.Base.Color,0,0,10dip) 'make the view rounded
'new way:
ASSegmentedTab2.CornerRadiusBackground = 10dip 'make the view rounded
SelectionPanel:
'old
ASSegmentedTab2.SelectionPanel.SetColorAndBorder(ASSegmentedTab2.SelectionPanel.Color,0,0,10dip)'makes the selector rounded
'new
ASSegmentedTab2.CornerRadiusSelectionPanel = 10dip'makes the selector round
PaddingSelectionPanel:
B4X:
ASSegmentedTab1.PaddingSelectionPanel = 5
Result:
IMG_7426.jpg
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
1.05

  • Add Seperators - displays seperator items between non selected tabs
    • Add Designer Property "ShowSeperators" - default: False
    • Add UpdateSeperators - commit style changes
    • Add get SeperatorProperties - change the properties and call UpdateSeperators
IMG_7732.jpg

Examples:
B4X:
ASSegmentedTab1.ShowSeperators = True 'Shows the seperators - or use the Designer Property
ASSegmentedTab1.SeperatorProperties.Width = 2dip 'the width of the seperators
ASSegmentedTab1.SeperatorProperties.Color = xui.Color_Red 'the color of the seperators
ASSegmentedTab1.UpdateSeperators 'commit the style changes
 

Alexander Stolte

Expert
Licensed User
Longtime User
I had another update in the pipeline, I don't know why I didn't publish it back then, version 1.05 is still available as backup in the 1st post.
Update
  • 1.06
    • Performance Improvements
      • Seperators only added if ShowSeperators = True
        • If you set the ShowSeperators = False then the seperators will be removed and vice versa
    • Seperators - Add HeightPercentage - default:50% - 50% from the view height
      • ASSegmentedTab1.SeperatorProperties.HeightPercentage = 50
    • Seperators - Add CornerRadius - default:0 - set the corner radius of the seperators
      • ASSegmentedTab2.SeperatorProperties.CornerRadius = ASSegmentedTab2.SeperatorProperties.Width/2'round seperators
    • Add get SeperatorProperties - gets the seperators height
    • B4J and B4I Resize BugFixes
    • Add set ImageHeight - sets the image Height/Width
 

tufanv

Expert
Licensed User
Longtime User
Update
  • 1.07
    • BugFix - SelectedIndex the index was not set
    • Add set Index - change the index without animation, do the same as SelectedIndex(1,0)
Does this fix the problem where selectedindex changes to selected-1 for some reason? I tried it a while ago and this was happening
 

Rubsanpe

Active Member
Licensed User
Hi in AS SegmentedTab I have tested the option PaddingSelectionPanel = 5 and the result is correct.

Screenshot_1640514078.png


The problem is that when the tab is changed the selection is not centred with the indicated margin.

Screenshot_1640514086.png


Thanks for your great work on B4X

Rubén
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.11
    • Add get and set AutoDecreaseTextSize - The text size is automatically adjusted to the space, if the text should not fit on one line
AutoDecreaseTextSize
Default: False
B4X:
ASSegmentedTab1.AutoDecreaseTextSize = False
T2tEOv7YrNCbegUIOArwZVt5pH8NVtZskZXUu8o2dwQhlk80xJ.jpeg

B4X:
ASSegmentedTab1.AutoDecreaseTextSize = True
YsKK9cv2mVvVcTEvcxZKRWAkE9k9vY8bE99nIkyR5bICPc43AH.jpeg
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.12
    • Add GetTab - Gets the tab text, icon and the text properties
    • Add RefreshTab - If you change something on the tab, then call this
Example:
    'Changes the icon
    ASSegmentedTab2.GetTab(0).Icon = ASSegmentedTab2.FontToBitmap(Chr(0xE195),True,15,xui.Color_White)
    
    'Removes the icon and sets a text
    ASSegmentedTab2.GetTab(1).Icon = Null
    ASSegmentedTab2.GetTab(1).Text = "Test"
    
    'Makes the changes visible
    ASSegmentedTab2.RefreshTabs
 

adrianfreitas

Member
Licensed User
Longtime User
I would like to thank you for your great work and great contribution to the community. I would also like to ask if there is any way to use icon and text at the same time in the tab... I tried to simulate it in your example but without success. Thanks!

I just found your AS Tab Menu... thank you!
 

jahswant

Well-Known Member
Licensed User
Longtime User
I just found your AS Tab Menu... thank you!
You can also try this one :
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.13
    • Add Designer Porperty TabBackgroundColor
    • Add Designer Porperty SelectionColor
    • Add Designer Porperty SeperatorColor
    • Add Designer Porperty TextColor
No idea why these properties were missing... Now they are there and you can reach your goal even faster.
 
Top