B4A Library SegmentedControlView

It wraps this Github project. Posting the following:
1. B4A project
2. B4A library files - copy them to your additional library folder

It will raise an Event in the B4A project when a segment is clicked allowing you to extract the index/position of the clicked segment (most left segment index / position = 0)

(it should actually be very simple to create this with B4A code only....)

Sample code:

#Region  Project Attributes
    #ApplicationLabel: SegmentedControlView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private scv1, scv2, scv3 As SegmentedControlView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

End Sub

Sub Activity_Resume
  
    '**************************************************** THE FIRST SEGMENTED VIEW *************************************
      
    scv1.IndicatorColor = Colors.Green
    scv1.SelectedTextColor = Colors.White
    scv1.BorderColor = Colors.Yellow
    scv1.BorderWidth = 3.0
    scv1.SegmentBackgroundColor = Colors.Cyan
    scv1.UnselectedTextColor = Colors.Black
    scv1.SegmentTextSize = 15.0
  
    'keep this order i.e only pass and set the index of the list after everything else has been set
    Dim l As List
    l.Initialize
    l.AddAll(Array As String("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"))  
    scv1.MenuList = l
    scv1.SelectedIndex = 0
  
    '**************************************************** THE SECOND SEGMENTED VIEW *************************************
  
    scv2.IndicatorColor = Colors.Magenta
    scv2.SelectedTextColor = Colors.Black
    scv2.BorderColor = Colors.Green
    scv2.BorderWidth = 1.0
    scv2.SegmentBackgroundColor = Colors.LightGray
    scv2.UnselectedTextColor = Colors.Yellow
    scv2.SegmentTextSize = 20.0
  
    'keep this order i.e only pass and set the index of the list after everything else has been set
    Dim l1 As List
    l1.Initialize
    l1.AddAll(Array As String("One", "Two", "Three", "Four", "Five"))  
    scv2.MenuList = l1
    scv2.SelectedIndex = 2  
  
    '**************************************************** THE THIRD SEGMENTED VIEW *************************************
  
    scv3.IndicatorColor = Colors.White
    scv3.SelectedTextColor = Colors.White
    scv3.BorderColor = Colors.White
    scv3.BorderWidth = 2.0
    scv3.SegmentBackgroundColor = Colors.DarkGray
    scv3.UnselectedTextColor = Colors.LightGray
    scv3.SegmentTextSize = 18.0
  
    'keep this order i.e only pass and set the index of the list after everything else has been set
    Dim l2 As List
    l2.Initialize
    l2.AddAll(Array As String("Alpha", "Bravo", "Charlie", "Delta"))  
    scv3.MenuList = l2
    scv3.SelectedIndex = 3      

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub scv1_segment_clicked(position As Int)
  
    Log("segment 1 postion clicked = " & position)
  
End Sub

Sub scv2_segment_clicked(position As Int)
  
    Log("segment 2 postion clicked = " & position)
  
End Sub

Sub scv3_segment_clicked(position As Int)
  
    Log("segment 3 postion clicked = " & position)
  
End Sub

Library:

SegmentedControlView
Author: Github: Emma Suzuki, Wrapped by: Johan Schoeman
Version: 1

• SegmentedControlView
  Events:
  • segment_clicked (position As Int)
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  • onSegmentSelect (segmentedControlView As View, position As Int)
  Properties:
  • Background As Drawable
  • BorderColor As Int [write only]
  • BorderWidth As Int [write only]
  • Color As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • IndicatorColor As Int [write only]
  • Left As Int
  • MenuList As List [write only]
  • Parent As Object [read only]
  • SegmentBackgroundColor As Int [write only]
  • SegmentTextSize As Float [write only]
  • SelectedIndex As Int [write only]
  • SelectedTextColor As Int [write only]
  • Tag As Object
  • Top As Int
  • UnselectedTextColor As Int [write only]
  • Visible As Boolean
  • Width As Int

 

[MarcoRome]

Very helpful ( +50 ).
Thank you again Johan

 

[aeric]

How can I make the segmented control view with rounded corners?

    '
    'Dim CD3 As ColorDrawable
    'CD3.Initialize(Colors.White, 3dip)
    'CD3.Initialize(Colors.RGB(0, 191, 255), 3dip)
    'CD3.Initialize2(Colors.RGB(0, 191, 255), 3dip, 1dip, Colors.RGB(0, 191, 255))
    'scv3.Background = CD3
    scv3.BorderWidth = 1dip
    scv3.SegmentTextSize = 14.0
    scv3.BorderColor = Colors.White
    'scv3.BorderColor = Colors.Transparent
    scv3.BorderColor = Colors.RGB(0, 191, 255)
    'scv3.SegmentBackgroundColor = Colors.White
    'scv3.SegmentBackgroundColor = Colors.Transparent
    scv3.SegmentBackgroundColor = Colors.RGB(0, 191, 255)
    scv3.SelectedTextColor = Colors.White
    'scv3.SelectedTextColor = Colors.Transparent
    'scv3.SelectedTextColor = Colors.RGB(0, 191, 255)
    scv3.UnselectedTextColor = Colors.White
    'scv3.UnselectedTextColor = Colors.Transparent
    'scv3.UnselectedTextColor = Colors.RGB(0, 191, 255)
    scv3.IndicatorColor = Colors.White
    'scv3.IndicatorColor = Colors.Transparent
    'scv3.IndicatorColor = Colors.RGB(0, 191, 255)
    
    'keep this order i.e only pass and set the index of the list after everything else has been set
    Dim List3 As List
    List3.Initialize
    List3.AddAll(Array As String("BUY", "HOLD", "SELL"))
    scv3.MenuList = List1
    scv3.SelectedIndex = 1

 

[rboeck]

Take a look here: https://www.b4x.com/android/forum/threads/uisegmentedcontrol.43950/

 

[aeric]

Take a look here: https://www.b4x.com/android/forum/threads/uisegmentedcontrol.43950/

Thanks.
This library is good but there are 2 shortcomings.
1. It is not a CustomView, so I can't add it in Designer. (Not a big issue)
2. I can't change the pressed button background colour. If I use Drawable, the rounded corner not correctly draw.