ImageView Not staying responsive-CodePudding

I am trying to make a 10x10 checkers game with a board that is kind of slanted in a 3d position. when the 40 piece is arranged on the board in a real device it stays in their right squares. when i test the same code on different devices it moves out of their squares. How can i make the checker piece not to shift out of the square in all device.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bkkg"
    tools:context=".New_GameActivity">

    <ImageView
        android:id="@ id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/buard" />

    <ImageView
        android:id="@ id/square1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.095"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.930"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.270"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.930"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.440"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.930"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.612"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.93"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.825"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.93"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.020"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.810"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.188"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.812"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.358"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.812"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.527"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.812"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.690"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.812"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

    <ImageView
        android:id="@ id/square11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="116dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.09"
        app:layout_constraintHorizontal_bias="0.111"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.692"
        app:layout_constraintWidth_percent="0.05"
        app:srcCompat="@drawable/square" />

   
</androidx.constraintlayout.widget.ConstraintLayout>

I havent implemented anything on the Mainactivity yet.

CodePudding user response：

You are on the right track using horizontal and vertical biases. The problem is that you are constraining the pieces to the parent view (ConstraintLayout) and that parent view will change its size and aspect ratio. Simply change the orientation between landscape and portrait mode to see how things shift (except on a square device, that is.)

To fix this so the layout can adapt to various screens, define the board layout as you have it. Now take the pieces and constrain them to the start, top, end and bottom of the board. With that done, adjusting the biases of a piece can move it anywhere on the board. Depending on how your board is drawn, you may need some additional margin to get it right. This also assumes that the square positions are regularly spaced.

Here is a sample layout:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@ id/board"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/checkerboard" />

    <ImageView
        android:id="@ id/checker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="28dp"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintBottom_toBottomOf="@id/board"
        app:layout_constraintEnd_toEndOf="@id/board"
        app:layout_constraintStart_toStartOf="@id/board"
        app:layout_constraintTop_toTopOf="@id/board"
        app:srcCompat="@drawable/checker" />

    <ImageView
        android:id="@ id/checker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="28dp"
        app:layout_constraintVertical_bias="0.14"
        app:layout_constraintHorizontal_bias="0.14"
        app:layout_constraintBottom_toBottomOf="@id/board"
        app:layout_constraintEnd_toEndOf="@id/board"
        app:layout_constraintStart_toStartOf="@id/board"
        app:layout_constraintTop_toTopOf="@id/board"
        app:srcCompat="@drawable/checker" />

    <ImageView
        android:id="@ id/checker3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="28dp"
        app:layout_constraintVertical_bias="0.28"
        app:layout_constraintHorizontal_bias="0.28"
        app:layout_constraintBottom_toBottomOf="@id/board"
        app:layout_constraintEnd_toEndOf="@id/board"
        app:layout_constraintStart_toStartOf="@id/board"
        app:layout_constraintTop_toTopOf="@id/board"
        app:srcCompat="@drawable/checker" />

    <ImageView
        android:id="@ id/checker4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="28dp"
        app:layout_constraintVertical_bias="0.28"
        app:layout_constraintHorizontal_bias="0.43"
        app:layout_constraintBottom_toBottomOf="@id/board"
        app:layout_constraintEnd_toEndOf="@id/board"
        app:layout_constraintStart_toStartOf="@id/board"
        app:layout_constraintTop_toTopOf="@id/board"
        app:srcCompat="@drawable/checker" />

    <ImageView
        android:id="@ id/checker5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="28dp"
        app:layout_constraintVertical_bias="0.43"
        app:layout_constraintHorizontal_bias="0.57"
        app:layout_constraintBottom_toBottomOf="@id/board"
        app:layout_constraintEnd_toEndOf="@id/board"
        app:layout_constraintStart_toStartOf="@id/board"
        app:layout_constraintTop_toTopOf="@id/board"
        app:srcCompat="@drawable/checker" />
</androidx.constraintlayout.widget.ConstraintLayout>

Which looks like the following:

Now is the Android Studio designer, I will grab the first piece and change the vertical and horizontal biases to move it on the screen.

Depending upon your board, you may need to do some adjustments to move the position of the pieces are specified within the board. Maybe you board is not top-bottom/left-right symmetrical. In the worst case, you can define bias amounts for each square in an array and use that.