Moving an ImageView on Android

Question

I'm trying to write an app to play Snakes and Ladders (this is the first app I've ever written, and i'm just doing it for fun...not for a course or commercial purposes or anything).

So my problem is, I want to move my ImageView of a player token from one square on the board to another square. I don't know how to do two things:

1. How can I place the imageview of the token on top of the board imageview in the layout?

2. How can I go about moving the token imageview itself by a certain % of the size of the board imageview? Is this possible or am I supposed to do this some other way?

I have classes written for the player, board and squares that all work fine. I just need to know what to do with the player's token. (I have tested it by displaying a toast message saying the player location every time I roll the die).

Here is the xml code for the layout:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center" 
    android:background="@drawable/stripes_background"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_gravity="center"
        android:layout_marginTop="0dp"
        android:layout_weight="0.1"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/toGameListButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.00"
            android:background="@drawable/alternate_button_background"
            android:text="Quit"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />

        <Button
            android:id="@+id/restartButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.00"
            android:background="@drawable/alternate_button_background"
            android:text="Restart"
            android:textColor="#FFFFFF"
            android:textSize="17sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/textViewTurn"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:gravity="center"
        android:layout_weight="0.1"
        android:text="TextView set to Player&apos;s turn"
        android:textColor="#FF9900"
        android:textSize="19sp"
        android:textStyle="bold" />

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:layout_weight="0.7" >

        <ImageView
            android:id="@+id/game_board"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="Board"
            android:src="@drawable/snakes_and_ladders_raw_board" />

        <ImageView
            android:id="@+id/green_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </FrameLayout>

    <Button
        android:id="@+id/rollButton"
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_marginTop="10dp"
        android:layout_weight="0.1"
        android:background="@drawable/alternate_button_background"
        android:text="Roll!"
        android:textColor="#FFFFFF"
        android:textSize="19sp" />

</LinearLayout>

Any advice is greatly appreciated. Let me know if I'm supposed to be more specific in my problem or anything.

Answer 1

How can I place the imageview of the token on top of the board imageview in the layout?

You can simply put both ImageViews into a RelativeLayout and then make sure that the ImageView of the token is below (in code) the ImageView of the board.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/game_board"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="Board"
            android:src="@drawable/snakes_and_ladders_raw_board" />

        <!-- views below in code will be on top -->
        <ImageView
            android:id="@+id/green_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

How can I go about moving the token imageview itself by a certain % of the size of the board imageview? Is this possible or am I supposed to do this some other way?

You could access the board ImageView width property and animate the token ImageView accordingly.

ImageView board = (ImageView) findViewById(R.id.board);
ImageView token = (ImageView) findViewById(R.id.token);

// animates the token imageview to the right side by 50% of the boardimageviews width
token.animate().x(board.getWidth() / 2).setDuration(500);