Text composable in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a simple text "Hello World" using Text composable.

Android Kotlin

Text(text = [1])

Drag options to blanks, or click blank then click option'

A"Hello World"

BHello World

CText("Hello World")

Dtext = "Hello World"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing the whole Text() call inside the text parameter

The Text composable requires a string passed to the text parameter. Use quotes to define the string.

2fill in blank

medium

Complete the code to set the font size of the Text composable to 24.sp.

Android Kotlin

Text(text = "Welcome", fontSize = [1])

Drag options to blanks, or click blank then click option'

A"24.sp"

B24

Csp(24)

D24.sp

Attempts:

3 left

💡 Hint

Common Mistakes

Passing fontSize as a plain number without .sp

Passing fontSize as a string

In Jetpack Compose, fontSize expects a TextUnit, so use 24.sp to specify 24 scale-independent pixels.

3fill in blank

hard

Fix the error in the code to correctly display bold text using Text composable.

Android Kotlin

Text(text = "Bold Text", fontWeight = [1])

Drag options to blanks, or click blank then click option'

AFontWeight.Bold

B"Bold"

Cbold

DFontWeight.bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'bold' instead of FontWeight.Bold

Passing a string instead of FontWeight.Bold

FontWeight.Bold is the correct enum value to make text bold in Compose. It is case sensitive.

4fill in blank

hard

Fill both blanks to create a Text composable with italic style and blue color.

Android Kotlin

Text(text = "Styled Text", fontStyle = [1], color = [2])

Drag options to blanks, or click blank then click option'

AFontStyle.Italic

BColor.Red

CColor.Blue

DFontStyle.Bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using FontStyle.Bold instead of FontStyle.Italic

Using Color.Red instead of Color.Blue

FontStyle.Italic makes the text italic. Color.Blue sets the text color to blue.

5fill in blank

hard

Fill all three blanks to create a Text composable with underlined decoration, font size 18.sp, and green color.

Android Kotlin

Text(text = "Decorated", textDecoration = [1], fontSize = [2], color = [3])

Drag options to blanks, or click blank then click option'

ATextDecoration.Underline

B18.sp

CColor.Green

DTextDecoration.LineThrough

Attempts:

3 left

💡 Hint

Common Mistakes

Using TextDecoration.LineThrough instead of Underline

Forgetting .sp on font size

Using wrong color constant

TextDecoration.Underline adds underline. 18.sp sets font size. Color.Green colors the text green.

Practice

1. What is the main purpose of the Text composable in Jetpack Compose?

easy

A. To display text on the screen

B. To create buttons

C. To handle user input

D. To manage app navigation

Solution

1. Step 1: Understand the role of Text composable

   The Text composable is designed to show words or sentences visibly on the app screen.

2. Step 2: Compare with other UI elements

   Buttons handle clicks, input fields take user input, and navigation manages screen changes, so these are not the Text composable's job.

3. Final Answer:

   To display text on the screen -> Option A

4. Quick Check:

   Text composable = display text [OK]

Hint: Text composable always shows text content [OK]

Common Mistakes:

• Confusing Text with Button composable
• Thinking Text handles user input
• Assuming Text manages navigation

2. Which of the following is the correct syntax to display the text "Hello World" using the Text composable?

easy

A. Text: "Hello World"

B. Text(content = "Hello World")

C. Text("Hello World")

D. Text { "Hello World" }

Solution

1. Step 1: Recall Text composable syntax

   The Text composable accepts the text content as the first positional parameter.

2. Step 2: Check each option

   A uses invalid colon syntax. B correctly uses positional argument Text("Hello World"). C uses invalid content parameter. D uses lambda syntax which is incorrect for Text.

3. Final Answer:

   Text("Hello World") -> Option C

4. Quick Check:

   Text("string") = positional first arg [OK]

Hint: Use Text("your text") for simple display [OK]

Common Mistakes:

• Using content= parameter name
• Using colon instead of parentheses
• Trying to pass text inside braces

3. What will be displayed on the screen when this code runs?

Text(text = "Welcome", fontSize = 24.sp, color = Color.Red)

medium

A. The word "Welcome" in default color and size

B. The word "Welcome" in red color with font size 24 sp

C. An error because fontSize is not a valid parameter

D. The word "Welcome" in blue color with font size 24 sp

Solution

1. Step 1: Understand parameters used

   The fontSize parameter sets the text size, and color sets the text color. Both are valid for Text composable.

2. Step 2: Analyze the values

   Font size is 24.sp (scaled pixels), color is Color.Red, so text appears red and sized 24 sp.

3. Final Answer:

   The word "Welcome" in red color with font size 24 sp -> Option B

4. Quick Check:

   fontSize and color change text appearance [OK]

Hint: fontSize and color change text look visibly [OK]

Common Mistakes:

• Assuming default color is applied ignoring color param
• Thinking fontSize is invalid
• Confusing color values

4. Identify the error in this Text composable code:

Text(text = Hello World)

medium

A. fontSize parameter is required

B. Incorrect parameter name, should be content instead of text

C. Text composable cannot display multiple words

D. Missing quotes around the string "Hello World"

Solution

1. Step 1: Check string syntax

   In Kotlin, string literals must be enclosed in double quotes. Here, "Hello World" is missing quotes.

2. Step 2: Validate parameter name and requirements

   The parameter name text is correct. Text composable can display multiple words. fontSize is optional.

3. Final Answer:

   Missing quotes around the string "Hello World" -> Option D

4. Quick Check:

   Strings need quotes in Kotlin [OK]

Hint: Always put text strings inside double quotes [OK]

Common Mistakes:

• Forgetting quotes around text
• Using wrong parameter names
• Thinking fontSize is mandatory

5. You want to display a greeting message that changes color based on a Boolean variable isMorning. Which code correctly uses the Text composable to show "Good Morning" in green if isMorning is true, otherwise "Good Evening" in blue?

hard

A. Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue)

B. Text(text = "Good Morning" or "Good Evening", color = Color.Green or Color.Blue)

C. Text(text = "Good Morning" && "Good Evening", color = Color.Green && Color.Blue)

D. Text(text = isMorning ? "Good Morning" : "Good Evening", color = isMorning ? Color.Green : Color.Blue)

Solution

1. Step 1: Understand Kotlin conditional expressions

   Kotlin uses if (condition) value1 else value2 for inline conditions, not the ternary operator.

2. Step 2: Analyze each option

   Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue) correctly uses Kotlin's if-else expressions for both text and color. Text(text = "Good Morning" or "Good Evening", color = Color.Green or Color.Blue) uses invalid syntax with 'or'. Text(text = "Good Morning" && "Good Evening", color = Color.Green && Color.Blue) uses '&&' which is logical AND, not for choosing values. Text(text = isMorning ? "Good Morning" : "Good Evening", color = isMorning ? Color.Green : Color.Blue) uses ternary operator syntax which Kotlin does not support.

3. Final Answer:

   Text(text = if (isMorning) "Good Morning" else "Good Evening", color = if (isMorning) Color.Green else Color.Blue) -> Option A

4. Quick Check:

   Kotlin uses if-else, not ?: for inline conditions [OK]

Hint: Use Kotlin if-else, not ?:, for inline conditions [OK]

Common Mistakes:

• Using ?: ternary operator syntax
• Using logical operators instead of conditions
• Trying to combine strings or colors with 'or' or '&&'