B4A Library [B4X] [XUI] AS RatingBar

Alexander Stolte

Expert
Licensed User
Hey,
the performance and handling of this view is very nice.

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

Features
  • cross-platform compatible
  • responsible
  • events
  • easy to use
B4j: jXUI
B4a: XUi,Reflection
B4i: iXUI

Bildschirmfoto 2020-05-10 um 00.12.36.png
Screenshot_20200510-024144.jpg

20-05-10-02-41-19.gif


ASRatingBar
Author: Alexander Stolte
Version: 1.02

  • ASRatingBar
    • Events:
      • RatingChange (rating As Int)
      • RatingChanged (rating As Int)
    • Functions:
      • Class_Globals As String
      • 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
      • getCurrentRating As Int
      • getImage As B4XBitmap
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • setCurrentRating (rating As Int) As String
      • SetImages (active_image As B4XBitmap, inactive_image As B4XBitmap) As String
    • Properties:
      • CurrentRating As Int
      • Image As B4XBitmap [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • Add getBase
    • Add public variable Tag
  • 1.02
    • B4X Example
    • Custom Props explained
Have Fun :)
 

Attachments

Last edited:

Sandman

Well-Known Member
Licensed User
Hi @Alexander Stolte

I haven't looked at the source, but judging from the animated pics you're doing this in a way that leaves graphical artifacts. I'd say you first draw the grey icon and then, on top of it, the coloured icon. When you do it like that, you get too dark edges. (This is a result of the icon edges being partially translucent, and thus they combine when placing one on top of another.) This can be seen around all edges, more or less, but I've marked two places where it's visible:

1589099673603.png



There are two solutions for this, one is simple and one is more involved. Both will produce perfect results in the ratingbar:

1. Simple solution: When an icon is filled, don't draw the gray beneath.

2. Involved solution: Make all icons range all the way to black and treat them as masks instead.
 

Alexander Stolte

Expert
Licensed User
I haven't looked at the source, but judging from the animated pics you're doing this in a way that leaves graphical artifacts. I'd say you first draw the grey icon and then, on top of it, the coloured icon. When you do it like that, you get too dark edges. (This is a result of the icon edges being partially translucent, and thus they combine when placing one on top of another.) This can be seen around all edges, more or less, but I've marked two places where it's visible:
Thanks but, the view is simpler than that, you need to add 2 Images the active image and the inactive image, i think it comes from the function where i make the font awesome icons into an image. Try it with an image you'll see that the problems won't arise. I only resize the images to fit the screen.

Like I said the view is simple.
On my phone i can't see this.
 

layman

Member
Hi @Alexander Stolte

I haven't looked at the source, but judging from the animated pics you're doing this in a way that leaves graphical artifacts. I'd say you first draw the grey icon and then, on top of it, the coloured icon. When you do it like that, you get too dark edges. (This is a result of the icon edges being partially translucent, and thus they combine when placing one on top of another.) This can be seen around all edges, more or less, but I've marked two places where it's visible:

View attachment 93711


There are two solutions for this, one is simple and one is more involved. Both will produce perfect results in the ratingbar:

1. Simple solution: When an icon is filled, don't draw the gray beneath.

2. Involved solution: Make all icons range all the way to black and treat them as masks instead.
Hey,
the performance and handling of this view is very nice.

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

Features
  • cross-platform compatible
  • responsible
  • events
  • easy to use
B4j: jXUI
B4a: XUi,Reflection
B4i: iXUI

View attachment 93695View attachment 93696
View attachment 93697

ASRatingBar
Author: Alexander Stolte
Version: 1.00

  • ASRatingBar
    • Events:
      • RatingChange (rating As Int)
      • RatingChanged (rating As Int)
    • Functions:
      • Class_Globals As String
      • 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
      • getCurrentRating As Int
      • getImage As B4XBitmap
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • setCurrentRating (rating As Int) As String
      • SetImages (active_image As B4XBitmap, inactive_image As B4XBitmap) As String
    • Properties:
      • CurrentRating As Int
      • Image As B4XBitmap [read only]
Changelog
  • 1.00
    • Release
Have Fun :)
Hi
I had queried about exactly such a library a few days ago but wanted partial coloring of fontawesome fonts for rating fractions - like 4.5, 3.6 etc. Could you look into modifying to show fraction rating? Thank you
 
Top