B4A Library [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 alternative:

[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...
www.b4x.com www.b4x.com

B4j: jXUI,xCustomListView
B4a: XUi,xCustomListView
B4i: iXUI,xCustomListView
WQ2c6bcZvbBWS4KUCOUULzwymacwXPmY9nEZJI3F2dVWOfA2Fi.jpeg
ezgif.com-resize (3).gif

AS_ScrollingChips
Author: Alexander Stolte
Version: 2.00
  • ASScrollingChips_Chip
    • Fields:
      • Icon As B4XBitmap
      • Index As Int
      • 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.
  • ASScrollingChips_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.
  • ASScrollingChips_CustomDraw
    • Fields:
      • Chip As ASScrollingChips_Chip
      • ChipProperties As ASScrollingChips_ChipProperties
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Views As ASScrollingChips_Views
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASScrollingChips_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.
  • ASScrollingChips_Views
    • Fields:
      • BackgroundPanel As B4XView
      • IconImageView As B4XView
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • RemoveIconLabel As B4XView
      • TextLabel As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_ScrollingChips
    • Events:
      • ChipClick (Chip As ASScrollingChips_Chip)
      • ChipLongClick (Chip As ASScrollingChips_Chip)
      • ChipRemoved (Chip As ASScrollingChips_Chip)
      • CustomDrawChip (Item As ASScrollingChips_CustomDraw)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddChip (Text As String, Icon As B4XBitmap, xTag As Object) As String
      • AddChip2 (Text As String, Icon As B4XBitmap, ChipColor As Int, xTag As Object) As String
      • Class_Globals As String
      • Clear As String
      • CreateASScrollingChips_ChipProperties (Height As Float, BackgroundColor As Int, TextColor As Int, xFont As B4XFont, CornerRadius As Float, BorderSize As Float, TextGap As Float) As ASScrollingChips_ChipProperties
      • CreateASScrollingChips_CustomDraw (Chip As ASScrollingChips_Chip, ChipProperties As ASScrollingChips_ChipProperties, Views As ASScrollingChips_Views) As ASScrollingChips_CustomDraw
      • CreateASScrollingChips_RemoveIconProperties (BackgroundColor As Int, TextColor As Int) As ASScrollingChips_RemoveIconProperties
      • CreateASScrollingChips_Views (BackgroundPanel As B4XView, TextLabel As B4XView, IconImageView As B4XView, RemoveIconLabel As B4XView) As ASScrollingChips_Views
      • 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
      • GetBackgroundAt (index As Int) As B4XView
      • getBackgroundColor As Int
        Call RefreshChips if you change something
      • GetChip (Index As Int) As ASScrollingChips_Chip
      • GetChipProperties (Index As Int) As ASScrollingChips_ChipProperties
      • getChipPropertiesGlobal As ASScrollingChips_ChipProperties
        Can only influence the appearance before the respective chip has been added
      • getCLV As b4j.example.customlistview
      • getGapBetween As Float
      • GetLabelAt (index As Int) As B4XView
      • getRemoveIconProperties As ASScrollingChips_RemoveIconProperties
        Call RefreshChips if you change something
      • getRound As Boolean
      • 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
      • setBackgroundColor (Color As Int) As String
      • SetChipProperties (Index As Int, Properties As ASScrollingChips_ChipProperties) As String
        Call RefreshChips if you change something
      • setGapBetween (Gap As Float) As String
      • setRound (isRound As Boolean) As String
        Call RefreshChips if you change something
      • setShowRemoveIcon (Show As Boolean) As String
    • Properties:
      • BackgroundColor As Int
        Call RefreshChips if you change something
      • ChipPropertiesGlobal As ASScrollingChips_ChipProperties [read only]
        Can only influence the appearance before the respective chip has been added
      • CLV As b4j.example.customlistview [read only]
      • GapBetween As Float
      • RemoveIconProperties As ASScrollingChips_RemoveIconProperties [read only]
        Call RefreshChips if you change something
      • Round As Boolean
        Call RefreshChips if you change something
      • ShowRemoveIcon As Boolean
      • Size As Int [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix - labels with different heights
  • 2.00
    • Complete new development
    • Now works like AS_Chips
  • 2.01 (read more)
    • 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 Width to ASScrollingChips_ChipProperties - If > 0 then this value is used instead of the calculated value by the text
    • Add AddChipCustom
    • Add CopyChipPropertiesGlobal
    • Add RefreshProperties - Updates just the font and colors
  • 2.02
    • Property SelectionColor renamed to SelectionBorderColor
    • Add Designer Property SelectionBackgroundColor
      • Default: Transparent
  • 2.03
    • BugFix
  • 2.04 (read more)
    • BugFixes
    • Add Designer Proeprty Alignment - IF center then a stub item are added left and right so the chips looks centered
      • Default: Left
  • 2.05
    • Add Designer Property SelectionTextColor
      • Default: White
    • Add SetSelections
  • 2.06
    • Add SetSelections2 - Set the selected items via a list of indexes
    • Add SetSelections3 - Set the selected items via a map of chip tags
  • 2.07
    • BugFix
    • Add get and set MaxSelectionCount - Only in SelectionMode = Multi - Defines the maximum number of items that may be selected
      • Default: 0
  • 2.08
    • BugFix on get Size - Has returned an incorrect value
  • 2.09
    • BugFixes
Have Fun :)
 

Attachments

  • AS ScrollingChips Example.zip
    178.2 KB · Views: 347
  • AS_ScrollingChips.b4xlib
    6.3 KB · Views: 76
Last edited:
Click to expand...
C

CryoGenID

Active Member
Licensed User
Longtime User
Alexander, this is really great!
I had been searching for a solution to display tags/chips but "tags" is a problematic word to search for as it has many meanings ;-)

Do you also have a "non-scrolling" way of creating tags (multiline if there are many tags) and preferably on demand with an "X" so that the user can also delete the tags in the UI?

Thanks so much :)

