Carousel view implementation

Tutorials concerning the OpenGL® ES cross-platform API for full-function 2D and 3D graphics on the Google-Android platform.

Carousel view implementation

Postby murali.lancer » Tue Feb 09, 2010 7:34 am

Hi all ,
I am trying to implement Carousel view in the android application.like i have some set of images ,the images should rotate(around the x axis) left to right and right to left .according to our swipe touch of the screen .
i have the images in the drawable folder .

If any body knows give me the idea
thanks in advance


Murali dhuli
android developer
murali.lancer
Developer
Developer
 
Posts: 37
Joined: Mon Jul 13, 2009 10:37 am
Location: banglore

Top

Postby zorro » Tue Feb 09, 2010 6:05 pm

Do you want to implement the effect in 2D or in 3D? I mean, the images should scroll left-right like in any touchscreen phone image gallery, or they should rotate in a 3D circle around a vertical axis?
User avatar
zorro
Experienced Developer
Experienced Developer
 
Posts: 71
Joined: Mon Aug 10, 2009 3:11 pm
Location: Romania

Postby murali.lancer » Wed Feb 10, 2010 6:11 am

Hi ,thanks for your reply ,and

those images in the 2d itself ,no need of 3d

at first those images occupied the screen horizontally (full x axis with same height ).whenever i swipe the screen ,left to right or right to left ,according to our swipe those images should rotate (as a cyclic ).if the image reaches x '0th' position(0-480 screen size in the landscape mode,in the right to left rotation ),at the left side that should add after the last image which was at the right side .


in the left to right rotation ,whenever the image crosses the right side side end of the screen it should add before the first image.

like this rotation should be there ,

thanks in advance

Murali dhuli
murali.lancer
Developer
Developer
 
Posts: 37
Joined: Mon Jul 13, 2009 10:37 am
Location: banglore

Postby zorro » Wed Feb 10, 2010 1:39 pm

So it's simple: you have a queue of images, displayed on a horizontal bar. The last and the first images are 'tied' so it's a never ending scroll in left and right directions. You cand achieve this in many ways.. A possible solution that comes into my mind right now could be:
You load all your pictures in a vector of images, let's say:
Images [] pictures;
then you use an index variable that represent the current picture:
int currPicture;
All you have to do is show 3 pictures: left picture, current picture, right picture. When you swipe the screen you translate the pictures, then after the translation is completed you update the value of currPicture by +1 for left swipe (must be increased if the next picture to be seen must be from right direction, in opposite direction to the swipe) or -1 for right swipe. Attention must be paid at the limits of the pictures vector:
- if currPicture is the last picture, show picture[0] on the right
- if currPicture is 0, show last picture on the left

To avoid these limit problems perhaps it should be better to use a double linked queue structure.
You must create a new class for your picture:
class MyPicture
{
public Image imgImage;
public MyPicture leftPicture;
public MyPicture rightPicture;
}

The first member is the picture itself, while the last members are references to the left and right pictures. So at the initialization, we create a vector of MyPictures, then we parse this vector and create all the links between them, taking care of course at the edges of the vector. The currentPicture variable must be now a MyPicture object. After this, we simply draw the current MyPicture and it's neighbours (using the 2 links). If the user swipes, the next picture is easly obtained using one of the 2 references, left or right.

You could implement this easier with Canvas than with OpenGL, i guess. Hope this helps.
User avatar
zorro
Experienced Developer
Experienced Developer
 
Posts: 71
Joined: Mon Aug 10, 2009 3:11 pm
Location: Romania

Top

Return to Android 2D/3D Graphics - OpenGL Tutorials

Who is online

Users browsing this forum: No registered users and 9 guests