Android Question Facebook Shimmer effect for Android

[Greg Breinholt]

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

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!)

 

[Erel]

This is quite similar to CoolLogo class that is based on BitmapCreator: https://www.b4x.com/android/forum/threads/b4x-coollogo.109011/#content

B4J example is attached.

 

[Greg Breinholt]

Great! Let me see what I can do with that ;-)

 

[Greg Breinholt]

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

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

 

[Erel]

Comment line 93:

'foffset = foffset + delta

The line will be vertical and the effect will actually look better.

 

[Greg Breinholt]

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 ;-)

 

[Greg Breinholt]

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.

Note that there are 2 images above; a white one to the right of the magenta block!

 

[LucaMs]

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

 

[sorex]

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.

 

[LucaMs]

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

 

[sorex]

well, that's what I think he did. performance wise it can't be faster than that.

 

[Greg Breinholt]

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.

 

[Greg Breinholt]

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

It covers all, but not an issue as my background is white.

 

[LucaMs]

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

 

[Greg Breinholt]

You can see the result in my app, go from landscape to portrait or vice versa:

https://play.google.com/store/apps/details?id=com.iprototypes.squircle