CODEWITHSUNDEEP
android
Hardik Joshi
Hardik Joshi

Reputation: 9507

Create Cycle Tile effect on single image in android

I need to develop Cycle Tile effect on single image in android.

Cycle Tile windows 8 effect.

Reference app : Flava™ - Note/Journal , they are using Cycle Tile like effect in navigation drawer.

I tried with animations(fade in / fade out) but I think its different than Cycle Tile effect.

I searched on web but nothing find related to Cycle Tile with android.

Please help.

Upvotes: 1

Views: 783

Answers (1)

MysticMagicϡ
MysticMagicϡ

Reputation: 28823

I created a small demo to give this effect.

What I did was, show animations of images one by one while drawer is opened.

Zoom animation was not required. I used TranslateAnimation only.

Here is the drawe layout code in xml file:

<LinearLayout 
    android:id="@+id/left_drawer_layout"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical">

    <ImageView 
        android:id="@+id/drawerImage"
        android:contentDescription="@string/app_name"
        android:layout_width="match_parent"
        android:layout_height="140dip"
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="false"
        android:cropToPadding="false"
        android:scaleType ="centerCrop"
    />
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>

</LinearLayout>

Here's part of the java code:

//global initializations
private TypedArray imgs;
private int imageNumber = 0;
int x = 35;
int y = -35;
Animation animation;

//overriden method
public void onDrawerOpened(View drawerView) {
    getActionBar().setTitle(mDrawerTitle);
    invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    showAnimatedImages();
}

//put in onCreate
imgs = getResources().obtainTypedArray(R.array.drawer_images);

//method to show animated images
public void showAnimatedImages(){

    mDrawerImage.setImageResource(imgs.getResourceId(imageNumber, -1));
    animation = new TranslateAnimation(x, y, x, y);
    animation.setDuration(6000);
    animation.setFillAfter(true);
    mDrawerImage.startAnimation(animation);


    animation.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            System.out.println(imageNumber);
            System.out.println(imgs.length());
            // TODO Auto-generated method stub
            if(imageNumber > imgs.length())
                imageNumber = 0;
            else
                imageNumber = imageNumber+1;

            int r = x;
            x = y;
            y = r;

            showAnimatedImages();   
        }
    });
}

I am interchanging the x and y integers in onAnimationEnd to reverse direction. That means, first animation will be shown from up left to bottom right, and second will be shown vice-verse. imageNumber is increased till it reaches the length of array of images. After that again its started from 0.

Let me know in case you have any doubt.

This is not as smooth as that application, but I hope it helps you get going :)

Upvotes: 1

Related Questions