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:

[B4X] [XUI] AS ScrollingChips based on xCustomListView - Display your Hashtags or Categories

I removed the old code and took the code from the AS_Chips to make this view even better. 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. :) Without scroll...

www.b4x.com

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
      

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

Have Fun

 

[CryoGenID]

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]

Update

• 1.02
  • Add AddChip2 - with one more parameter
    • ChipColor

 

[Alexander Stolte]

Update

• 1.03
  • Add Clear - removes all chips
  • Add get and set GapBetween

 

[Alexander Stolte]

Update

• 1.04
  • Add Event CustomDrawChip
  • Add Event EmptyAreaClick
• 1.05
  • Add Index to ASChips_Chip Type

CustomDrawChip

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

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.

 

[asales]

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

 

[Alexander Stolte]

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

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

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]

I can change the chip using this code:

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

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:

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?

Thanks for your support.

 

[Alexander Stolte]

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

Try it with the TextGap property

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]

Try it with the TextGap property

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!

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

 

[Alexander Stolte]

Not changed.

If you change the "ChipPropertiesGlobal", do it before adding the chips.

AS_Chips1.ChipPropertiesGlobal.TextGap = 40dip
AS_Chips1.AddChip....

 

[Alexander Stolte]

Update

• 1.06
  • Add get and set TopGap - Gap between items vertical
    • Default: 5dip

 

[Alexander Stolte]

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

 

[Alexander Stolte]

Update

• 1.08
  • BugFix