Android Question Facebook Shimmer effect for Android

Greg Breinholt

Member
Licensed User
Longtime User
Has anyone created a B4A library for the Facebook Shimmer effect?
https://facebook.github.io/shimmer-android/

shimmer-small.gif



An easy way to apply this during any UI loading would be great for providing user feedback (unfortunately library creation is above my skill set!)
 

Greg Breinholt

Member
Licensed User
Longtime User
Looks like the only issue is that the lines are not always at the same angle when the views are not square. Below is an icon and 2 lines, as used in a typical CustomListView. I made the lines red so that they are visible (usually they would light). As the views are not all square, the angle of the lines are different (which does not make it look as good as I'd like). This looks like some editing of the CoolLogo class to keep the angle the same over different views :-(

1580127645063.png



Alternatively, I could dynamically draw all three grey shapes in a single bitmap, and then I think the CoolLogo class would handle it fine ;-)
 
Upvote 0

Greg Breinholt

Member
Licensed User
Longtime User
Thanks again Erel!

Yes, that got them looking similar, but as the lines don't move synchronized across the 3 shapes, I think I will still have go go for the alternative solution:
> Alternatively, I could dynamically draw all three grey shapes in a single bitmap, and then I think the CoolLogo class would handle it fine ;-)
 
Upvote 0

Greg Breinholt

Member
Licensed User
Longtime User
In the end, to get the best performance, I used a single PNG (attached), and used basic animation to move it over the content ;-)
Note that the image is hard to see, as it's a white gradient with varying transparency - so I added a magenta back to make it easier to see below.

skeletonshader on magenta.png
skeletonshader.png



Note that there are 2 images above; a white one to the right of the magenta block!
 
Last edited:
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
In the end, to get the best performance, I used a single PNG (attached), and used basic animation to move it over the content ;-)
Note that the image is hard to see, as it's a white gradient with varying transparency - so I added a magenta back to make it easier to see below.

View attachment 88469 View attachment 88471
Can you post your solution, please? If I understand well, this way the "flash line" will cover all the rectangle, not only the text (and logo).
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
he just move the image from left to right. his background is probably white so it's (the overlay) not visible on none text portions of the screen.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
he just move the image from left to right. his background is probably white so it's (the overlay) not visible on none text portions of the screen.
Uhm... if so, it would only work on white or monochrome backgrounds, not the best solution.
Furthermore, the examples were not like that.

Thanks anyway, @sorex
 
Upvote 0

Greg Breinholt

Member
Licensed User
Longtime User
he just move the image from left to right. his background is probably white so it's (the overlay) not visible on none text portions of the screen.
Yes, that's exactly right. With a white background, no issue to have this as a moving overlay.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
It covers all, but not an issue as my background is white.
Yes, I understand, it is as Sorex had rightly understood, but it is only good in that case, while Erel's solution also works on "particular" backgrounds (not monochromatic).
 
Upvote 0
Top