C
CrashHasCrashed
Guest
Good morning.
I am trying to create a simple Tic Tac Toe grid, however I am facing issues with correctly filling up the space with the child views.
Originally I hard coded the activity where I have a GridLayout (a custom one to make it square) and it contained 9 ImageViews which filled up the whole Grid perfectly. I do not have the original code of this, but I quickly replicated it below.
activity_test.xml
Image of what the result of this activity is.
Now I tried to recreate this programmatically, because I want to vary the size of the board. I tried to set the above exact variables in code as well, but for some reason only the top rows are shown.
Within the OnCreateView of the fragment, I create a GridLayout and all the required Squares (extended ImageView). The code does work, but it has some flaws.Currently only the top row of squares are shown, but they take up the whole screen. If I remove the row/column weight and set an actual height and width for each square, then they do show up. The latter is already a step better, but preferably I do not want to calculate the size of each square. Especially since the hardcoded activity works just fine with automatically taking up the whole grid.
tictactoeboard.class
The fragment where the GridLayout and Squares are added to:
fragment_tic_tac_toe_board.xml
I must have missed something while converting the hardcoded activity to the onCreateView code.
If anyone can point me in the right direction, that would be greatly appreciated.
I am trying to create a simple Tic Tac Toe grid, however I am facing issues with correctly filling up the space with the child views.
Originally I hard coded the activity where I have a GridLayout (a custom one to make it square) and it contained 9 ImageViews which filled up the whole Grid perfectly. I do not have the original code of this, but I quickly replicated it below.
activity_test.xml
Code:
<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"
tools:context=".test">
<com.example.tictactoebot.Activities.SquareGridLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/black">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="0"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="0"
android:layout_column="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="0"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="1"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="1"
android:layout_column="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="1"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="2"
android:layout_column="0"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="2"
android:layout_column="1"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
android:layout_row="2"
android:layout_column="2"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="10dp"/>
</com.example.tictactoebot.Activities.SquareGridLayout>
Image of what the result of this activity is.
Now I tried to recreate this programmatically, because I want to vary the size of the board. I tried to set the above exact variables in code as well, but for some reason only the top rows are shown.
Within the OnCreateView of the fragment, I create a GridLayout and all the required Squares (extended ImageView). The code does work, but it has some flaws.Currently only the top row of squares are shown, but they take up the whole screen. If I remove the row/column weight and set an actual height and width for each square, then they do show up. The latter is already a step better, but preferably I do not want to calculate the size of each square. Especially since the hardcoded activity works just fine with automatically taking up the whole grid.
tictactoeboard.class
Java:
private Square[][] board;
private static int boardSize = 3;
private SquareGridLayout grid;
private int squareMargin = 5;
public TicTacToeBoard() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_tic_tac_toe_board, container, false);
FrameLayout frame = view.findViewById(R.id.tic_tac_toe_board);
frame.setBackgroundColor(getResources().getColor(R.color.colorAccent));
grid = new SquareGridLayout(getContext());
grid.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
0
));
grid.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
grid.setRowCount(boardSize);
grid.setColumnCount(boardSize);
frame.addView(grid);
Square square;
board = new Square[boardSize][boardSize];
for(int x=0; x<boardSize; x++){
for(int y=0; y<boardSize; y++){
square = new Square(getContext());
//Square definition
square.setBackgroundColor(getResources().getColor(R.color.white));
square.setEnabled(true);
square.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
humanClickedButton((Square)v);
}
});
//Grid location
GridLayout.LayoutParams gridParams = new GridLayout.LayoutParams();
gridParams.height = 0;
gridParams.width = 0;
gridParams.topMargin = squareMargin;
gridParams.bottomMargin = squareMargin;
gridParams.leftMargin = squareMargin;
gridParams.rightMargin = squareMargin;
if(x == 0){
gridParams.topMargin = 0;
}
else if(x == boardSize-1){
gridParams.bottomMargin = 0;
}
if (y == 0) {
gridParams.leftMargin = 0;
}
else if(y == boardSize-1){
gridParams.rightMargin = 0;
}
gridParams.rowSpec = GridLayout.spec(x, 1f);//Setting weight to 1
gridParams.columnSpec = GridLayout.spec(y, 1f);//Setting weight to 1
square.setLayoutParams(gridParams);
//Store copy locally
board[x][y] = square;
grid.addView(square, (x*3+y));
}
}
return view;
}
The fragment where the GridLayout and Squares are added to:
fragment_tic_tac_toe_board.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activities.Fragments.TicTacToeBoard"
android:layout_margin="20dp"
android:layout_gravity="center_vertical"
android:id="@+id/tic_tac_toe_board">
</FrameLayout>
I must have missed something while converting the hardcoded activity to the onCreateView code.
If anyone can point me in the right direction, that would be greatly appreciated.