Android Question Card flip (flip between 2 images)

Shay

Well-Known Member
Licensed User
Longtime User
Hi
I am looking to flip card (many cards), meaning flip between 2 images with the card flip effect.
I found this, but this is very limited library
is there other solution? library?
 

Peter Simpson

Expert
Licensed User
Longtime User
@Shay in the past I've used the FlipImageView library, but that was in the past. If I were you I would first take a look at BitmapCreator before looking into using a library, you might/should be able to flip images with BitmapCreator.

Better still, look at THIS LIBRARY from @Star-Dust :cool:
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
Thanks, but I don't see that BitmapCreator has flip effect

I believe that you need to create it yourself from scratch if you are going to use BitmapCreator.

Okay, in that case you should use the SD XUIView library by Star-Dust, there is a function called rotate.
Using the first image you should rotate AngleY 180° with a timer, when AngleY reaches 90°, replace the first Image with the second and then continue rotating the image until it reaches 270°, replace the second image with the first image again, thus you get a card flip. Once the image has rotated 360° start the flip again from 0°.

y.gif
xyz.gif


You can utilise the rotate function to your hearts content.


Enjoy...
 
Last edited:
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
I am using the following code:
I wish to create many cards..

B4X:
            img(Counter).Initialize(Me,"imgCard_1")
            img(Counter).Tag = Counter
            Dim newimg As B4XBitmap = xui.LoadBitmap(File.DirAssets, "card.png")
            img(Counter).B4XBitmap = newimg

I am getting error with the "Tag" line
java.lang.RuntimeException: Object should first be initialized (B4XView).
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
Hmm, what exactly are you trying to accomplish, are you trying to create something like this?

ezgif-6-ee759373d44b.gif


I am using the following code:
I wish to create many cards..

B4X:
            img(Counter).Initialize(Me,"imgCard_1")
            img(Counter).Tag = Counter
            Dim newimg As B4XBitmap = xui.LoadBitmap(File.DirAssets, "card.png")
            img(Counter).B4XBitmap = newimg

I am getting error with the "Tag" line
java.lang.RuntimeException: Object should first be initialized (B4XView).

In code with no layout file:
Add a panel to the activity, Initialize the B4XView, add the view to the panel, then add the card image, then add the tag, then run trough your loop adding the cards. A good example to use for this is Erels Tic-Tac-Toe example...
 
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
Trying to do exactly what you did, can you please share the code, it will save us time
thanks
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
Did you create this? If yes, can you share an example? Thanks.
Hmm okay, yes I can do that, as you asked so kindly ;)

Trying to do exactly what you did, can you please share the code, it will save us time
thanks

In the link below you will find the code that I wrote as a proof of concept only. The code isn't optimised and can easily be approved upon, I wrote this only to verify my theory that flipping cards can easily be accomplished by using the SD XUIViews library by @Star-Dust.

>>> CLICK HERE <<< to download the code example in post #6.

Enjoy...
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Hmm okay, yes I can do that, as you asked so kindly ;)



In the link below you will find the code that I wrote as a proof of concept only. The code isn't optimised and can easily be approved upon, I wrote this only to verify my theory that flipping cards can easily be accomplished by using the SD XUIViews library by @Star-Dust.

>>> CLICK HERE <<< to download the code example in post #6.

Enjoy...
Small bug, when you click on one card before another has completed its animation (I didn't look at the code to look for the problem)
 
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
(without looking at the code) I guess you might put all in panel and disable it till animation is done - what do you think?
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
(without looking at the code) I guess you might put all in panel and disable it till animation is done - what do you think?
As I said, I didn't look at the code either and I don't even know its purpose, that is, if the user should be able to turn the cards quickly, without having to wait for the animation of a single card to complete.
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
(without looking at the code) I guess you might put all in panel and disable it till animation is done - what do you think?

I've just updated the code for you so that you can tap on one card at a time, just use the link in post #9. This is basically everything you need, you should study the code as much as possible and learn from, just don't copy and paste it without understanding what it is doing. Try your best to understand the flow of the code as I've made it as simple as possible to follow (without comments).

The code can obviously be optimised and made shorter, but this was just a concept example so optimising the code doesn't really bother me.

Enjoy...
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
Hello all,
Since @Erel has decided to make B4A free to use (especially for the future influx of newbies), this afternoon I spent 10 minutes or so re-writing the example in the linked in Post #9 to make it easier for developer/newbies to follow the code flow. I also optimised the code and added comments throughout.

With the influx of newbies that are potentially going to be joining this great community, I thought that I should create a better example.

Enjoy...
 
Last edited:
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
@Peter Simpson b.t.w you have a bug, try to replace the back, and face card to some other picture (not cards), see what happens to the flip
I am trying to fix it.. you you know the solution please let me know
 
Upvote 0

Peter Simpson

Expert
Licensed User
Longtime User
@Peter Simpson b.t.w you have a bug, try to replace the back, and face card to some other picture (not cards), see what happens to the flip
I am trying to fix it.. you you know the solution please let me know

If you are using the example in post #9, the you have to replace the images with at least 12 images. If you are not using less than 12 images, then you have to change the code to suit, and don't forget to change the x and y values.
 
Upvote 0

Shay

Well-Known Member
Licensed User
Longtime User
No I am using different images, this is why I am asking you to replace to some pictures and see.
second question how can I call image click from outside the clicked function?
I am building memory game and I need to flip back 2 cards together
 
Upvote 0
Top