B4A Library [B4X] [XUI] AS Chips - Display your Hashtags, Filters or Categories

With this view you can display and interact with your hashtags, filters or categories. The view can expand itself if more chips are added than there is space for. (AutoExpand = True)

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

Scrolling alternative:

eIcZ6TnN621P6qGokntMQXjhB1XAlYp5U2fu2IOOqJJXEWHfA1.jpeg
Y6OyufOoB4UdttsHsRC1anyTNBCbsIErhrPvdogXkkqFbyebQG.jpeg


ASChips
Author: Alexander Stolte
Version: 1.00

  • ASChips_Chip
    • Fields:
      • Icon As B4XBitmap
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Tag As Object
      • Text As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASChips_ChipProperties
    • Fields:
      • BackgroundColor As Int
      • BorderSize As Float
      • CornerRadius As Float
      • Height As Float
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • TextGap As Float
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASChips_RemoveIconProperties
    • Fields:
      • BackgroundColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_Chips
    • Events:
      • ChipClick (Chip As ASChips_Chip)
      • ChipLongClick (Chip As ASChips_Chip)
      • ChipRemoved (Chip As ASChips_Chip)
      • HeightChanged (Height As Float)
      • HiddenChipsClicked (ListChips As List)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddChip (Text As String, Icon As B4XBitmap, xTag As Object) As String
      • Class_Globals As String
      • CreateASChips_ChipProperties (Height As Float, BackgroundColor As Int, TextColor As Int, xFont As B4XFont, CornerRadius As Float, BorderSize As Float, TextGap As Float) As ASChips_ChipProperties
      • CreateASChips_RemoveIconProperties (BackgroundColor As Int, TextColor As Int) As ASChips_RemoveIconProperties
      • 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
      • getAutoExpand As Boolean
      • GetChip (Index As Int) As ASChips_Chip
      • GetChipProperties (Index As Int) As ASChips_ChipProperties
      • getChipPropertiesGlobal As ASChips_ChipProperties
        Can only influence the appearance before the respective chip has been added
      • getRemoveIconProperties As ASChips_RemoveIconProperties
        Call RefreshChips if you change something
      • getShowRemoveIcon As Boolean
      • getSize As Int
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • RefreshChips As String
      • RemoveChip (Index As Int) As String
      • setAutoExpand (Expand As Boolean) As String
      • SetChipProperties (Index As Int, Properties As ASChips_ChipProperties) As String
        Call RefreshChips if you change something
      • setShowRemoveIcon (Show As Boolean) As String
    • Properties:
      • AutoExpand As Boolean
      • ChipPropertiesGlobal As ASChips_ChipProperties [read only]
        Can only influence the appearance before the respective chip has been added
      • RemoveIconProperties As ASChips_RemoveIconProperties [read only]
        Call RefreshChips if you change something
      • ShowRemoveIcon As Boolean
      • Size As Int [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • Add some properties
  • 1.02
    • Add AddChip2 - with one more parameter
      • ChipColor
  • 1.03
    • Add Clear - removes all chips
    • Add get and set GapBetween
  • 1.04 (read more)
    • Add Event CustomDrawChip
    • Add Event EmptyAreaClick
  • 1.05
    • Add Index to ASChips_Chip Type
  • 1.06
    • Add get and set TopGap - Gap between items vertical
      • Default: 5dip
  • 1.07
    • Add Designer Property SelectionMode - An integrated selection system
      • Modes
        • None
        • Single
        • Multi
      • Default: None
    • Add Designer Property CanDeselect - If true, then the user can remove the selection by clicking again
      • Default: True
    • Add set Selection
    • Add ClearSelections
    • Add get Selections
    • Add CopyChipPropertiesGlobal
    • Add RefreshProperties - Updates just the font and colors
    • Add Designer Property SelectionBackgroundColor
      • Default: Transparent
  • 1.08
    • BugFix
  • 1.09
    • Add Designer Property SelectionTextColor
      • Default: White
    • Add SetSelections
  • 1.10
    • BugFixes
  • 1.11
    • Add SetSelections2 - Set the selected items via a list of indexes
    • Add SetSelections3 - Set the selected items via a map of chip tags
Have Fun :)
 

Attachments

  • AS_Chips Example.zip
    179 KB · Views: 313
  • AS_Chips.b4xlib
    6 KB · Views: 32
Last edited:

CryoGenID

Active Member
Licensed User
Longtime User
Hello Alexander,

thanks!
But isn't that exactly what I am trying to do?
I change the "top" value of all views that are "below" the auto-sizing asChips view...
But for some reason the views inside the CLV do not update visually... In debug mode I can see that the calculated top values are higher than the values before but the views are not "moving down" :-/

Or did I miss something with your approach vs. mine (which I believe are the same)?

Thanks for any enlightenment :)

Best regards,

Chris
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.04
    • Add Event CustomDrawChip
    • Add Event EmptyAreaClick
  • 1.05
    • Add Index to ASChips_Chip Type
CustomDrawChip
B4X:
Private Sub Chips_Muscles_CustomDrawChip(Item As ASChips_CustomDraw)
   
    Dim xpnl_Line As B4XView = xui.CreatePanel("")
    Item.Views.BackgroundPanel.AddView(xpnl_Line,Item.Views.TextLabel.Left,Item.Views.BackgroundPanel.Height - 2dip,Item.Views.TextLabel.Width,2dip)
   
    xpnl_Line.Color = Item.Views.BackgroundPanel.Color
    Item.Views.BackgroundPanel.SetColorAndBorder(xui.Color_Transparent,0,0,0)

