Positioning images based on screen size (android)

Question

I have just watched a tutorial on how to make a game (tictactoe). The only problem is the resizing and repositioning of the ImageViews on different sized phones. I searched it up and there was android:layout_weight but that didn't help? Any help much appreciated.

This is an image of the problem. I coded it to fit one screen, then I try a different phone and it shows me this. What it should look like is the blue selected box should be in the top right corner.

My xml file looks like this:

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="360dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/grid1"
    android:columnCount="3"
    android:rowCount="3">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="0"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_row="0"
        android:onClick="dropIn"
        android:tag="0" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="1"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:layout_row="0"
        android:onClick="dropIn"
        android:tag="1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="1"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="20dp"
        android:layout_row="1"
        android:onClick="dropIn"
        android:tag="4" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="2"
        android:layout_marginTop="10dp"
        android:layout_row="0"
        android:onClick="dropIn"
        android:tag="2" />


    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="2"
        android:layout_marginTop="20dp"
        android:layout_row="1"
        android:onClick="dropIn"
        android:tag="5" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="0"
        android:layout_marginTop="20dp"
        android:layout_row="1"
        android:onClick="dropIn"
        android:tag="3" />


    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="2"
        android:layout_marginTop="40dp"
        android:layout_row="2"
        android:onClick="dropIn"
        android:tag="8" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="0"
        android:layout_marginTop="40dp"
        android:layout_row="2"
        android:onClick="dropIn"
        android:tag="6" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_column="1"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="40dp"
        android:layout_row="2"
        android:onClick="dropIn"
        android:tag="7" />

</GridLayout>

<Button
    android:id="@+id/resetButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="14dp"
    android:layout_marginStart="14dp"
    android:onClick="reset"
    android:text="Reset" />

<TextView
    android:id="@+id/score1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:text="Circle score:" />

<TextView
    android:id="@+id/score2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginEnd="27dp"
    android:layout_marginRight="27dp"
    android:text="Cross score:" />

<TextView
    android:id="@+id/winner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/score1"
    android:layout_toEndOf="@+id/resetButton"
    android:layout_toRightOf="@+id/resetButton" />

Answer 1

I am guessing than you are setting a background image to make the tictactoe boxes (the 2 horizontal and 2 vertical lines). This will make it difficult for you to position your blue box. What you must do, is create those lines yourself.

<View>
   android:id = "@+id/vertical_line"
   android:layout_width = "1dp"
   android:layout_height = match_parent
   android:background = "#000000"
</View>

This will create a vertical black line. Now all you need to do for the bluebox is set the android:layout_toRightOf = "@id/vertical_line"

Answer 2

I would look at using a GridView of ImageViews . You can set numColumns and numRows to 3, and configure it to look square on whatever screen size you encounter