屏幕尺寸变窄时宽度变化

Question

I am a new programmer. I having trouble with some of the screens my grid new screen shot appears as wired rows (maybe because the width of the screen is narrow ) . I've uploaded picture of my problem and my code. where did I go wrong? hw can I fix it?

my problem

   <GridLayout
    android:id="@+id/gameTableLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="80dp"
    android:layout_marginRight="80dp"
    android:layout_marginTop="10dp"
    android:gravity="center"

    android:orientation="horizontal"
    android:visibility="invisible">

    <!-- the 16 buttons -->
    <!-- 1:     (0,0) -->
    <Button
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/gridLayout"
        android:layout_alignStart="@+id/gridLayout"
        android:layout_column="0"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:background="@drawable/border"
        android:onClick="choosePlace"
        android:tag="1"
        android:text="1"
        android:textSize="20sp" />

Answer 1

Create Different values folder for different screens as in following answer: How to define dimens.xml for every different screen size in android?

Then write different sizes for buttons in each dimen.xml

<dimen name="btn_width">50dp</dimen>

<dimen name="btn_width">30dp</dimen>

<dimen name="btn_width">20dp</dimen>

And then in your xml use

    android:layout_width="@dimen/btn_width"
    android:layout_height="@dimen/btn_width"