Card flip animation for one item in a gridview

Question

So i am making an app for a restaurant that displays items using a gridview each item view have one button used to buy the meal and 3 textviews and imageview to display the meal image and its name , details and price .

What am trying to do here is a flip animation to one item in the gridview to show on the back more detailed information about the meal .

The card flip animation example from Google android developer website uses 2 fragments in a framelayout to flip a whole fragment i don't need that i only need to flip an item that is a part of a gridview who's already in a baseadapter that called in a fragment holds them all

I searched alot and found examples but when i try to implement them i can't find "android.animation" package in my sdk mentioning that i have updated the support libraries from sdk manger .

Please help me on the flip guys i really need it . thanks.

Here is some screen shots to the app And the code.

https://drive.google.com/folder/d/0B9ZvWspyBhx1RUNydFFIei1qdm8/edit

Answer 1

So i did find an answer for my question thanks to this tutorial

http://icetea09.com/blog/2014/10/21/android-card-flip-animation/

flight_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- When the roration reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="250"/>
</set>

flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="0"
    android:valueTo="180"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- Half-way through the rotation, hide the front card -->
<objectAnimator
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:startOffset="250"
    android:duration="1" />
</set>

fav_grid_single.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<LinearLayout
    android:id="@+id/fav_grid_single_Front"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/view_dropshadow" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <ImageView
            android:id="@+id/fav_grid_image"
            android:layout_width="312dp"
            android:layout_height="212dp"
            android:padding="10dp" />

        <TextView
            android:id="@+id/fav_grid_detialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_nameText"
            android:padding="10dp"
            android:text="ههههههههههههههههههههههههههههه"
            android:textColor="#111"
            android:textSize="17dp" />

        <TextView
            android:id="@+id/fav_grid_priceText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/fav_grid_buyButton"
            android:layout_alignBottom="@+id/fav_grid_buyButton"
            android:layout_alignRight="@+id/fav_grid_nameText"
            android:padding="5dp"
            android:text="500 SDG"
            android:textColor="#111"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/fav_grid_nameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_image"
            android:layout_marginLeft="18dp"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <RatingBar
            android:id="@+id/fav_ratingBar"
            android:layout_width="260dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_detialsText"
            android:paddingLeft="10dp" />

        <Button
            android:id="@+id/fav_grid_buyButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignLeft="@+id/fav_grid_nameText"
            android:layout_below="@+id/fav_ratingBar"
            android:background="@drawable/buy"
            android:padding="5dp"
            android:textSize="0dp" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/fav_grid_single_Back"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:alpha="0"
    android:background="@drawable/view_dropshadow"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/fav_grid_morespaText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" />

        <TextView
            android:id="@+id/fav_grid_moreNameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_morespaText"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/fav_grid_moreDetialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_moreNameText"
            android:padding="5dp"
            android:text="التفاصيل"
            android:textColor="#111"
            android:textSize="20dp" />
    </RelativeLayout>
</LinearLayout>

<Button
    android:id="@+id/fav_grid_flipButton"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/info3" />

</RelativeLayout>

FavGrid.java

final Button info = (Button) grid.findViewById(R.id.fav_grid_flipButton);
        info.setOnClickListener(new OnClickListener() {
            public void onClick(View arg0) {
            setRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flip_right_out);


            setLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flight_left_in);
                View v = parent.getChildAt(Integer.parseInt(buy.getText().toString()));
                imgFront = (LinearLayout)v.findViewById(R.id.fav_grid_single_Front);
                imgBack = (LinearLayout)v.findViewById(R.id.fav_grid_single_Back);
                if(!isBackVisible){
                    setRightOut.setTarget(imgFront);
                    setLeftIn.setTarget(imgBack);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = true;
                }
                else{
                    setRightOut.setTarget(imgBack);
                    setLeftIn.setTarget(imgFront);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = false;
                }
            }
        });

Answer 2

Ok, if I understood the question you should ensure to reach item click in the GridView so first of all in your GridView item on Layout xml set this:

android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"

Then, set OnItemClickListener() on your gridView:

myGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
            flipTheView(view, position);
        }
    });

view object is the item clicked on the GridView and position (guess what?) is the position of the item from the adapter (shown on the Grid)

private void flipTheView(View view) {
  AnimatorSet setFlipInFront = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.animator.flip_in_front);

  setFlipInFront.setTarget(view);
  setFlipInFront.start();
}

And flip_in_front.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<!-- Rotate. -->1000
<objectAnimator
    android:valueFrom="0"
    android:valueTo="-180"
    android:propertyName="rotationY"

    android:duration="@integer/card_flip_time_full" />

<!-- When the rotation reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="@integer/500"/>
</set>