B4A Library [B4X] [XUI] AS SegmentedTab

Alexander Stolte · Jan 15, 2021

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

NEW PaddingSelectionPanel - Picture Value: 5

NEW ShowSeperators

Custom Tab Width Example

[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

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
    
    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
  - 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:
- 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
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
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

Alexander Stolte · Apr 18, 2021

Ulhas Rane said:
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.

Put the ASSegmentedTab to a own form
add a xCustomListView under the ACToolBarLight
use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"

create a new panel

B4X:

Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")

set a larger width than your ASSegmentedTab width is

B4X:

xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)

load the form with the ASSegmentedTab to this panel
1. B4X:
```
xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")
```

add this panel to your xCustomListView

B4X:

CustomListView1.Add(xpnl_seg_Tab_background,"")

For further questions, please make a new thread, I don't want this thread to be endless.

Ulhas Rane · Apr 18, 2021

Alexander Stolte said:
but then you don't learn it.

Put the ASSegmentedTab to a own form

add a xCustomListView under the ACToolBarLight

use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"

create a new panel

B4X:

Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")

set a larger width than your ASSegmentedTab width is

B4X:

xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)

load the form with the ASSegmentedTab to this panel

B4X:

xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")

add this panel to your xCustomListView

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

Ulhas Rane · Apr 18, 2021

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

Regards

Alexander Stolte · Jun 1, 2021

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:

Alexander Stolte · Jun 9, 2021

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

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 · Aug 9, 2021

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 · Oct 25, 2021

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)

tufanv · Oct 26, 2021

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)

Does this fix the problem where selectedindex changes to selected-1 for some reason? I tried it a while ago and this was happening

Alexander Stolte · Oct 26, 2021

tufanv said:
Does this fix the problem where selectedindex changes to selected-1 for some reason? I tried it a while ago and this was happening

You have to tell me, I never had such a problem.

Alexander Stolte · Nov 5, 2021

Update

1.08
- BugFix - get Index

Alexander Stolte · Nov 6, 2021

Update

1.09
- BugFix - The new index at getIndex was assigned only after the TabChanged event

Rubsanpe · Dec 26, 2021

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

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

Thanks for your great work on B4X

Rubén

Alexander Stolte · Dec 26, 2021

Update

1.10
- BugFix - SelectedIndex the PaddingSelectionPanel is now observed with

Rubsanpe said:
Thanks for your great work on B4X

Thank you!

Rubsanpe · Dec 26, 2021

Thank you very much. Your work is making B4X better and much more attractive.

Rubén

Alexander Stolte · Dec 26, 2021

Rubsanpe said:
Your work is making B4X better and much more attractive.

more is coming next week

Alexander Stolte · Jan 4, 2022

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

B4X:

ASSegmentedTab1.AutoDecreaseTextSize = True

Alexander Stolte · May 27, 2022

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 · Aug 26, 2022

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 · Aug 26, 2022

adrianfreitas said:
I just found your AS Tab Menu... thank you!

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

Alexander Stolte · Oct 19, 2022

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.

B4A Library [B4X] [XUI] AS SegmentedTab

Attachments

Expert

Member

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Expert

Expert

Member

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency