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

[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
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 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:
      • 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
  • 1.21
    • AutoDecreaseTextSize BugFix
  • 1.22
    • Add set Index2 - Sets the index without the TabChanged Event
Have Fun :)
 

Attachments

  • AS SegmentedTab Example.zip
    178.2 KB · Views: 955
  • ASSegmentedTab.b4xlib
    6.6 KB · Views: 69
Last edited:
Click to expand...
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.02
    • Adds getSelectionPanel - gets the selection panel - the panel that highlight a tab on click
    • 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
This is now possible:
IMG_1881.jpg
IMG_1882.jpg
 
incendio

incendio

Well-Known Member
Licensed User
Longtime User
Hello,

Thanks for the library.

Got the error :
java.lang.RuntimeException: Method: setClipToOutline not found in: anywheresoftware.b4a.BALayout
 
incendio

incendio

Well-Known Member
Licensed User
Longtime User
Alexander Stolte said:
did you have selected JavaObject? This is needed
Click to expand...
I think your example missing libraries needed.

I downloaded the example, take a look the screenshot, only 2 libraries selected.

After I selected JavaObject library, still raised the same error.
 

Attachments

  • Tab.png
    Tab.png
    142.2 KB · Views: 458
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
incendio said:
I think your example missing libraries needed.
Click to expand...
Thats true, i have changed that. Download the B4XLib. again, thanks.

incendio said:
After I selected JavaObject library, still raised the same error.
Click to expand...
I test it too without problems.
This is the code i use:
B4X: 
Dim jo As JavaObject = pnl
jo.RunMethod("setClipToOutline", Array(True))
 
incendio

incendio

Well-Known Member
Licensed User
Longtime User
The example file still not selected the libraries needed :)

I tried it on Jelly Bean, didn't work. But it worked on Android 7.? Thanks.
 
vascofire

vascofire

Member
Is it possible to change the text size and color? E.g. Same size for the text (diferent from the default) and diferent text colors for the selected tab and the unselected tabs.
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
vascofire said:
Is it possible to change the text size and color?
Click to expand...
before you add an tab, you can change the style of it with this:
B4X: 
ASSegmentedTab2.ItemTextProperties.TextColor = xui.Color_White
vascofire said:
E.g. Same size for the text (diferent from the default) and diferent text colors for the selected tab and the unselected tabs.
Click to expand...
you can do it:
B4X: 
Sub ASSegmentedTab1_TabChanged(index As Int)
    Log("ASSegmentedTab1_TabChanged: " & index)
    For i = 0 To ASSegmentedTab2.BackgroundPanel.NumberOfViews -1
        Dim xpnl_tab_background As B4XView = ASSegmentedTab2.BackgroundPanel.GetView(i)
        Dim xlbl_text As B4XView = xpnl_tab_background.GetView(0) 'the text label
        Dim xiv_icon As B4XView = xpnl_tab_background.GetView(1) 'the icon ImageView
        
        If i = index Then 'selected tab
            xlbl_text.TextColor = xui.Color_White
            xlbl_text.Color = xui.Color_Black 'background color
            xlbl_text.Font = xui.CreateDefaultBoldFont(20)
        Else'unselected tabs
            xlbl_text.TextColor = xui.Color_Black
            xlbl_text.Color = xui.Color_White 'background color
            xlbl_text.Font = xui.CreateDefaultBoldFont(15)
        End If
        
    Next
End Sub
 
vascofire

vascofire

Member
Alexander Stolte said:
ASSegmentedTab2.ItemTextProperties.TextColor = xui.Color_White
Click to expand...

When I try This, I have the following log:
B4X: 
Unknown member: itemtextproperties

The one available is:
B4X: 
ASSegmentedTab2.CreateASSegmentedTab_ItemTextProperties
But I have some dificults to implement it, since I don't master B4X yet.
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
vascofire said:
I have the following log:
Click to expand...
that's because i was already living in the future, i just seemed to have forgotten to do an update back then.

Update
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
Example:
adds 2 tabs with Material Icons: 
ASSegmentedTab2.ItemTextProperties.TextFont = xui.CreateMaterialIcons(25)   
ASSegmentedTab2.AddTab(Chr(0xE238),Null)
ASSegmentedTab2.AddTab(Chr(0xE23F),Null)
 
U

Ulhas Rane

Member
Hello,

Is it possible to add scrollview or similar to assegmented tab so that for large no of tabs say 8-9 can be scrolled horizontally.
Currently if i increase the width say ASSegmentedTab1.Base.Width=550dip only initial tabs are visible

Activity_Create: 
Sub Activity_Create(FirstTime As Boolean)
    If FirstTime Then
        cartBitmap = LoadBitmap(File.DirAssets, "cart.png")
    End If
    Activity.LoadLayout("1")
    ToolbarHelper.Initialize
    ToolbarHelper.ShowUpIndicator = True 'set to true to show the up arrow
    ToolbarHelper.UpIndicatorDrawable = BitmapToBitmapDrawable(LoadBitmap(File.DirAssets, "hamburger.png"))
    ACToolBarLight1.InitMenuListener
    sm.Initialize("sm")
    Dim offset As Int = 100dip
    sm.BehindOffset = offset
    sm.Mode = sm.LEFT
    Dim lftMenu As Panel
    
    lftMenu.Initialize("")
    sm.Menu.AddView(lftMenu, 0, 0, 100%x - offset, 100%y)
    lftMenu.LoadLayout("Left")
    ASSegmentedTab1.Base.Width=550dip
    For i = 1 To 30
        ListView1.AddSingleLine("Item " & i)
    Next
    
    ASSegmentedTab1.Base.Width=550dip
    ASSegmentedTab1.Base.SetColorAndBorder(xui.Color_Black,0,0,0) 'make the view rounded
    For i = 0 To 3 -1
        ASSegmentedTab1.AddTab("Test " & i,Null)
    Next
    ASSegmentedTab1.AddTab("Weekly",Null)
    ASSegmentedTab1.AddTab("Monthly",Null)
    ASSegmentedTab1.AddTab("Yearly",Null)
    'ASSegmentedTab1.SelectionPanel.SetColorAndBorder(ASSegmentedTab1.SelectionPanel.Color,0,0,ASSegmentedTab1.SelectionPanel.Height/10)'makes the selector round
    
End Sub
 
U

Ulhas Rane

Member
Ulhas Rane said:
Hello,

Is it possible to add scrollview or similar to assegmented tab so that for large no of tabs say 8-9 can be scrolled horizontally.
Currently if i increase the width say ASSegmentedTab1.Base.Width=550dip only initial tabs are visible

Activity_Create: 
Sub Activity_Create(FirstTime As Boolean)
    If FirstTime Then
        cartBitmap = LoadBitmap(File.DirAssets, "cart.png")
    End If
    Activity.LoadLayout("1")
    ToolbarHelper.Initialize
    ToolbarHelper.ShowUpIndicator = True 'set to true to show the up arrow
    ToolbarHelper.UpIndicatorDrawable = BitmapToBitmapDrawable(LoadBitmap(File.DirAssets, "hamburger.png"))
    ACToolBarLight1.InitMenuListener
    sm.Initialize("sm")
    Dim offset As Int = 100dip
    sm.BehindOffset = offset
    sm.Mode = sm.LEFT
    Dim lftMenu As Panel
    
    lftMenu.Initialize("")
    sm.Menu.AddView(lftMenu, 0, 0, 100%x - offset, 100%y)
    lftMenu.LoadLayout("Left")
    ASSegmentedTab1.Base.Width=550dip
    For i = 1 To 30
        ListView1.AddSingleLine("Item " & i)
    Next
    
    ASSegmentedTab1.Base.Width=550dip
    ASSegmentedTab1.Base.SetColorAndBorder(xui.Color_Black,0,0,0) 'make the view rounded
    For i = 0 To 3 -1
        ASSegmentedTab1.AddTab("Test " & i,Null)
    Next
    ASSegmentedTab1.AddTab("Weekly",Null)
    ASSegmentedTab1.AddTab("Monthly",Null)
    ASSegmentedTab1.AddTab("Yearly",Null)
    'ASSegmentedTab1.SelectionPanel.SetColorAndBorder(ASSegmentedTab1.SelectionPanel.Color,0,0,ASSegmentedTab1.SelectionPanel.Height/10)'makes the selector round
    
End Sub
Click to expand...
Can someone please help me out to make it scrollable horizontally to make all tabs available

Regards
 
U

Ulhas Rane

Member
Alexander Stolte said:
Try this example.
Click to expand...
Thanks a lot Alexander

I have gone through your code and it works perfectly with scrolling. Your code is with B4xpages, since i am a new to B4a it is very difficult for me to replicate since my code don't used B4xpage. I have taken Appcompact example and added AS Sengmentedtab in it and trying to make it scrollable.

I have attached my project , i will be much more thankful to you if you go through it and suggest or make it scrollable,

Regards

Ulhas
 

Attachments

  • AppCompat_with ASsegmentedTab.zip
    140.5 KB · Views: 420
You must log in or register to reply here.
Top