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
• 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
• 1.12
  • BugFixes
  • Add get and set MaxSelectionCount - Only in SelectionMode = Multi - Defines the maximum number of items that may be selected
    • Default: 0
• 1.13
  • Add GetLabelAt - Gets the chip text label
  • Add GetBackgroundAt - Gets the chip background panel

Have Fun

 

[CryoGenID]

Hello Alexander,

thanks again so much for your work!

I finally had a chance to test it, but I ran into some problems unfortunately...

B4J:

1) The IDE tells me not to initialize the variable "asChips__PP__skills" but if I do not init it, I get an error that the variable is not initialized ;-)
2) Could it be that the colors are swapped (Background <-> TextColor)?

B4i:

I get this error with the same source code as in B4J (I am using B4X project setup)...

Do you have an idea what might be wrong?

Thanks so much!

Best regards,

Chris

 

[Alexander Stolte]

The IDE tells me not to initialize the variable "asChips__PP__skills" but if I do not init it, I get an error that the variable is not initialized ;-)

You add the view in the designer, no need to ini. the view in the code!
Be sure that the view is added to your layout, before you want to access the view.

Could it be that the colors are swapped (Background <-> TextColor)?

no, call RefreshChips if you change something.

 

[CryoGenID]

Hello Alexander,

thanks for your reply!

The hint that the layout has to be loaded first did the trick THANKS

One more question:
Can I define the length of the tag? Currently text gets cut off (see the first screenshot in my first reply)...

Again thanks for all your help

Best regards,

Chris

 

[Alexander Stolte]

Can I define the length of the tag? Currently text gets cut off (see the first screenshot in my first reply)...

I think you have AutoScale in the layout where the AS_Chips are, right?
Remove the AutoScale will fix this.

 

[CryoGenID]

When I deactivate AutoScale (which I need to that I can see everything ;-) it looks like this:

Here you can also see one other thing: When the background of the asChips view is transparent, the first row cuts into the border by one pixel ;-)
Could you make a space there with one pixel so that the border doesn't get cut off?

And I have not overseen anything but the background of the asChips view can only be set via the designer right? Via code I can only set the background of the chips...

Thanks

Best regards,

Chris

 

[Alexander Stolte]

When I deactivate AutoScale (which I need to that I can see everything ;-) it looks like this:

Do you have a larger font set as default in your phone? Do you have the same problems in my test project?

Here you can also see one other thing: When the background of the asChips view is transparent, the first row cuts into the border by one pixel ;-)
Could you make a space there with one pixel so that the border doesn't get cut off?

Or you add a panel behind it and make the border there.

And I have not overseen anything but the background of the asChips view can only be set via the designer right? Via code I can only set the background of the chips...

yes thats right, i will add a prop. in the next update.

 

[CryoGenID]

Hello Alexander,
thanks for your reply!
Unfortunately no, I have no "AutoScale" in the Script (neither for "General" nor "variant"):

Interesting is that the chips get cut off at different lengths:

Do you have any other ideas (hopefully)?

One other thing is that I seem to be missing a lot of icons (FontAwesome or Material), I am currently trying to figure out why...
I looked at the FontAwesome Cheatsheet but the icons I tested to not work, the same with Material, only some work... I tried this page to get the correct character code (https://fonts.google.com/icons?selected=Material+Icons) but a lot of them come up as you can see in the screenshot above... Do you perhaps have a hint for me there? I would love to use the whole FontAwesome font (incl. Brand icons)...

Thanks again and best regards,

Chris

 

[Alexander Stolte]

You, there is a reason for the icon parameter when adding.

Just take a look at the example project, there is an example where I add a MaterialIcon as an icon, then the length of the chip works again.
But I can't support FonAwesome or MaterialIcon as text, because the length function can't handle it, as you can see.

 

[CryoGenID]

Thanks Alexander, I managed to get the icon working (same as in your example with .FontToBitmap)

I am adding the chips like this:

asChips__PP__skills.AddChip(PP__skillsList.Get(PP__skills__Counter),asChips__PP__skills.FontToBitmap(Chr(0xF08C),False,30,xui.Color_Black), "")

But I still have the problem with the cut off text :-(

Any further ideas?

Thanks

Best regards,

Chris

 

[Alexander Stolte]

Do you have the same problems in my test project?

You did not answer the question if the same problem exists in my example project as well

 

[CryoGenID]

Oh sorry somehow I misunderstood you...
Here is the result from your demo, when it is only "test <NUMBER>" everything is fine (but that is not a very long text ;-) ) so I changed only the text to "test LongLongLongLong <NUMBER>" and there is the same problem:

I hope that was what you wanted me to test?

Best regards,

Chris

 

[Alexander Stolte]

Update

• 1.01
  • Add some properties

Do you have any other ideas (hopefully)?

The error was not in the view, rather the font has changed. To fix this just add a Sleep(0) before you call RefreshChips the 1st time. The example project was adapted to this.

    For i = 1 To 21 -1
        AS_Chips1.AddChip("TestTestTestTestTestTestTestTestTest " & i,AS_Chips1.FontToBitmap(Chr(0xE0C8),True,30,xui.Color_Black),"")   
    Next
    Sleep(0)
    AS_Chips1.RefreshChips

 

[CryoGenID]

Hello Alexander,

perfect now it is working! Again, thanks so much!

I will keep on working with your library, perhaps I will get back to you with questions again... Hope that is ok

Have a nice weekend!

Best regards,
Chris

 

[CryoGenID]

Hello Alexander,

sorry to bother you again but I just noticed this and hope that you have a solution for me ;-)
The library can auto-expand perfectly its own "container" based on the amount of tags in there.
But unfortunately it "overwrites" everything that is placed "below" (further down the page) during that action...
That results in s.t.h. like this:

