• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Issues while replicating hard coded activity, programmatically in onCreate()

  • Thread starter CrashHasCrashed
  • Start date
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
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. :)
 

BEST TECH IN 2023

We've been tracking upcoming products and ranking the best tech since 2007. Thanks for trusting our opinion: we get rewarded through affiliate links that earn us a commission and we invite you to learn more about us.

Smartphones