Multiplexing a map for one item in a grid view
So I am creating a restaurant app that displays items using a gridview. Each item has one button used to buy food and 3 text images and images to display the food image and its name, details and price.
What I'm trying to do here is flip animation for one item in the gridview to show more food information on the back.
Example <Flash animation animation from google android developer website uses 2 slices per frame to flip the whole slice... I don't need that I just need to flip the item which is part of the gridview which is already in the underlying adapter that is called in the fragment holds them all
I searched for alot and found examples, but when I try to implement them, I can't find the "android.animation" package in my sdk, noting that I updated the support libraries from the sdk manger.
Please help me on the flip guys I really need. thanks .
Here are some screenshots for the app AND the code .
https://drive.google.com/folder/d/0B9ZvWspyBhx1RUNydFFIei1qdm8/edit
+3
source to share
2 answers
So I found the answer to 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;
}
}
});
+4
source to share
Ok if I could understand the question you have to provide in order to reach the clicked item in the GridView, so first of all, in the GridView item in the Layout xml, set this:
android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"
Then set the OnItemClickListener () value in the gridView:
myGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
flipTheView(view, position);
}
});
The view object is the item that clicked on the GridView and the 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>
0
source to share