Android Question Card flip (flip between 2 images)

Shay · Jan 27, 2020

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

FlipImageView

Hi Guys here is another little lib for B4A. In this lib. include a demo and library so copy the lib in your B4A library and run the demo. Just follow the demo to understand how it is easy now. FlipImageView Author: Giuseppe Salvi Version: 2 FlipImageView Events: FlipClick FlipEnd...

www.b4x.com

is there other solution? library?

Peter Simpson · Jan 27, 2020

@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

Shay · Jan 27, 2020

Thanks, but I don't see that BitmapCreator has flip effect

Peter Simpson · Jan 28, 2020

Shay said:
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°.

You can utilise the rotate function to your hearts content.

Enjoy...

Shay · Jan 28, 2020

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

Peter Simpson · Jan 29, 2020

Hmm, what exactly are you trying to accomplish, are you trying to create something like this?

Shay said:
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...

asales · Jan 29, 2020

Peter Simpson said:
View attachment 87940

Did you create this? If yes, can you share an example? Thanks.

Shay · Jan 29, 2020

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

Peter Simpson · Jan 29, 2020

asales said:
Did you create this? If yes, can you share an example? Thanks.

Hmm okay, yes I can do that, as you asked so kindly

Shay said:
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...

Shay · Jan 29, 2020

Thanks a lot man !!, will review it in the evening

LucaMs · Jan 29, 2020

Peter Simpson said:
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)

Shay · Jan 29, 2020

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

LucaMs · Jan 29, 2020

Shay said:
(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.

asales · Jan 29, 2020

Peter Simpson said:
Hmm okay, yes I can do that, as you asked so kindly

Thanks!!! ?

Peter Simpson · Jan 29, 2020

Shay said:
(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...

Peter Simpson · Jan 30, 2020

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

Shay · Jan 30, 2020

@Peter Simpson thanks a lot, you are the best

Shay · Jan 30, 2020

@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

Peter Simpson · Jan 30, 2020

Shay said:
@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.

Shay · Jan 30, 2020

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

Android Question Card flip (flip between 2 images)

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency