Text, Image and Button In Jetpack Compose

Introduction

Hi friends!! In this article, we will explore the core components of Jetpack Compose. Text, Image, and Button are very common components to use in building a screen. Text represents a label, an Image is used to show an image on the UI, and a Button performs some action when the user clicks the button.

Text

Text is a composable function that allows us to display Text on the screen. The basic syntax of the Text is as follows.

Text(
    text = "Your text here",
    style = TextStyle(/* Define text style properties here */)
)

Example

@Composable
fun TextExample() {
    Text(
        text = "Hello, Jetpack Compose!",
        style = TextStyle(
            color = Color.Red,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold
        )
    )
}

In this example, we use the Text to display simple Text on the screen. We can customize the text appearance by using properties like fontSize, color, fontWeight, textAlign, etc.

Image

Image is a composable function that allows us to display an image on the screen. The basic syntax of the Image composable is as follows.

Image(
    painter = painterResource(R.drawable.your_image_resource),
    contentDescription = "Description for accessibility",
    contentScale = ContentScale.Fit,
    modifier = Modifier.size(width, height)
)

Here's what each parameter means:

painter: The painter resource that represents the image you want to display. You can use painterResource or painter to provide the image.
contentDescription: A description of the image used for accessibility purposes, such as for screen readers to describe the image to users with visual impairments.
contentScale: Specifies how the image should be scaled to fit into the composable. It can be Fill, Fit, Inside, Crop, etc.
modifier: Modifier to specify the size and other layout properties of the Image composable.

Example

@Composable
fun ImageFromResourceExample() {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "A beautiful image",
        modifier = Modifier.size(200.dp)
    )
}

In this example, we use the Image composable to display an image from a local resource.

Button

The button is a composable function that creates a clickable button UI element. The basic syntax of the Button composable is as follows.

Button(
    onClick = { /* Handle button click here */ },
    modifier = Modifier
) {
    Text(text = "Button Text")
}

Example

@Composable
fun ButtonExample() {
    Button(
      onClick = { /* Handle button click here */ },
      modifier = Modifier,
      colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
      content = {
           Text(
              text = "Click Me",
              color = Color.White,
              fontWeight = FontWeight.Bold
            )
          }
       )
}

In this example, we use the Button composable to create a basic button. We can customize the button appearance using the colors, content parameters, and other styling attributes. The onClick is used to handle the click event and execute the desired functionality.

Full Code Snippet

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.textandimageandbuttonexample.ui.theme.TextAndImageAndButtonExampleTheme

class TextAndImageAndButtonActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TextAndImageAndButtonExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        // For Vertical Spacing
                        Spacer(modifier = Modifier.height(20.dp))
                        TextExample()
                        // For Vertical Spacing
                        Spacer(modifier = Modifier.height(20.dp))
                        ImageFromResourceExample()
                        // For Vertical Spacing
                        Spacer(modifier = Modifier.height(20.dp))
                        ButtonExample()
                    }

                }
            }
        }

    }

    @Composable
    fun TextExample() {
        Text(
            text = "Hello, Jetpack Compose!",
            style = TextStyle(
                color = Color.Red,
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold
            )
        )
    }

    @Composable
    fun ImageFromResourceExample() {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "A beautiful image",
            modifier = Modifier.size(200.dp)
        )
    }

    @Composable
    fun ButtonExample() {
        Button(
            onClick = { /* Handle button click here */ },
            modifier = Modifier,
            colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
            content = {
                Text(
                    text = "Click Me",
                    color = Color.White,
                    fontWeight = FontWeight.Bold
                )
            }
        )
    }

}

Output

Conclusion

In this article, we have seen how to use Text, Images, and Buttons in Jetpack Compose. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!