How to move ImageView manually without translateY

Question

I have started a layout where it should look like this:

but I'm having a hard time moving the 3 ImageView (Red) at the exact position. This is far as I could get:

Now my problem is, I wanted to set the three ImageView to clickable, to route to their corresponding screens, but this could not be applied to my layout since I just use translateY to move the ImageView(blue) downward by for this instance, 60dp. The true ImageView(blue) placement is 60dp above the actual display of the ImageView(aqua). So clicking it would not affect anything. Here's my xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mypage_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/silver" >

<FrameLayout
    android:id="@+id/frame"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/table_1"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:adjustViewBounds="true"
        android:background="@color/green" />

    <ImageView
        android:id="@+id/btn_top_page"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:adjustViewBounds="true"
        android:background="@color/maroon"
        android:clickable="true" />

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

        <RelativeLayout
            android:id="@+id/relative_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/relative_center" >

            <ImageView
                android:id="@+id/btn_left"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:clickable="true"
                android:src="@color/aqua"
                android:translationY="60dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/btn_left"
                android:layout_centerHorizontal="true"
                android:text="Left"
                android:textColor="#FFFFFF"
                android:translationY="65dp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relative_center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp" >

            <ImageView
                android:id="@+id/btn_center"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:clickable="true"
                android:src="@color/fuchsia"
                android:translationY="70dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/btn_center"
                android:layout_centerHorizontal="true"
                android:text="Center"
                android:textColor="#FFFFFF"
                android:translationY="75dp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/relative_right"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/relative_center" >

            <ImageView
                android:id="@+id/btn_right"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:clickable="true"
                android:src="@color/gray"
                android:translationY="60dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/btn_right"
                android:layout_centerHorizontal="true"
                android:text="Right"
                android:textColor="#FFFFFF"
                android:translationY="65dp" />
        </RelativeLayout>
    </RelativeLayout>
</FrameLayout>

Is this something the code should do? Any help will do. Thank you very much.

Answer 1

Try using layout_marginTop instead of translationY.