jetpack compose - Button with icon

Compose Button With Icon & Text

The Button is a primary widget of an android application, and for any software development SDK. Without a Button widget, we can’t build software or mobile application. The Button provides a click functionality. Android jetpack compose library provides a few built-in widgets to create many types of Buttons such as Button, TextButton, OutlinedButton, FloatingActionButton, IconButton, etc.

Different types of Button widgets allow us to render the different types of Button in the mobile user interface an example, IconButton can render an Icon inside IconButon with click action, and TextButton simply shows a Text object inside TextButton itself. OutlinedButton draws a border around the text button, etc. The Button widget shows a Text object with a background color and elevation.

But in some situations, android developers have to render a Button widget with both Text and an Icon. This android development tutorial will show you how we can show an Icon and a Text inside a Button widget in jetpack compose.

The following code put an Icon with Text inside a Button widget, a TextButton widget, and in an OutlinedButton widget. So, we here converted a Button, TextButton, and OutlinedButton widget to an Icon with Text Button. Button, TextButton, and OutlinedButton widget’s ‘content’ parameter/argument/property provides a RowScope, so in this Row scope, we can put multiple widgets which display inside Button using row layout. In this example code, we put an Icon object and Text object inside the Button content’s Row scope. So the specified Button widget renders an Icon and a Text inside its content placeholder.

Because we put the Icon before the Text object so the Button display’s an Icon first, and a Text next to Icon inside the Button. We can also put some padding between the Icon and Text object using the modifier, we also can change the color of the Icon widget. So, Practice the following code and see the screenshot to understand this tutorial more efficiently.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Share
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            Modifier
                .background(Color(0xFFEDEAE0))
                .fillMaxSize()
                .padding(48.dp),
            verticalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            Button(
                onClick = {
                    // do something here
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.CheckCircle,
                    contentDescription = "Localized description",
                    Modifier.padding(end = 8.dp)
                )
                Text(text = "Verify Me")
            }

            TextButton(
                onClick = {
                    // do something here
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.Share,
                    contentDescription = "Localized description",
                    modifier = Modifier.padding(end = 8.dp),
                    tint = Color(0xFFCC3333)
                )
                Text(text = "Share Me")
            }


            OutlinedButton(
                onClick = {
                    // do something here
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.LocationOn,
                    contentDescription = "Localized description",
                    modifier = Modifier.padding(end = 8.dp)
                )
                Text(text = "Share Location")
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}