I have for a simple test just a label + asChips, below that (in the designer) I have the same again.
When I now fill both lists so that they autoexpand, the lower elements don't get also "pushed down" automatically, which creates kind of a mess ;-)

Could you automatically push all views below the asChips view down when it auto-expands? Is that possible?

Thanks for any clues

Best regards,

Chris

 

[Alexander Stolte]

Could you automatically push all views below the asChips view down when it auto-expands? Is that possible?

That's not possible, that's why the view have the HeightChanged event, so you can adjust the views bellow.

 

[CryoGenID]

Well, I already feared that ;-)

Is there a "trick" how to target all subsequent views "below" the current asChips view, so that I can iterate through them and change their "top" value?

Thanks

Best regards,

Chris

 

[Cableguy]

Well, I already feared that ;-)

Is there a "trick" how to target all subsequent views "below" the current asChips view, so that I can iterate through them and change their "top" value?

Thanks

Best regards,

Chris

When adding new views, keep track of their bottom values in the "heightchanged" event..

 

[CryoGenID]

Thanks for your reply, CableGuy!

Sorry for being such a pain, but I still got problems:
I thought I had a good idea:
In the "HeightChanged"-event, I am going through all views, check if their top value is higher than the current asChips top-value + height --> I know that I have a view which needs repositioning.
Then I add the height of the asChips to the top-value of the found view.

When I look at the logs, it looks good, the top-value is changed accordingly. But unfortunately, the views on the CLV do not move to their new top positions...
Any idea what I need to do so that they move to their newly assigned "top" values?

Private Sub asChips__PP__skills_HeightChanged (Height As Float)
    
    Dim b4xviewIn As B4XView = B4XPages.MainPage.CLV.GetPanel(0)
    For j = 0 To b4xviewIn.NumberOfViews-1
        Dim v As B4XView = b4xviewIn.GetView(j)
        If v.Tag Is AS_Chips Then
            Dim temp__asChips As AS_Chips = v.Tag
            If temp__asChips.mBase.Top > (asChips__PP__skills.mBase.Top + asChips__PP__skills.mBase.Height) Then
                ' This element is BELOW the just resized element
                Log("Chips: '" & temp__asChips.mBase.Tag & "' Old: " & temp__asChips.mBase.Top & " -> New: " & (temp__asChips.mBase.Top + Height))
                temp__asChips.mbase.Top = temp__asChips.mBase.Top + Height
            End If
        Else
            If v.Top > (asChips__PP__skills.mBase.Top +  asChips__PP__skills.mBase.Height) Then
                ' This element is BELOW the just resized element
                Log("Other view (e.g. label) '" & v.Tag & "' : Old: " & v.Top & " -> New: " & (v.Top + Height))
                v.Top = v.Top + Height
            End If
        End If
    Next
End Sub

Thanks for any hints to finally get this working

Best regards,

Chris

 

[Alexander Stolte]

You just have to update the top-values. and call a sub in the event where this is done

Private Sub AS_Chips1_HeightChanged (Height As Float)
    SetHeights
End Sub
Private Sub AS_Chips2_HeightChanged (Height As Float)
    SetHeights
End Sub

Private Sub AS_Chips3_HeightChanged (Height As Float)
    SetHeights
End Sub

Private Sub SetHeights
 
    AS_Chips2.mBase.Top = AS_Chips1.mBase.Top + AS_Chips1.mBase.Height
    AS_Chips3.mBase.Top = AS_Chips2.mBase.Top + AS_Chips2.mBase.Height
 
End Sub

So you can make sure that all heights are always correct