Text composable in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Text composable code?

Consider this Kotlin Compose code snippet:

Text(text = "Hello, Compose!", color = Color.Red, fontSize = 20.sp)

What will the user see on the screen?

Android Kotlin

Text(text = "Hello, Compose!", color = Color.Red, fontSize = 20.sp)

A No text will be displayed because color must be set with a hex string.

B The text "Hello, Compose!" displayed in default black color with font size 20sp.

C The text "Hello, Compose!" displayed in red color with default font size.

D The text "Hello, Compose!" displayed in red color with font size 20sp.

💡 Hint

Remember that the color parameter controls text color and fontSize controls size.

The Text composable shows the string with the specified color and font size. Color.Red sets the text color to red, and 20.sp sets the font size to 20 scale-independent pixels.

📝 Syntax

intermediate

Which option will cause a syntax error in this Text composable usage?

Look at these Text composable calls. Which one will cause a syntax error?

A Text(text = "Welcome", fontWeight = FontWeight.Bold, color = Color.Blue)

B Text(text = "Welcome", fontWeight = Bold)

C Text(text = "Welcome", fontWeight = FontWeight.Bold)

D Text(text = "Welcome")

💡 Hint

Check if all parameters are properly referenced with their full names.

FontWeight.Bold is an enum value and must be fully qualified. Using just Bold without FontWeight causes a syntax error because Bold is undefined.

❓ lifecycle

advanced

What happens if you update the text parameter of a Text composable dynamically?

Suppose you have a state variable holding a string and you pass it to Text composable's text parameter. What happens when you update that state?

Android Kotlin

var message by remember { mutableStateOf("Hello") }
Text(text = message)
// Later message = "Hi"

A The Text composable automatically re-renders to show the updated message.

B The Text composable will not update until the app is restarted.

C The Text composable shows both old and new messages simultaneously.

D The Text composable throws a runtime error when the state changes.

💡 Hint

Think about how Compose handles state and recomposition.

Compose tracks state changes and automatically recomposes UI elements that depend on that state, so the Text composable updates to show the new string.

❓ navigation

advanced

How to make a Text composable clickable to navigate to another screen?

You want to make a Text composable that when tapped navigates to a new screen. Which approach is correct?

A Use Text(text = "Click me", navigate = "destination") to specify navigation.

B Set Text's onClick parameter to navController.navigate("destination").

C Wrap Text in a Clickable modifier and call navController.navigate("destination") inside onClick.

D Text composable cannot be clickable; use Button instead.

💡 Hint

Modifiers can add click behavior to composables.

Text composable itself has no onClick parameter, but you can add click behavior by applying Modifier.clickable and inside onClick call navigation functions.

🔧 Debug

expert

Why does this Text composable not show the expected color?

Given this code:

Text(text = "Hello", color = Color(255, 0, 0))

The text appears black instead of red. Why?

Android Kotlin

Text(text = "Hello", color = Color(255, 0, 0))

A Color constructor expects values from 0f to 1f floats, not 0-255 integers.

B Color constructor is deprecated and ignored by Text composable.

C Text composable only accepts predefined colors like Color.Red.

D The color parameter must be a hex string, not a Color object.

💡 Hint

Check the expected parameter types for Color constructor in Compose.

In Compose, Color constructor takes float values between 0f and 1f for red, green, blue channels. Using integers 255 causes unexpected color (black).