Android translate animation goes under layouts and views

Question

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 1

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()