Troubles positioning layouts to tic tac toe app - falling off screen

Question

I am new to android development. I took a begginer course in Udacity last month. I'm having troubles with positioning my layouts properly cause there is always something which is not shown ot the screen and on diferent devices it is looking different altough im not using particular dimentions at all. For my tic-tac-toe game, I used buttons for the nine fields for crosses and circles. I've tried nearly everything with these layouts and I need your help cause I have to be ready with the project till 11th of July. Thank you. Here is the whole code because I think the problem can't be solved otherwise.

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:theme="@style/PurpleTheme"
    android:background="@drawable/background_1a"
    tools:context="com.example.android.tictactoe.MainActivity"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="7">

<LinearLayout
    android:id="@+id/general_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:orientation="vertical"
    android:weightSum="6">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="5dp"
        android:src="@drawable/logo_white"/>

    <!-- UP-->
    <LinearLayout
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:weightSum="3"
        android:orientation="vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/top_left_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/top_centre_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/top_right_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/middle_left_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/middle_centre_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/middle_right_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/bottom_left_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/bottom_centre_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/bottom_right_btn"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="1dp"
                android:enabled="true"
                android:textColor="#5d178f"
                android:textColorHighlight="#f1c918"
                android:textSize="64sp"
                android:layout_weight="1" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:weightSum="2"
        android:orientation="horizontal">

        <!-- Player X-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="1">

        <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:gravity="center_horizontal"
                android:id="@+id/nameOfPlayerX"
                android:paddingTop="0dp"
                android:textSize="22sp"
                android:fontFamily="sans-serif-light"
                android:textIsSelectable="false"
                android:hint="Player X"
                android:textColorHint="#FFFFFF"
                android:inputType="textFilter"
                android:maxLength="15"
                />
        <TextView
            android:id="@+id/player_x_score"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textSize="56sp"
            android:textColor="#FFFFFF"
            android:fontFamily="sans-serif-light"
            android:text="0" />

    </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray"
            android:layout_centerInParent="true"/>

        <!-- Player O-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:gravity="center_horizontal"
                android:textColor="#ffffff"
                android:id="@+id/nameOfPlayerO"
                android:paddingTop="0dp"
                android:textSize="22sp"
                android:hint="Player O"
                android:textColorHint="#FFFFFF"
                android:inputType="textFilter"
                android:maxLength="15"
                />
            <TextView
                android:id="@+id/player_o_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_marginBottom="0dp"
                android:layout_marginTop="0dp"
                android:textSize="56sp"
                android:textColor="#FFFFFF"
                android:fontFamily="sans-serif-light"
                android:text="0" />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>
    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:text="Reset Score"
        android:id="@+id/reset_btn"
        android:layout_gravity="center_horizontal"
        android:longClickable="true"
        android:onClick="reset"
        android:layout_alignParentBottom="true"
        />
    <!-- not sure about that longClicable -->
    <!--end of the bottom part for the players' names and score -->
</RelativeLayout>

Answer 1

Use different dimension xml for defining sizes and put it in values folder accordingly. see

values-sw720dp          10.1” tablet 1280x800 mdpi

values-sw600dp          7.0”  tablet 1024x600 mdpi

values-sw480dp          5.4”  480x854 mdpi 
values-sw480dp          5.1”  480x800 mdpi 

values-xhdpi            4.7”   1280x720 xhdpi 
values-xhdpi            4.65”  720x1280 xhdpi 

values-hdpi             4.0” 480x800 hdpi
values-hdpi             3.7” 480x854 hdpi

values-mdpi             3.2” 320x480 mdpi

values-ldpi             3.4” 240x432 ldpi
values-ldpi             3.3” 240x400 ldpi
values-ldpi             2.7” 240x320 ldpi

add dimens.xml for different value

for example

<!-- phones -->
    <dimen name="title_size">24sp</dimen>
    <dimen name="button_width">64dp</dimen>

 <!-- small tablets -->
    <dimen name="title_size">32sp</dimen>
    <dimen name="button_width">80dp</dimen>

<!-- big tablets -->
    <dimen name="title_size">48sp</dimen>
    <dimen name="button_width">128dp</dimen>

and last thing you can do is add scrollview as parent so you will sure that user at least scroll view if in some device it display your view partially

Hope this will help

Answer 2

If you want to distribute layouts evenly with weights then your parent has to be a LinearLayout, weights don't work with RelativeLayout. I've made necessary changes in your layout so that it would be spaced evenly. Please have a closer look on how the weights are distributed. Hope it helps. Also try out KDeogharkar's answer because that would be more efficient as nested weights are bad for performance.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:theme="@style/PurpleTheme"
    android:background="@drawable/background_1a"
    tools:context="com.example.android.tictactoe.MainActivity"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:id="@+id/general_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_weight="1"
        android:orientation="vertical"
        android:weightSum="6">

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:layout_gravity="center"
            android:src="@drawable/logo_white"/>

        <!-- UP-->
        <LinearLayout
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:weightSum="3"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_weight="1"
                android:weightSum="3">

                <Button
                    android:id="@+id/top_left_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/top_centre_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/top_right_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_weight="1"
                android:weightSum="3">

                <Button
                    android:id="@+id/middle_left_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/middle_centre_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/middle_right_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_weight="1"
                android:weightSum="3">

                <Button
                    android:id="@+id/bottom_left_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/bottom_centre_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/bottom_right_btn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="1dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:layout_marginTop="1dp"
                    android:enabled="true"
                    android:textColor="#5d178f"
                    android:textColorHighlight="#f1c918"
                    android:textSize="64sp"
                    android:layout_weight="1" />
            </LinearLayout>

        </LinearLayout>



    </LinearLayout>
    <LinearLayout
        android:id="@+id/players_scoreboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:weightSum="2"
        android:layout_above="@+id/reset_btn"
        android:orientation="horizontal">

        <!-- Player X-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:gravity="center_horizontal"
                android:id="@+id/nameOfPlayerX"
                android:paddingTop="0dp"
                android:textSize="22sp"
                android:fontFamily="sans-serif-light"
                android:textIsSelectable="false"
                android:hint="Player X"
                android:textColorHint="#FFFFFF"
                android:inputType="textFilter"
                android:maxLength="15"
                />
            <TextView
                android:id="@+id/player_x_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:textSize="56sp"
                android:textColor="#FFFFFF"
                android:fontFamily="sans-serif-light"
                android:text="0" />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray"
            android:layout_centerInParent="true"/>

        <!-- Player O-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:gravity="center_horizontal"
                android:textColor="#ffffff"
                android:id="@+id/nameOfPlayerO"
                android:paddingTop="0dp"
                android:textSize="22sp"
                android:hint="Player O"
                android:textColorHint="#FFFFFF"
                android:inputType="textFilter"
                android:maxLength="15"
                />
            <TextView
                android:id="@+id/player_o_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_marginBottom="0dp"
                android:layout_marginTop="0dp"
                android:textSize="56sp"
                android:textColor="#FFFFFF"
                android:fontFamily="sans-serif-light"
                android:text="0" />

        </LinearLayout>

    </LinearLayout>
    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:text="Reset Score"
        android:id="@+id/reset_btn"
        android:layout_gravity="center"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:longClickable="true"
        android:onClick="reset" />
    <!-- not sure about that longClicable -->
    <!--end of the bottom part for the players' names and score -->
</LinearLayout>