androidxmlandroid-layoutandroid-linearlayouttic-tac-toe
Troubles positioning layouts to tic tac toe app - falling off screen
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>
Solution
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>