Jetpack Compose Note Application Basic 4

Hello everyone. Back to the basic note-taking series using Jetpack Compose. We finished the Note compose in the previous video, which can be reused many times. In this post, I have added a new composable to the design to expand the application further. That’s the composable colour picker.

So now, you’ll start working on a colour picker composable, like the one shown below:

The colour picker allows the user to code their notes by assigning specific colours to them. The user can open the colour picker by clicking on the colour palette icon in the app bar or by pulling from the bottom edge of the screen.

Creating the ColorItem

The colour picker allows the user to code their notes by assigning specific colours to them. Users can open the colour picker by clicking Image in Note Composable.

To make the colour picker composable. We will create a ColorPicker.kt in composable. Add the following code:

@Composable
fun ColorItem(
    color: ColorModel,
    onColorSelect: (ColorModel) -> Unit
) {
    Column(
        modifier = Modifier
            .padding(10.dp)
            .clickable(
             = {
                onColorSelect(color)
            }
        ),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        NoteColor(color = Color.hexToColor(color.hex), size = 80.dp, border = 2.dp)
 
        Text(text = color.name, style = MaterialTheme.typography.h5)
    }
}

In the design, two components work together to make the ColorItem composable: NoteColor and Text. I added Arrangement.Center and Alignment.CenterHorizontally. So that they can be centred in Column

You have yet to use one new modifier: Modifier.clickable() in Column. With that modifier, you made the whole ColorItem clickable. As mentioned before, it’s a good practice to expose click events to parent composables.

To accomplish that, you passed the onColorSelect(color) call for the . onColorSelect is of type Unit, which is known as a function type. This specific function type says that the function that will be passed to it should take ColorModel as an argument.

To execute it, you used the default call operator: onColorSelect(color), using the function name. When the user clicks on a note, the function passed for the onColorSelect parameter will execute.

Previewing the ColorItem

Finally, add the following preview function to the bottom of SaveNoteScreen.kt so you can preview your ColorItem:

@Preview
@Composable
fun ColorItemPreview() {
    ColorItem(color = ColorModel.DEFAULT, onColorSelect = {})
}

You just invoked Color with the default colour defined in ColorModel.kt. For onColorSelect, you passed an empty lambda since you don’t need it for the preview to work. Thanks to Kotlin, you can pass the second argument as a trailing lambda.

Now, build the project. In the preview panel, you’ll see this:

Wrapping up the ColorPicker composable

With ColorItem in place, it’s a piece of cake to build ColorPicker(). Add the following code of SaveNoteScreen.kt, just above ColorItem:

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun ColorPicker(
    colors: List<ColorModel>,
    onColorSelect: (ColorModel) -> Unit
) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Color Picker",
            modifier = Modifier.padding(10.dp),
            style = MaterialTheme.typography.h6)
 
        LazyVerticalGrid(cells = GridCells.Fixed(3), modifier = Modifier.fillMaxWidth() ) {
            items(colors.size) { itemIndex ->
                val color = colors[itemIndex]
                ColorItem(color = color, onColorSelect = onColorSelect)
            }
        }
 
    }
}

To create the ColorPicker in the code above, you used a Column to align its title and list of colours. So that they can appear as designed. We use LazyVerticalGrid to wrap them.

ColorPicker has two parameters: It takes the list of ColorModels, and like the ColorItem, it exposes the click event parameter.

To visualize what you’ve built so far, add the preview composable of SaveNoteScreen.kt:

@Preview
@Composable
fun ColorPickerPreview() {
    ColorPicker(colors = listOf(
        ColorModel.DEFAULT,
        ColorModel.DEFAULT,
        ColorModel.DEFAULT,
        ColorModel.DEFAULT,
        ColorModel.DEFAULT,
        ColorModel.DEFAULT), onColorSelect = {})
}

Here, you invoked ColorPicker() and passed it a list of default colours. For onColorSelect, you passed an empty lambda since you’re not interested in interacting with the composable at this stage.

Build the project and check the preview panel to see this:

Well done! See you at the next lesson.