Prototyping with Jetpack Compose

We set out to prototype a Jetpack Compose user interface for a real-world Android game: The New York Times Crossword. This is a fun challenge, because the game board is a complex view, chock full of stateful elements!

Join us to see how we got started, what we learned, and some sample code.

Transcript

1. Prototyping With Jetpack Compose Ben Oberkfell Droidcon NYC 2019
2. About Me • Android Engineer at the New York Times since 2017 • Having fun on the NYT Games Team • @benlikestocode
3. Caveat Emptor • There’s minimal documentation on Jetpack Compose • JavaDoc • Source • Other folks’ blogposts • Here’s my journey through trial and error • Stick around in this room for the next talk to hear more perspectives
4. My Journey into Compose
6. The Mini Crossword 5x5 grid Easy Solve Free to Play Fewer/no “special” puzzles
9. Black & White Squares @Composable fun DrawSquare(color: Color) { val paint = Paint() paint.color = color Draw { canvas, parentSize -> canvas.drawRect(parentSize.toRect(), paint) } } @Composable fun BlackSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.Black) } } @Composable fun WhiteSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.White) } }
10. Black & White Squares @Composable fun DrawSquare(color: Color) { val paint = Paint() paint.color = color Draw { canvas, parentSize -> canvas.drawRect(parentSize.toRect(), paint) } } @Composable fun BlackSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.Black) } } @Composable fun WhiteSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.White) } }
11. Black & White Squares @Composable fun DrawSquare(color: Color) { val paint = Paint() paint.color = color Draw { canvas, parentSize -> canvas.drawRect(parentSize.toRect(), paint) } } @Composable fun BlackSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.Black) } } @Composable fun WhiteSquare(dimension: Dp) { Container(width = dimension, height = dimension) { DrawSquare(Color.White) } }
12. Black & White Squares @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { BlackSquare(200.dp) } Row { WhiteSquare(200.dp) } } } }
13. Cursors
14. Cursors Cursor Active Clue Unselected
15. Cursors enum class CellBackground constructor(val color: Color) { NONE(Color.White), CURSOR(Color(red = 0xFF, green = 0xDA, blue = 0x00)), ACTIVE_CLUE(Color(red = 0xA7, green = 0xD8, blue = 0xFF)), BLACK_SQUARE(Color.Black) } enum class SelectionMode { NONE, CURSOR, ACTIVE_CLUE }
16. Cursors @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } Container(width = dimension, height = dimension) { DrawSquare(background.color) } }
17. Cursors @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } Container(width = dimension, height = dimension) { DrawSquare(background.color) } }
18. Cursors @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { BlackSquare(150.dp) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.CURSOR) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.ACTIVE_CLUE) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.NONE) } } } }
19. Cursors @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { BlackSquare(150.dp) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.CURSOR) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.ACTIVE_CLUE) } Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.NONE) } } } }
20. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
21. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
22. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
23. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
24. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
25. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
26. Scaled Text @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
27. Scaled Text @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.NONE, text = "A") } Row { WhiteSquare( 200.dp, selectionMode = SelectionMode.NONE, text = "B") } } } }
28. Adding a Number @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null, cellNumber: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) val numberSize = Sp(dimension.value * 0.15f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (cellNumber != null) { aligned(Alignment.TopLeft) { Padding(3.dp) { Text(cellNumber, style = TextStyle(fontSize = numberSize)) } } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
29. Adding a Number @Composable fun WhiteSquare(dimension: Dp, selectionMode: SelectionMode, text: String? = null, cellNumber: String? = null) { val background = when (selectionMode) { SelectionMode.NONE -> CellBackground.NONE SelectionMode.CURSOR -> CellBackground.CURSOR SelectionMode.ACTIVE_CLUE -> CellBackground.ACTIVE_CLUE } val textSize = Sp(dimension.value * 0.6f) val numberSize = Sp(dimension.value * 0.15f) Stack { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { DrawSquare(background.color) } } if (cellNumber != null) { aligned(Alignment.TopLeft) { Padding(3.dp) { Text(cellNumber, style = TextStyle(fontSize = numberSize)) } } } if (text != null) { aligned(Alignment.Center) { Text(text, style = TextStyle(fontSize = textSize)) } } } }
30. Adding a Number if (cellNumber != null) { aligned(Alignment.TopLeft) { Padding(3.dp) { Text(cellNumber, style = TextStyle(fontSize = numberSize)) } } }
31. Adding a Number @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.NONE, text = "A") } Row { WhiteSquare( 200.dp, selectionMode = SelectionMode.NONE, text = "B", cellNumber = "5") } } } }
32. BZZZT, wrong
33. BZZZT, wrong @Composable fun StrikeOut() { val paint = Paint() paint.color = Color.Red paint.strokeWidth = +withDensity { 5.dp.toPx().value } Draw { canvas, parentSize -> canvas.drawLine( Offset(parentSize.width.value, 0f), Offset(0f, parentSize.height.value), paint ) } }
36. withDensity paint.strokeWidth = +withDensity { 5.dp.toPx().value }
37. BZZZT, wrong if (strikeOut) { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { StrikeOut() } } } In our stack:
38. BZZZT, wrong @Composable fun SquareDemo() { Surface(color = Color.Gray) { Column { Row { WhiteSquare( 150.dp, selectionMode = SelectionMode.NONE, text = "A") } Row { WhiteSquare( 200.dp, selectionMode = SelectionMode.NONE, text = "B", cellNumber = "5", strikeOut = true) } } } }
39. Adapting to a Model enum class SquareType { BLACK, LETTER } @Model class Square private constructor( val squareType: SquareType, val answer: String? = null, val cellNumber: String? = null, var userAnswer: String? = null, var checked: Boolean = false, var selectionMode: SelectionMode = SelectionMode.NONE) { companion object { fun forLetter(answer: String, cellNumber: String? = null): Square { return Square( squareType = SquareType.LETTER, answer = answer, cellNumber = cellNumber, selectionMode = SelectionMode.NONE ) } fun forBlack() : Square { return Square(squareType = SquareType.BLACK) } } }
40. Adapting to a Model enum class SquareType { BLACK, LETTER } @Model class Square private constructor( val squareType: SquareType, val answer: String? = null, val cellNumber: String? = null, var userAnswer: String? = null, var checked: Boolean = false, var selectionMode: SelectionMode = SelectionMode.NONE) { companion object { fun forLetter(answer: String, cellNumber: String? = null): Square { return Square( squareType = SquareType.LETTER, answer = answer, cellNumber = cellNumber, selectionMode = SelectionMode.NONE ) } fun forBlack() : Square { return Square(squareType = SquareType.BLACK) } } }
41. Adapting to a Model enum class SquareType { BLACK, LETTER } @Model class Square private constructor( val squareType: SquareType, val answer: String? = null, val cellNumber: String? = null, var userAnswer: String? = null, var checked: Boolean = false, var selectionMode: SelectionMode = SelectionMode.NONE) { companion object { fun forLetter(answer: String, cellNumber: String? = null): Square { return Square( squareType = SquareType.LETTER, answer = answer, cellNumber = cellNumber, selectionMode = SelectionMode.NONE ) } fun forBlack() : Square { return Square(squareType = SquareType.BLACK) } } }
42. Model-Driven LetterSquare( dimension = 150.dp, square = Square.forLetter(answer = "A") )
43. Build a Puzzle @Model class Board(val edgeCount: Int, val squares: List<Square>) fun board() : Board { val squares = listOf( Square.forBlack(), Square.forLetter(answer = "S", cellNumber = "1"), Square.forLetter(answer = "P", cellNumber = "2"), Square.forLetter(answer = "I", cellNumber = "3"), Square.forLetter(answer = "T", cellNumber = "4"), // 20 more of these… ) return Board(squares = squares, edgeCount = 5) }
44. Render the Board @Composable fun GameTable(board: Board) { WithConstraints { constraints -> val containerWidth = +withDensity { constraints.maxWidth.toDp() } // Calculate width of a square val squareWidth = containerWidth/board.edgeCount Table(columnCount = board.edgeCount) { for (rowIndex in 0 until board.edgeCount) { tableRow { columnIndex -> val square = board.squares[(rowIndex * 5) + columnIndex] when(square.squareType) { SquareType.LETTER -> LetterSquare( dimension = squareWidth, model = square) SquareType.BLACK -> BlackSquare(dimension = squareWidth) } } } } } }
45. Constraints & Density @Composable fun GameTable(board: Board) { WithConstraints { constraints -> //constraints are in pixels val containerWidth = +withDensity { constraints.maxWidth.toDp() } // now we have it in dips! } }
46. Render the Board val squareWidth = containerWidth/board.edgeCount Table(columnCount = board.edgeCount) { for (rowIndex in 0 until board.edgeCount) { tableRow { columnIndex -> val square = board.squares[(rowIndex * 5) + columnIndex] when(square.squareType) { SquareType.LETTER -> LetterSquare( dimension = squareWidth, model = square) SquareType.BLACK -> BlackSquare(dimension = squareWidth) } } } }
47. Render the Board val squareWidth = containerWidth/board.edgeCount Table(columnCount = board.edgeCount) { for (rowIndex in 0 until board.edgeCount) { tableRow { columnIndex -> val square = board.squares[(rowIndex * 5) + columnIndex] when(square.squareType) { SquareType.LETTER -> LetterSquare( dimension = squareWidth, model = square) SquareType.BLACK -> BlackSquare(dimension = squareWidth) } } } }
48. Render the Board val squareWidth = containerWidth/board.edgeCount Table(columnCount = board.edgeCount) { for (rowIndex in 0 until board.edgeCount) { tableRow { columnIndex -> val square = board.squares[(rowIndex * 5) + columnIndex] when(square.squareType) { SquareType.LETTER -> LetterSquare( dimension = squareWidth, model = square) SquareType.BLACK -> BlackSquare(dimension = squareWidth) } } } }
49. Render the Board val squareWidth = containerWidth/board.edgeCount Table(columnCount = board.edgeCount) { for (rowIndex in 0 until board.edgeCount) { tableRow { columnIndex -> val square = board.squares[(rowIndex * 5) + columnIndex] when(square.squareType) { SquareType.LETTER -> LetterSquare( dimension = squareWidth, model = square) SquareType.BLACK -> BlackSquare(dimension = squareWidth) } } } }
50. Render the Board
51. Render the Board // Calculate width of a square, accounting for borders val containerWithoutBorders = containerWidth - Dp(board.edgeCount + 1.0f) val squareWidth = containerWithoutBorders/board.edgeCount val outerBorder = Border(color = Color.Black, width = 1.dp) val innerBorder = Border(color = Color.LightGray, width = 1.dp) Table(columnCount = board.edgeCount) { drawBorders(defaultBorder = outerBorder) { outer() (1 until rowCount).forEach { row -> horizontal(row, 0 until rowCount, border = innerBorder) } (1 until columnCount).forEach { col -> vertical( col, 0 until columnCount, border = innerBorder) } } // rest of table drawing
52. Render the Board // Calculate width of a square, accounting for borders val containerWithoutBorders = containerWidth - Dp(board.edgeCount + 1.0f) val squareWidth = containerWithoutBorders/board.edgeCount val outerBorder = Border(color = Color.Black, width = 1.dp) val innerBorder = Border(color = Color.LightGray, width = 1.dp) Table(columnCount = board.edgeCount) { drawBorders(defaultBorder = outerBorder) { outer() (1 until rowCount).forEach { row -> horizontal(row, 0 until rowCount, border = innerBorder) } (1 until columnCount).forEach { col -> vertical( col, 0 until columnCount, border = innerBorder) } } // rest of table drawing
53. Render the Board // Calculate width of a square, accounting for borders val containerWithoutBorders = containerWidth - Dp(board.edgeCount + 1.0f) val squareWidth = containerWithoutBorders/board.edgeCount val outerBorder = Border(color = Color.Black, width = 1.dp) val innerBorder = Border(color = Color.LightGray, width = 1.dp) Table(columnCount = board.edgeCount) { drawBorders(defaultBorder = outerBorder) { outer() (1 until rowCount).forEach { row -> horizontal(row, 0 until rowCount, border = innerBorder) } (1 until columnCount).forEach { col -> vertical( col, 0 until columnCount, border = innerBorder) } } // rest of table drawing
54. Render the Board // Calculate width of a square, accounting for borders val containerWithoutBorders = containerWidth - Dp(board.edgeCount + 1.0f) val squareWidth = containerWithoutBorders/board.edgeCount val outerBorder = Border(color = Color.Black, width = 1.dp) val innerBorder = Border(color = Color.LightGray, width = 1.dp) Table(columnCount = board.edgeCount) { drawBorders(defaultBorder = outerBorder) { outer() (1 until rowCount).forEach { row -> horizontal(row, 0 until rowCount, border = innerBorder) } (1 until columnCount).forEach { col -> vertical( col, 0 until columnCount, border = innerBorder) } } // rest of table drawing
55. Render the Board
56. Clues class Clue(val direction: Direction, val cells: List<Int>, val clueText: String) val clues = listOf( Clue(direction = Direction.ACROSS, cells = listOf(1, 2, 3, 4), clueText = "Card Game That Rewards Speed"), Clue(direction = Direction.ACROSS, cells = listOf(6, 7, 8, 9), clueText = "Low-carb, high-fat diet, familiarly"), Clue(direction = Direction.ACROSS, cells = listOf(10, 11, 12, 13, 14), clueText = "Hi-Falutin'"), Clue(direction = Direction.ACROSS, cells = listOf(15, 16, 17, 18), clueText = "Nevada Neighbor”), … )
57. Cursors and Clues class Board(val edgeCount: Int, val squares: List<Square>, val clues: List<Clue>) { private var selectedCellIndex: Int private var selectedDirection: Direction private var selectedClue: Clue fun selectSquare(square: Square) { // if clicking the cursor cell, flip // selected direction // set selection mode for cells in // selected clue // set selection mode for cursor cell } }
58. Wiring Up The Click Event Clickable(onClick = {onSquareClicked(model)}) { Stack { // … stack for the square elements } } In LetterSquare: fun onSquareClicked(square: Square) { theBoard.selectSquare(square) }
59. Filling the Board @Model class Board(val edgeCount: Int, val squares: List<Square>, val clues: List<Clue>) { //… fun enterLetter(letter: String) { squares[selectedCellIndex].userAnswer = letter.toUpperCase(Locale.US) advanceCursorToNextSquare() } //… } override fun onKeyDown(keyCode: Int, keyEvent: KeyEvent): Boolean { if (keyCode in 9..54) { // alphanumeric theBoard.enterLetter(keyEvent.unicodeChar.toChar().toString()) return true } return super.onKeyDown(keyCode, keyEvent) }
60. Filling the Board
61. Checking Your Work if (square.checked && square.answer != square.userAnswer) { aligned(Alignment.Center) { Container(width = dimension, height = dimension) { StrikeOut() } } }
62. Checking Your Work Button(text = "Check My Work", onClick = { board.check() }) @Model class Board(val edgeCount: Int, val squares: List<Square>, val clues: List<Clue>) { fun enterLetter(letter: String) { squares[selectedCellIndex].userAnswer = letter.toUpperCase(Locale.US) squares[selectedCellIndex].checked = false advanceCursorToNextSquare() } fun check() { squares.forEach { it.checked = true } } }
63. Checking Your Work
64. We Did It!
65. What’d We Build? • We built a Jetpack Compose UI around a data model that’s highly similar to the existing data model in the shipping Crossword app • Decomposed the Crossword UI into its most basic components and rebuilt from the “leaves” inward • Had some fun!
66. What Now? • Watch the Google I/O talk • The material-demos project in the Jetpack Compose source is extremely helpful • Follow from the demo to the platform and there’s some degree of useful Javadoc • Compose from First Principles blogpost • http://intelligiblebabble.com/compose-from-first-principles/
67. THANK YOU! P.S. We’re hiring; stop by our table and say hi.