End Sub
(22) mage.png

EmptyAreaClick
I use the view in a xCustomListView and use only one row of chips. But if only 1 chip is visible, I still can't click on the free spot, because mBase uses the click event already. With this event I have a work around to click on free areas to get the list click event.
 
Last edited:

asales

Expert
Licensed User
Longtime User
Hello Alexander.
Great work, Thanks!

2 questions here:
1 - After click in AutoExpand switch to expand = true, if I click again (to change AS_Chips1.AutoExpand = False) don't works.

2 - Can I set a border an put a icon in the right side of the text in the chip, to make a view like this?:
1681221906593.png
 

Alexander Stolte

Expert
Licensed User
Longtime User
1 - After click in AutoExpand switch to expand = true, if I click again (to change AS_Chips1.AutoExpand = False) don't works.
B4X:
AS_Chips1.RefreshChips
2 - Can I set a border an put a icon in the right side of the text in the chip, to make a view like this?:
B4X:
AS_Chips1.ChipPropertiesGlobal.BorderSize = 2dip
AS_Chips1.AddChip("Test " & i,AS_Chips1.FontToBitmap(Chr(0xE0C8),True,30,xui.Color_Black),"")
put a icon in the right side of the text in the chip
Check the "CustomDrawChip" Event
 

asales

Expert
Licensed User
Longtime User
I can change the chip using this code:
B4X:
Private Sub AS_Chips2_CustomDrawChip(Item As ASChips_CustomDraw)
    Item.Views.RemoveIconLabel.Color = xui.Color_Transparent
    Item.Views.RemoveIconLabel.Text = Chr(0xE5CC)
    Item.Views.RemoveIconLabel.TextColor = xui.Color_RGB(120,0,170) 'xui.Color_Red
    Item.Views.RemoveIconLabel.TextSize = 24
    Item.Views.BackgroundPanel.SetColorAndBorder(xui.Color_White,2dip,xui.Color_RGB(170,0,240),18dip)
End Sub
1681262846812.png

but, 2 another things:
1 - If I click in the Remove Icon, even with the image changed, the chip is removed.
I can put this code to disable it:
B4X:
Item.Views.RemoveIconLabel.Enabled = False
but if I click in the icon, the ChipClick event is not raised.

2 - Can I change the space between text and icons?
1681262878824.png


Thanks for your support.
 

Attachments

  • 1681262875437.png
    1681262875437.png
    9.3 KB · Views: 103

Alexander Stolte

Expert
Licensed User
Longtime User
2 - Can I change the space between text and icons?
Try it with the TextGap property
B4X:
AS_Chips1.ChipPropertiesGlobal.TextGap = 5dip
but if I click in the icon, the ChipClick event is not raised.
Thats right, because i use this event to remove a chip. Hide the Button and put a new button on this position with the draw event...
 

asales

Expert
Licensed User
Longtime User
Try it with the TextGap property
B4X:
AS_Chips1.ChipPropertiesGlobal.TextGap = 5dip
Not changed.
Thats right, because i use this event to remove a chip. Hide the Button and put a new button on this position with the draw event...
Don't know if is the best code, but worked. Thanks!
B4X:
Private Sub AS_Chips2_CustomDrawChip(Item As ASChips_CustomDraw)
    Item.Views.RemoveIconLabel.Visible = False

    Dim bmp As B4XBitmap
    bmp = AS_Chips2.FontToBitmap(Chr(0xE5CC),True,24,xui.Color_Blue)

    Dim iv As ImageView
    iv.Initialize("iv")
    iv.Bitmap = bmp
    Item.Views.BackgroundPanel.AddView(iv,Item.Views.TextLabel.Left + Item.Views.TextLabel.Width, (Item.Views.BackgroundPanel.Height - 20dip) / 2, 20dip, 20dip)
  
    Item.Views.BackgroundPanel.SetColorAndBorder(xui.Color_White,2dip,xui.Color_RGB(170,0,240),18dip)
End Sub
1681307881390.png
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.07
    • Add Designer Property SelectionMode - An integrated selection system
      • Modes
        • None
        • Single
        • Multi
      • Default: None
    • Add Designer Property CanDeselect - If true, then the user can remove the selection by clicking again
      • Default: True
    • Add set Selection
    • Add ClearSelections
    • Add get Selections
    • Add CopyChipPropertiesGlobal
    • Add RefreshProperties - Updates just the font and colors
    • Add Designer Property SelectionBackgroundColor
      • Default: Transparent
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.10
    • BugFixes
  • It could be that chips were not visible because the algorithm thought there was not enough space, although there was enough space. As a result, the chip was not visible, but no +1 chip was visible either.
BugFixes
  • It could be that chips were not visible because the algorithm thought there was not enough space, although there was enough space. As a result, the chip was not visible, but no +1 chip was visible either.
  • One chip too many was always counted for the +1 chips.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.11
    • Add SetSelections2 - Set the selected items via a list of indexes
    • Add SetSelections3 - Set the selected items via a map of chip tags
SetSelection2
B4X:
    Dim lst_Indexes As List
    lst_Indexes.Initialize
    lst_Indexes.Add(0)
    lst_Indexes.Add(3)
    lst_Indexes.Add(5)
    AS_Chips1.SetSelections2(lst_Indexes)
SetSelection3
B4X:
    Dim ValueMap As Map
    ValueMap.Initialize
    ValueMap.Put("Item1","Value1")
    ValueMap.Put("Item3","Value3")
    ValueMap.Put("Item5","Value5")
    AS_Chips1.SetSelections3(ValueMap)
 
Top