tic tac toe game in android screen size change

Question

i made tic tac toe game in android which is working fine in a 5 inch screen but in my honor bee 4.5 inch display it looks like this

in my 5 inch nexus avd it looks fine with all chips inside the line

here's the xml code for layout

   <GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:rowCount="3"
    android:columnCount="3"
    android:id="@+id/grid"
    android:background="@drawable/board">

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:onClick="drop"
        android:tag="0"
        android:clickable="false"
        android:maxHeight="87dp"
        android:maxWidth="87dp"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView3"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="35dp"
        android:onClick="drop"
        android:tag="1"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView2"
        android:layout_row="0"
        android:layout_column="2"
        android:onClick="drop"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:tag="2"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView6"
        android:layout_row="1"
        android:layout_column="0"
        android:onClick="drop"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="25dp"
        android:tag="3"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView5"
        android:layout_row="1"
        android:layout_column="1"
        android:onClick="drop"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="80dp"
        android:layout_marginRight="10dp"
        android:tag="4"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView8"
        android:layout_row="1"
        android:layout_column="2"
        android:onClick="drop"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="80dp"
        android:tag="5"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView4"
        android:layout_row="2"
        android:layout_column="0"
        android:onClick="drop"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        android:tag="6"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView7"
        android:layout_row="2"
        android:layout_column="1"
        android:onClick="drop"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:tag="7"
        android:adjustViewBounds="true"
        android:scaleType="centerInside" />

    <ImageView
        android:layout_width="87dp"
        android:layout_height="87dp"
        android:id="@+id/imageView9"
        android:layout_row="2"
        android:layout_column="2"
        android:onClick="drop"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:tag="8"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>
</GridLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bck"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:weightSum="1"
     android:alpha="1"
    android:id="@+id/playagainlayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/winnermsg"
        android:layout_gravity="center_horizontal"
        android:textSize="40sp"
        android:layout_weight="0.44" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Play Again"
        android:id="@+id/play_again"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0.05"
        android:onClick="playagain" />
</LinearLayout>

score 1 · Answer 1 · answered Aug 29 '16 at 20:03

1

You have to use layout_weight. Because weight deals with ratio and support all dimension. Otherwise setting width and height will not work in every devices

here is an example of layout_weight.

answered Aug 29 '16 at 20:03

Halumz - Mashuk Sadman

144
7

tic tac toe game in android screen size change

1 Answers1