How do I Create an ImageView on top of another ImageView (in a Nested LinearLayout)

Question

I am currently trying to build a Gameboard for our Android Application. We are attempting to build the game Balderdash. I currently have two nested Linear Layouts to create a rows and columns structure. I would like to be create a new player icon for each player and set each icon on top of the start location. When a player receives a point, their icon would then move to the next game board section, till the final part of the game board has been reached by a player (aka they hit the amount of points to win.)

The problem is that I currently am unable to determine a way to place the ImageView for the player icon on top of the starting position. I also need to be able to create multiple player icons and stagger them a bit to all be placed on the same piece.

My XML code for the layout is the following:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <LinearLayout
        android:paddingTop="20dp"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp">

            <ImageView
                android:id="@+id/square7"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/orangegrid"
                tools:ignore="ContentDescription" />

            <ImageView
                android:id="@+id/square6"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/bluegrid" />

            <ImageView
                android:id="@+id/square5"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/cyangrid" />

            <ImageView
                android:id="@+id/square4"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/bluegrid" />
            <ImageView
                android:id="@+id/square3"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/orangegrid"/>
            <ImageView
                android:id="@+id/square2"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/cyangrid" />
            <TextView
                android:text="@string/start"
                android:textColor="#fff"
                android:gravity="center"
                android:id="@+id/square1"
                android:background="@drawable/bluegrid"
                android:layout_width="181dp"
                android:layout_height="70dp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/square8"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/cyangrid" />
            <ImageView
                android:id="@+id/square9"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/bluegrid" />
            <ImageView
                android:id="@+id/square10"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/orangegrid"/>
            <ImageView
                android:id="@+id/square11"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/cyangrid" />
            <ImageView
                android:id="@+id/square12"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/bluegrid" />
            <ImageView
                android:id="@+id/square13"
                android:layout_width="181dp"
                android:layout_height="70dp"
                android:background="@drawable/orangegrid"/>
            <TextView
                android:text="@string/end"
                android:textColor="#fff"
                android:gravity="center"
                android:id="@+id/square14"
                android:background="@drawable/cyangrid"
                android:layout_width="181dp"
                android:layout_height="70dp"/>
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/arrow"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_gravity="center_horizontal"
        android:paddingBottom="20dp"
        android:src="@drawable/arrow"
         />

</FrameLayout>






</android.support.constraint.ConstraintLayout>

Any help or suggestions is appreciated!

Answer 1

<RelativeLayout
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_gravity="center">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</RelativeLayout>

Answer 2

You sholud use RelativeLayout. LinearLayout's child can't overlap each other. visit : https://developer.android.com/guide/topics/ui/layout/linear.html

it clearly state "All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child."