We can use a 5×7 matrix to represent each character internally. Now we need to show numbers using the grid of boxes that we just created. Now let’s extract this matrix UI into a separate function to make it more manageable.Īnd let’s use the new composable inside the setContent body. Screenshot 1 : The 35 Box widgets in a 7×5 matrix arrangement. So I’m sticking with the Row and Column composables for now. Note: There’s a composable named LazyVerticalGrid to build grids like this, but that API is not stable yet. Illustration 1: The 35 Box composables in a 7×5 matrix For example, a Row composable is equivalent to the LinearLayout with horizontal orientation. Jetpack Compose comes with a predefined collection of composables like Row, Column, Box, Button, Text etc. This is equivalent to View in traditional XML-based system.
I’m going to use 35 Box composables arranged in a grid of 5 columns and 7 rows (Illustration 1):Ī “composable” is a function that will emit a UI. Also, we will show everything on the same screen.
To keep things simple, we won’t touch any of the theming/styles of the application we will just remove the Surface and place all our code there. The project initializes with a simple Greeting composable and a Surface composable.
In Android Studio, create a new project by selecting the “Empty Compose Activity” template. You need the latest version of Android Studio (Arctic Fox) to work on Compose projects.