Composable functions in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Composable function?

Consider this Kotlin Compose code snippet. What will be displayed on the screen?

Android Kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting() {
  Text(text = "Hello Compose")
}

A A runtime error due to missing setContent call

B A blank screen with no text

C A text label showing 'Hello Compose' on the screen

D A button labeled 'Hello Compose'

💡 Hint

Look at what the Text composable does inside the Greeting function.

The Greeting composable calls Text with the string 'Hello Compose', so the UI will show that text label.

❓ lifecycle

intermediate

When is a Composable function recomposed?

Given a Composable function with a state parameter, when does Compose re-run the function to update the UI?

A When the state parameter value changes

B Only once when the app starts

C Every time the user clicks anywhere on the screen

D Never, Composables run only once

💡 Hint

Think about what triggers UI updates in Compose.

Compose re-executes Composable functions when the state they depend on changes, to update the UI accordingly.

📝 Syntax

advanced

Which option correctly defines a Composable function with a parameter?

Select the correct Kotlin Compose function syntax that takes a String parameter and displays it.

A fun @Composable ShowMessage(message: String) { Text(message) }

B @Composable fun ShowMessage(message: String) { Text(text = message) }

C @Composable fun ShowMessage(message) { Text(text = message) }

D @Composable fun ShowMessage(message: String) { Text(message = message) }

💡 Hint

Remember the correct placement of the @Composable annotation and parameter types.

Option B correctly places @Composable before the function, declares the parameter type, and calls Text with text = message.

🔧 Debug

advanced

What error occurs with this Composable code?

Analyze this code snippet and identify the error it causes.

Android Kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun MyText() {
  Text("Hello")
}

A Compilation error: Missing @Composable annotation

B Runtime error: NullPointerException

C No error, displays 'Hello' text

D Compilation error: No value passed for parameter 'text'

💡 Hint

Check the Text composable parameter requirements.

Text requires a named parameter 'text'. Passing a string without naming causes a compilation error.

🧠 Conceptual

expert

What is the main benefit of using Composable functions in Android development?

Choose the best explanation for why Composable functions are used in modern Android UI development.

A They allow building UI declaratively and automatically update UI on state changes

B They replace all XML layouts with imperative code only

C They guarantee zero memory usage during UI rendering

D They force UI updates only when the app restarts

💡 Hint

Think about how Compose handles UI and state.

Composable functions let you describe UI declaratively and Compose handles efficient UI updates when state changes.

Practice

1. What is the main purpose of a @Composable function in Android Kotlin?

easy

A. To manage database operations

B. To handle network requests

C. To define app navigation routes

D. To build and display UI components

Solution

1. Step 1: Understand the role of @Composable

   The @Composable annotation marks functions that create UI elements in Jetpack Compose.

2. Step 2: Identify the correct purpose

   These functions are used to build and display UI components, not for networking or database tasks.

3. Final Answer:

   To build and display UI components -> Option D

4. Quick Check:

   @Composable = UI builder [OK]

Hint: Remember: @Composable means UI code [OK]

Common Mistakes:

• Thinking @Composable handles logic like networking
• Confusing @Composable with lifecycle methods
• Assuming it manages navigation or data storage

2. Which of the following is the correct way to declare a composable function in Kotlin?

easy

A. @Composable fun MyComponent() { /* UI code */ }

B. fun MyComponent() { /* UI code */ }

C. @Composable MyComponent() { /* UI code */ }

D. fun @Composable MyComponent() { /* UI code */ }

Solution

1. Step 1: Recall the syntax for composable functions

   Composable functions must be annotated with @Composable before the function keyword.

2. Step 2: Check each option

   @Composable fun MyComponent() { /* UI code */ } correctly places @Composable before fun. The other options either lack the annotation entirely or place it incorrectly (after fun or without fun).

3. Final Answer:

   @Composable fun MyComponent() { /* UI code */ } -> Option A

4. Quick Check:

   Annotation before fun = correct syntax [OK]

Hint: Always put @Composable before fun [OK]

Common Mistakes:

• Omitting the @Composable annotation
• Placing @Composable after the function name
• Using incorrect syntax like missing fun

3. What will be displayed when this composable function is called?

  @Composable
  fun Greeting() {
    Text(text = "Hello, Compose!")
  }

medium

A. A text label showing 'Hello, Compose!'

B. A compile-time error due to missing imports

C. An empty screen with no text

D. A button labeled 'Hello, Compose!'

Solution

1. Step 1: Understand the Text composable

   The Text composable displays a text label on the screen with the given string.

2. Step 2: Analyze the function output

   The function shows the text "Hello, Compose!" as a label, not a button or empty screen.

3. Final Answer:

   A text label showing 'Hello, Compose!' -> Option A

4. Quick Check:

   Text shows text label [OK]

Hint: Text composable always displays text on screen [OK]

Common Mistakes:

• Confusing Text with Button composable
• Assuming missing imports cause runtime error
• Expecting no output from a valid composable

4. Identify the error in this composable function:

  @Composable
  fun Welcome() {
    Text(text = Hello World)
  }

medium

A. Missing @Composable annotation

B. Missing quotes around the string in Text

C. Function name should be lowercase

D. Text composable cannot be used inside functions

Solution

1. Step 1: Check the Text parameter

   The string passed to Text must be in quotes. Here, "Hello World" is missing quotes.

2. Step 2: Verify other parts

   The function has the @Composable annotation, function name casing is allowed, and Text is valid inside composables.

3. Final Answer:

   Missing quotes around the string in Text -> Option B

4. Quick Check:

   Strings need quotes in Kotlin [OK]

Hint: Strings must be in quotes inside Text composable [OK]

Common Mistakes:

• Forgetting quotes around string literals
• Thinking function names must be lowercase
• Assuming @Composable is missing when it is present

5. How can you create a reusable composable that shows a greeting with a dynamic name?
Choose the correct function declaration:

  ?

hard

A. @Composable fun Greeting() {
Text(text = "Hello, name!")
}

B. fun Greeting(name: String) {
Text(text = "Hello, ${name}!")
}

C. @Composable fun Greeting(name: String) {
Text(text = "Hello, ${name}!")
}

D. @Composable fun Greeting(name) {
Text(text = "Hello, ${name}!")
}

Solution

1. Step 1: Check for @Composable annotation and parameter

   The function must be annotated with @Composable and accept a String parameter for the name.

2. Step 2: Verify string interpolation and parameter syntax

   @Composable fun Greeting(name: String) { Text(text = "Hello, ${name}!") } correctly uses @Composable, declares name: String, and interpolates it inside the text. The version without @Composable misses the annotation, the one without a parameter hardcodes the name, and the one missing the parameter type is invalid.

3. Final Answer:

   @Composable fun Greeting(name: String) { Text(text = "Hello, ${name}!") } -> Option C

4. Quick Check:

   Composable + typed parameter + string interpolation = correct [OK]

Hint: Composable needs annotation and typed parameters [OK]

Common Mistakes:

• Omitting @Composable annotation
• Not declaring parameter type
• Hardcoding text instead of using parameter