Best regards,

Chris
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
CryoGenID said:
Do you also have a "non-scrolling" way of creating tags (multiline if there are many tags) and preferably on demand with an "X" so that the user can also delete the tags in the UI?
Click to expand...
Should be quick to make, I can create one later ;)
 
C

CryoGenID

Active Member
Licensed User
Longtime User
Really? That would be awesome ;-)
I try to achieve s.th. like this for B4i, B4A and B4J:
1649863399972.png

So that I can display 1..n elements as tags/chips and (if the UI is in edit mode) remove some by clicking on the "X" (so the "X" shouldn't always be there)...
And if I have more elements than fit into one row/line it should get multiline...

Do you think we (or to be exact you ;-) ) could make that work?

Thanks a LOT for your help in advance!

Best regards,

Chris
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
CryoGenID said:
I try to achieve s.th. like this for B4i, B4A and B4J:
1649863399972.png
Click to expand...
This was actually planned for this library, but I didn't continue the project where I had used it, so I didn't need it and nobody had asked for it yet.

CryoGenID said:
Do you think we (or to be exact you ;-) ) could make that work?
Click to expand...
easy :)
 
C

CryoGenID

Active Member
Licensed User
Longtime User
Oh I am sooooo excited :)

Thanks a lot!

Looking forward to updates to this great lib :)

Best regards,

Chris
 
C

CryoGenID

Active Member
Licensed User
Longtime User
Hello Alexander,

that already looks great! :)
Can't wait ;-) ;-)

Thanks again for your help and support!

Best regards,
Chris
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User

[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...
www.b4x.com www.b4x.com
Viel Spaß ;)
 
pliroforikos

pliroforikos

Active Member
Licensed User
Hello, is there any way to remove one or all tags?
Thank you.

[Edit]. Sorry i thing i found it: ASScrollingTags1.CLV.Clear
 
J

javiers

Active Member
Licensed User
Longtime User
Hello, is it possible to drag and drop items between two Scrolling Tags?
Thanks in advance
 
asales

asales

Expert
Licensed User
Longtime User
1 - Can I change the height and corner of the tag?

2 - Can I put a border in the tag?

Thanks in advance.
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 2.00
    • Complete new development
    • Now works like AS_Chips
The version is absolutely no longer compatible with the old, the views must be pulled again on the form, because the name has changed.
I removed the old code and took the code from the AS_Chips to make this view even better.
ezgif.com-resize (3).gif
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 2.01
    • 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 Width to ASScrollingChips_ChipProperties - If > 0 then this value is used instead of the calculated value by the text
    • Add AddChipCustom
    • Add CopyChipPropertiesGlobal
    • Add RefreshProperties - Updates just the font and colors
Now you can do things like this:
AS ScrollingTags new features.gif

B4X: 
    AS_ScrollingChips1.SelectionMode = "Single"
    AS_ScrollingChips1.ChipPropertiesGlobal.Width = 30dip
    AS_ScrollingChips1.ChipPropertiesGlobal.Height = 30dip
    AS_ScrollingChips1.ChipPropertiesGlobal.CornerRadius = 30dip/2
    AS_ScrollingChips1.ChipPropertiesGlobal.TextGap = 0
    
    AS_ScrollingChips1.AddChip2("",Null,xui.Color_RGB(73, 98, 164),xui.Color_RGB(73, 98, 164))
    AS_ScrollingChips1.AddChip2("",Null,xui.Color_RGB(141, 68, 173),xui.Color_RGB(141, 68, 173))
    AS_ScrollingChips1.AddChip2("",Null,xui.Color_RGB(45, 136, 121),xui.Color_RGB(45, 136, 121))
    AS_ScrollingChips1.AddChip2("",Null,xui.Color_RGB(221, 95, 96),xui.Color_RGB(221, 95, 96))
    
    AS_ScrollingChips1.RefreshChips
Get the selections:
B4X: 
Log(AS_ScrollingChips1.Selections.Get(0))
 
You must log in or register to reply here.
Top