How do I make cross line in tic tac toe

Question

I made a simple tic tac toe game in Kotlin android studio and I'm Trying to make a line after a won game. for example if X won all three of X will be crossed with line X̶X̶X̶. My representation of that is Indigent, but I think you got the point.

Progress so far:

made two arrays which hold info about each player:

    var Player1 = ArrayList<Int>()
    var Player2 = ArrayList<Int>()
    var ActivePlayer = 1
    var setPlayer = 1

gave id to buttons:

fun buttonClick(view: View) {
        val buSelected:Button = view as Button
        var cellId = 0
        when(buSelected.id) {
            R.id.button1 -> cellId = 1
            R.id.button2 -> cellId = 2
            R.id.button3 -> cellId = 3

            R.id.button4 -> cellId = 4
            R.id.button5 -> cellId = 5
            R.id.button6 -> cellId = 6

            R.id.button7 -> cellId = 7
            R.id.button8 -> cellId = 8
            R.id.button9 -> cellId = 9
        }
        PlayGame(cellId,buSelected)

    }

and this is how I check winner:

fun CheckWinner()
    {
        var winner = -1

        //row1
        if (Player1.contains(1) && Player1.contains(2) && Player1.contains(3))
        {
            winner = 1
        }
        if (Player2.contains(1) && Player2.contains(2) && Player2.contains(3))
        {
            winner = 2
        }

There is more code to it but its too much to add into this post.

Answer 1

User Interface I recommend create your own custom view instead of using Buttons. You can for example create FrameLayout and put inside TextView and then either show/hide some simple View with line or draw this line with the help of Canvas. That custom view will be 1 of 9 squares. Then just put them in some grid (manually or using RecyclerView or GridView).

Logic Create two lists that will contain X and O for each player. Lists of ints with square positions will be enough. Fill those lists with positions (from 1 to 9) when one of two users select a square and before add new item (position) to list, check if this item isn't already in the list (this player, player1) and isn't in the other list (other player, player2). If both of two lists don't contain this item - add it. Then, after adding a new position to list, check if it forms a line. For example, 1, 3, 9 or 2, 5, 7. If so, that player won and you can cross those positions.

Code could look like this:

enum Player {
    player1,
    player2
}

List<int> player1List = List();
List<int> player2List = List();    

void addNewPosition(Player player, int position) {
    List<int> currentPlayerList;
    List<int> otherPlayerList;
    switch(player) {
        case Player.player1:
            currentPlayerList = player1List;
            otherPlayerList = player2List;
        break;
        case Player.player2:
            currentPlayerList = player2List;
            otherPlayerList = player1List;
        break;
    }
    
    if (currentPlayerList.contains(position)) {
        // this player already selected this position, do nothing
        return;
    }

    if (otherPlayerList.contains(position)) {
        // another player already selected this position, do nothing
        return;
    }

    currentPlayerList.add(position); // add selected position to current player list
    
    // now check if current players position forms a line
    if (currentPlayerList.contains(1) && currentPlayerList.contains(2) && currentPlayerList.contains(3)) {
        // this player won
    }
    ... check other possible solutions that could result in a win. Better to follow some pattern instead of checking each of them

}