Aviv Ben Shabat Aviv Ben Shabat - 20 days ago 8
Android Question

Android translate animation goes under layouts and views

I know there were questions about this topic but non helped me.
I'm making a card game (usually known as concentration or memory game), and whenever two identical cards are chosen i want them to go to the top using TranslateAnimation. the problem is, the views go under other layouts and views...

here's the function:

private void matchAnimation(int card1ID, int card2ID ,boolean isPlayer1) {

getNameLocations();
int x;
int[] card1Loc = new int[2];
int[] card2Loc = new int[2];
ImageView card1 = (ImageView)findViewById(card1ID);
ImageView card2 = (ImageView)findViewById(card2ID);

if (player)
x = playerOneLocation[0];
else
x = playerTwoLocation[0];

card1.getLocationOnScreen(card1Loc);
card2.getLocationOnScreen(card2Loc);

Animation animationMove =
new TranslateAnimation(0, x-card1Loc[0], 0,
playerOneLocation[1]-card1Loc[1]);
animationMove.setZAdjustment(Animation.ZORDER_TOP);
animationMove.setDuration(1000);
animationMove.setFillAfter(true);
card1.startAnimation(animationMove);
card2.startAnimation(animationMove);
card1.setVisibility(View.VISIBLE);
}


and here's the XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BDE1FF"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".GamePlay" >

<TableLayout
android:id="@+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:layout_centerHorizontal="true" >

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp" >

<ImageView
android:id="@+id/c1"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_1" />

<ImageView
android:id="@+id/c2"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_2"
/>

<ImageView
android:id="@+id/c3"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_3"
/>

<ImageView
android:id="@+id/c4"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_4"
/>
</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">

<ImageView
android:id="@+id/c5"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_5"
/>

<ImageView
android:id="@+id/c6"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_6"
/>

<ImageView
android:id="@+id/c7"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_7"
/>

<ImageView
android:id="@+id/c8"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_8"
/>
</TableRow>

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">

<ImageView
android:id="@+id/c9"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_9"
/>

<ImageView
android:id="@+id/c10"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_10"
/>

<ImageView
android:id="@+id/c11"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_11" />

<ImageView
android:id="@+id/c12"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_12" />
</TableRow>

<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp" >

<ImageView
android:id="@+id/c13"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_13"
/>

<ImageView
android:id="@+id/c14"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_14" />

<ImageView
android:id="@+id/c15"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_15" />

<ImageView
android:id="@+id/c16"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_16"
/>
</TableRow>

<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp" >

<ImageView
android:id="@+id/c17"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_17" />

<ImageView
android:id="@+id/c18"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_18" />

<ImageView
android:id="@+id/c19"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_19" />

<ImageView
android:id="@+id/c20"
android:onClick="cardPicked"
android:src="@drawable/icon"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:contentDescription="@string/card_20" />
</TableRow>


</TableLayout>


<TextView
android:id="@+id/playername1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
android:layout_marginRight="12dp"
android:text="@string/placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/playername2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
android:layout_marginLeft="12dp"
android:text="@string/placeholder"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/playerscore2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/playerscore1"
android:layout_alignBottom="@+id/playerscore1"
android:layout_alignLeft="@+id/tableLayout1"
android:text="@string/initial_score"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />

<ImageView
android:id="@+id/pointer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/playername1"
android:layout_centerHorizontal="true"
android:contentDescription="@string/smurf_pointing"
android:src="@drawable/smurf" />

<TextView
android:id="@+id/playerscore1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/tableLayout1"
android:layout_below="@+id/playername1"
android:text="@string/initial_score"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />




hope someone can help! thanks.

Answer

Set android:clipChildren="false" to all the container layouts.

Also see the question I had: Animation: Move TextView into another container.

However, I noticed that this leads to a problem with the layout in Android version 2.3. So what I'm trying to do now is to create an own ViewOverlay on where all the animations occurs.

Depending on for what version you aim to support, there is also a View.getViewOverlay()

Comments