Jetpack Compose Ep:4 — Icon & Icon Toggle Button App

A short and sweet description about the Icon Button & the Icon Toggle Button with respect to their attributes.

If you want to learn some basics of Jetpack Compose then do visit to my previous article. The link is given below:

Jetpack Compose Ep:3 — Button App

Note: In this project, I’m using Android Studio 4.1 Canary 10 with a gradle plugin of classpath “com.android.tools.build:gradle:4.1.0-alpha10”. It may change accordingly with the time, so please do check the current version to avoid version related issues.

Before moving ahead, I’ll give a brief introduction about both the buttons which are being used in this project and they are as follows:

• Icon Button
• Icon Toggle Button

What is Icon Button?

IconButton is used to represent clickable actions along with an icon inside of it.

Features of Icon Button

• Used as navigation icon or action inside App Bar
• Touch dimension of 48dp x 48dp
• Located in center of the button

Note: The size of icon is 24dp x 24dp, if used as a custom.

What is Icon Toggle Button?

It is same as that of Icon Button. An IconToggleButton has a specific feature of its own and that is toggle ‘on’ or ‘off’.

Let’s begin by creating an interface file named as ComposableLayout. Define two functions containing all the parameters which are allowed by the IconButton & IconToggleButton Component himself.

The code for IconButton looks like:

interface ComposableLayout {

    @Composable
    fun IconButtonBuild(
        mModifier: Modifier? = null,
        mIconModifier: Modifier? = null,
        mIconAsset: VectorAsset? = null,
        mIconTint: Color? = null
    )
    
    //Code for IconToggleButton here...

}

The code for IconToggleButton looks like:

interface ComposableLayout {

    //Code for IconButton here...

    @Composable
    fun IconToggleButtonBuild(
        mChecked: Boolean? = null,
        mEnabled: Boolean? = null,
        mModifier: Modifier? = null,
        mIconModifier: Modifier? = null,
        mIconAsset: VectorAsset? = null,
        mIconTint: Color? = null
    )
}

Note: In Jetpack Compose, whenever we call a function which either it belongs to the same class, file or any other, it has to be annotated as Composable.

As the code mentioned above, each parameter checks for a value and if it is not been provided anything than it gets set as null by default.

1. mModifier — It is used to apply padding to the component itself by means all four corners individually.
2. mIconModifier — It is same as that of the above mModifier, but it is used to apply those attributes to the icon of the button.
3. mIconAsset — It is a type of Vector Asset(Vector Graphics) object. It generates a result by composing and renders an output of graphical value i.e. an icon or a vector graphic value.
4. mIconTint — It helps to provide color to the icon.
5. mChecked — It is used to identify whether the IconToggleButton is currently checked or not.
6. mEnabled — It sets the state of a component by holding a boolean value. By default the state is true(Enabled).

Now, create an object class file named as ComposableComponent and implement the interface(ComposableLayout) to it. Declare all the functions which was defined in the interface by calling the Button class and creating the Button component. Pass all the parameters to the view by specifying the default values to it.

The code for both the buttons looks like this:

object ComposableComponent : ComposableLayout {

    @Composable
    override fun IconButtonBuild(
        mModifier: Modifier?,
        mIconModifier: Modifier?,
        mIconAsset: VectorAsset?,
        mIconTint: Color?
    ) {
        IconButton(
            onClick = {

            },
            modifier = mModifier ?: Modifier.padding(0.dp),
            icon = {
                mIconAsset?.let {
                    Icon(
                        asset = it,
                        modifier = mIconModifier ?: Modifier.padding(0.dp),
                        tint = mIconTint ?: Color.Black
                    )
                }
            }
        )
    }

    @Composable
    override fun IconToggleButtonBuild(
        mChecked: Boolean?,
        mEnabled: Boolean?,
        mModifier: Modifier?,
        mIconModifier: Modifier?,
        mIconAsset: VectorAsset?,
        mIconTint: Color?
    ) {
        IconToggleButton(
            checked = mChecked ?: false,
            onCheckedChange = {

            },
            enabled = mEnabled ?: false,
            modifier = mModifier ?: Modifier.padding(0.dp),
            icon = {
                mIconAsset?.let {
                    Icon(
                        asset = it,
                        modifier = mIconModifier ?: Modifier.padding(0.dp),
                        tint = mIconTint ?: Color.Black
                    )
                }
            }
        )
    }
}

Note: The onClick parameter in the component is used to make the component clickable or else it will remained disabled by default.

Icon Button

Now, moving to the most important, that is to our MainActivity.kt file. Let’s create a function named as IconButtonComponent.

@Composable
fun IconButtonComponent() {
    ComposableComponent.IconButtonBuild(
        mModifier = Modifier.padding(16.dp),
        mIconModifier = Modifier.padding(16.dp),
        mIconAsset = Icons.Default.Add,
        mIconTint = Color.Green
    )
}

Icon Toggle Button

Similarly, create another function named as IconToggleButtonComponent in the same file(MainActivity.kt).

@Composable
fun IconToggleButtonComponent() {
    ComposableComponent.IconToggleButtonBuild(
        mChecked = false,
        mEnabled = true,
        mModifier = Modifier.padding(16.dp),
        mIconModifier = Modifier.padding(16.dp),
        mIconAsset = Icons.Default.Call,
        mIconTint = Color.Blue
    )
}

And finally, calling all the functions into the onCreate method with a wrapping column function to make them align vertically as well as horizontally and applying a modifier to fill the max size of the screen as shown below:

AppTheme {
    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalGravity = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        IconButtonComponent()
        IconToggleButtonComponent()
    }
}

Finally, run the app.

For the source code, visit to my github account given below:

Akshay-Sawant/Compose-Studio

If there is any issue, do let me know in the comment section. Happy coding!