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

IMG_1351.jpg

IMG_1352.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

[B4X] AS SegmentedTab - Custom tab width

https://www.b4x.com/android/forum/threads/b4x-xui-as-segmentedtab.126563/ ASSegmentedTab3.mBase.Color = xui.Color_ARGB(255,42, 156, 255) ASSegmentedTab3.SelectionPanel.Color = xui.Color_White ASSegmentedTab3.ItemTextProperties.TextColor = xui.Color_Black...
www.b4x.com www.b4x.com
AS_SegmentedTab
Author: Alexander Stolte
Version: 2.00
  • ASSegmentedTab
    • Events:
      • DisabledTabClicked (xTab As ASSegmentedTab_Tab)
      • TabChanged (Index As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddTab (Text As String, icon As B4XBitmap) As ASSegmentedTab_Tab
      • AddTab2 (Text As String, icon As B4XBitmap, Value As Object) As ASSegmentedTab_Tab
      • AddTabAdvanced (xTab As ASSegmentedTab_Tab) As ASSegmentedTab_Tab
      • CreateASSegmentedTab_DisabledTabProperties (TextColor As Int, BackgroundColor As Int) As ASSegmentedTab_DisabledTabProperties
      • CreateASSegmentedTab_ItemTextProperties (TextColor As Int, SelectedTextColor 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
      • CreateASSegmentedTab_Tab (Text As String, Icon As B4XBitmap, Value As Object, Enabled As Boolean, ItemTextProperties As ASSegmentedTab_ItemTextProperties) As ASSegmentedTab_Tab
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • DisabledTabProperties As ASSegmentedTab_DisabledTabProperties
      • 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 www.b4x.com
      • GetTab (Index As Int) As ASSegmentedTab_Tab
        Call RefreshTabs if you change something
      • GetValue (Index As Int) As Object
      • Initialize (Callback As Object, EventName As String)
      • RebuildTabs
        Removes all tabs And adds them again
      • RefreshTabs
      • RemoveTab (Index As Int)
        Removes a tab at the specified index
      • RemoveTab2 (Value As Object)
        Removes a tab with the specified value
      • SelectedIndex (index As Int, Duration As Int)
      • UpdateSeperators
    • Properties:
      • AutoDecreaseTextSize As Boolean
        The text size is automatically adjusted to the space, if the text should not fit on one line
        Default: False
      • BackgroundColor As Int
      • BackgroundPanel As B4XView [read only]
        the child panel of mBase
      • Base As B4XView [read only]
      • CornerRadiusBackground As Float [write only]
        changes the CornerRadius of the view
      • CornerRadiusSelectionPanel As Float [write only]
        changes the CornerRadius of the selector
      • HapticFeedback As Boolean
      • ImageHeight As Float [write only]
      • Index As Int
      • Index2 As Int [write only]
        Sets the index without the TabChanged Event
      • 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 As Float [write only]
        set a distance from the corners for the selector
      • SelectionColor As Int
      • 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 As Boolean [write only]
      • Size As Int [read only]
      • Theme As ASSegmentedTab_Theme [write only]
      • Theme_Dark As ASSegmentedTab_Theme [read only]
      • Theme_Light As ASSegmentedTab_Theme [read only]
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_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
  • 1.21
    • AutoDecreaseTextSize BugFix
  • 1.22
    • Add set Index2 - Sets the index without the TabChanged Event
  • 2.00 (read more)
    • BugFixes and Improvements
    • New RemoveTab and RemoveTab2
    • New get and set BackgroundColor
    • New get and set SelectionColor
    • New RebuildTabs - Removes all tabs And adds them again
    • New "Enabled" to ASSegmentedTab_Tab type
      • please check if enabled = true is set when using AddTabAdvanced
    • New Event DisabledTabClicked - Is triggered when the user clicks on a deactivated tab
    • New Designer Property HapticFeedback
      • Default: False
    • New Themes - You can now switch to Light or Dark mode
    • New set Theme
    • New get Theme_Dark
    • New get Theme_Light
    • New Designer Property ThemeChangeTransition
      • Default: None
Github: github.com/StolteX/AS_SegmentedTab

Have Fun :)
 

Attachments

Last edited:
Click to expand...
Ulhas Rane said:
i will be much more thankful to you if you go through it and suggest or make it scrollable,
Click to expand...
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.
 
Alexander Stolte said:
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.
Click to expand...
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

AS SegmentedTab Scrolling problem

Hello, This thread is in continuation with following thread https://www.b4x.com/android/forum/threads/b4x-xui-as-segmentedtab.126563/page-2 Hi Alexander, First of all thanks again for helping me out I like your approach about learning myself & followed your instruction step by step, but still...
www.b4x.com www.b4x.com
Regards
 
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:
[CODE lang=b4x title="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[/CODE]
[CODE lang="b4x" title="SelectionPanel"]'old
ASSegmentedTab2.SelectionPanel.SetColorAndBorder(ASSegmentedTab2.SelectionPanel.Color,0,0,10dip)'makes the selector rounded
'new
ASSegmentedTab2.CornerRadiusSelectionPanel = 10dip'makes the selector round[/CODE]
PaddingSelectionPanel:
B4X: 
ASSegmentedTab1.PaddingSelectionPanel = 5
Result:
IMG_7426.jpg
 
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
 
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
 
Alexander Stolte said:
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)
Click to expand...
Does this fix the problem where selectedindex changes to selected-1 for some reason? I tried it a while ago and this was happening
 
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
 
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
 
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
[CODE lang="b4x" title="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[/CODE]
 
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!
 
adrianfreitas said:
I just found your AS Tab Menu... thank you!
Click to expand...
You can also try this one :

[B4X] [XUI] AS TabMenuAdvanced

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...
www.b4x.com www.b4x.com
 
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.
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article Article
Android Example [B4X] AS SegmentedTab - Custom tab width
Replies
4
Views
4K
JakeBullet70
JakeBullet70
Alexander Stolte
  • Article Article
Android Example [B4X] AS Settings with SegmentedTab
Replies
0
Views
3K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS Settings
2 3 4
Replies
62
Views
45K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS TabMenuAdvanced
2 3 4
Replies
79
Views
53K
james_sgp
james_sgp
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS FlowTabMenu
Replies
13
Views
11K
Alexander Stolte
Alexander Stolte
Back
Top