Modern Android UI with Jetpack Compose: Q&A and Code for Text, Image, Column & Card

Jetpack Compose has revolutionized Android UI development with a modern, declarative approach. Whether you’re preparing for interviews, brushing up on fundamentals, or building real-world apps, mastering components like Text, Image, Column, and Card is essential.

In this article, you’ll find 40+ questions and answers, structured by experience level — Beginner, Intermediate, and Advanced. Each section gives you the theory and the how-to for practical usage.

Let’s dive in.

Beginner Level – Laying the Foundation

If you're just starting out with Jetpack Compose, these questions will help you get comfortable with how to build basic layouts using Text, Image, Column, and Card.

---

Text

Text is the most basic composable — used to display string content with styling, color, and alignment.

1. Q: How do you display a simple text in Jetpack Compose?
   A: Use Text("Hello World").

2. Q: How do you change the font size of text?
   A: Use fontSize = 20.sp.

3. Q: How do you make the text bold?
   A: Use fontWeight = FontWeight.Bold.

4. Q: How do you center-align text?
   A: Use textAlign = TextAlign.Center.

5. Q: How do you change the color of the text?
   A: Use color = Color.Red.

6. Q: How do you underline text?
   A: Use TextStyle(textDecoration = TextDecoration.Underline).

7. Q: Can the Text composable show emojis?
   A: Yes, Compose supports emojis like Text("🚀 Compose!").

8. Q: How do you add padding to text?
   A: Use Modifier.padding(...).

9. Q: Can text span multiple lines by default?
   A: Yes, it wraps content automatically.

10. Q: What import is needed for the Text composable?
    A: import androidx.compose.material3.Text

---

 Image

Images in Compose are drawn using the Image composable and can be styled or loaded dynamically.

1. Q: How do you display a local image in Jetpack Compose?
   A: Use Image(painter = painterResource(id = R.drawable.image), contentDescription = null).

2. Q: How do you resize an image?
   A: Use Modifier.size(100.dp).

3. Q: How do you make an image circular?
   A: Use Modifier.clip(CircleShape).

4. Q: What is contentDescription used for?
   A: For accessibility support (screen readers).

5. Q: How do you scale image content?
   A: Use contentScale = ContentScale.Crop.

6. Q: Can you display an internet image with the default Image composable?
   A: No, use libraries like Coil (AsyncImage).

7. Q: How do you tint an image?
   A: Use colorFilter = ColorFilter.tint(Color.Blue).

8. Q: How do you align an image inside a Column?
   A: Use Modifier.align(Alignment.CenterHorizontally).

9. Q: How do you add a border to an image?
   A: Use Modifier.border(...).

10. Q: What does painterResource do?
    A: It loads drawable resources into a Painter.

 Column

Column is a vertical layout that allows you to stack composables on top of each other.

1. Q: What is a Column in Compose?
   A: A layout that stacks elements vertically.

2. Q: How do you space items inside a Column?
   A: Use verticalArrangement = Arrangement.spacedBy(...).

3. Q: How do you center elements in a Column?
   A: Use horizontalAlignment = Alignment.CenterHorizontally.

4. Q: How do you make a Column scrollable?
   A: Use Modifier.verticalScroll(rememberScrollState()).

5. Q: How do you make a Column clickable?
   A: Use Modifier.clickable { ... }.

6. Q: How do you add padding to a Column?
   A: Use Modifier.padding(...).

7. Q: Can Columns be nested?
   A: Yes.

8. Q: What is the default alignment in Column?
   A: Top and start aligned.

9. Q: How do you align children to the end?
   A: Use horizontalAlignment = Alignment.End.

10. Q: What import is needed for Column?
    A: import androidx.compose.foundation.layout.Column

---

 Card

Cards are used for containing grouped elements like text and images, usually with padding, elevation, and background color.

1. Q: How do you create a card in Compose?
   A: Card { Text("Inside a Card") }

2. Q: How do you round the corners of a card?
   A: Use shape = RoundedCornerShape(...).

3. Q: How do you add elevation to a card?
   A: Use elevation = CardDefaults.cardElevation(...).

4. Q: How do you set a background color in a card?
   A: Use colors = CardDefaults.cardColors(...).

5. Q: How do you make a card clickable?
   A: Add Modifier.clickable { ... }.

6. Q: Can a card hold both text and images?
   A: Yes.

7. Q: How do you add padding inside a card?
   A: Use Modifier.padding(...) inside the content.

8. Q: Can cards be nested?
   A: Yes.

9. Q: How do you make a card fill the screen width?
   A: Use Modifier.fillMaxWidth().

10. Q: What import is needed for Card?
    A: import androidx.compose.material3.Card

---

Advanced Level – Expert Mastery 

This final section is designed for developers preparing for senior-level Android interviews or aiming to build complex Compose UIs. You’ll tackle use cases involving animations, gestures, scroll optimizations, dynamic shapes, and more.

---

Image (Advanced)

1. Q: How do you create a crossfade transition between images?
   A: Use Coil’s AsyncImage() with contentScale = ContentScale.Crop and fadeIn = true.

2. Q: How do you crop an image to a dynamic custom shape?
   A: Use Modifier.clip(CustomShape) where CustomShape implements the Shape interface.

3. Q: How do you apply a custom shadow or elevation effect to an image?
   A: Use Modifier.shadow(...) or drawBehind to add custom drop shadows.

4. Q: How do you apply a color matrix or shader effect to an image?
   A: Use graphicsLayer and RenderEffect.createColorFilterEffect(...) (Android 12+).

5. Q: How do you gracefully handle image loading errors from the network?
   A: Use Coil’s error = painterResource(...) and show fallback UI via conditionals.

6. Q: How do you blur an image in Jetpack Compose?
   A: Use Modifier.blur(radius) (requires Android 12+ or Compose 1.3+).

7. Q: How do you preload a set of images for future use?
   A: Use Coil’s ImageLoader.enqueue(request) in a coroutine.

8. Q: How do you animate scale or opacity of an image on user interaction?
   A: Use Modifier.pointerInput { ... } and control animation with Animatable or animateFloatAsState.

9. Q: How do you tint part of an image selectively?
   A: Use a custom Painter or overlay a shape with partial alpha on top.

10. Q: How do you provide theme-aware image resources (light vs dark mode)?
    A: Use isSystemInDarkTheme() and conditionally load different images.

---

 Column (Advanced)

1. Q: How do you build a LazyColumn from dynamic API data?
   A: Collect the data into a State (e.g., from ViewModel) and pass it into LazyColumn { items(dataList) { ... } }.

2. Q: How do you animate item reordering in a LazyColumn?
   A: Apply Modifier.animateItemPlacement() to each item and update the backing list with reorder logic.

3. Q: How do you preserve and restore scroll position across navigation or rotation?
   A: Use rememberSaveable { LazyListState() } and restore it when navigating back.

4. Q: How do you implement drag-and-drop reordering in a column?
   A: Use a library like Accompanist Reorderable or create a custom pointerInput-based solution.

5. Q: How do you add sticky headers and dynamic content in a LazyColumn?
   A: Use stickyHeader { ... } and items(...) blocks for flexible layouts.

6. Q: How do you combine static and dynamic elements in one LazyColumn?
   A: Use item { StaticUI() } followed by items(data) { ... }.

7. Q: How do you detect scroll direction in a performant way?
   A: Use LazyListState and track the firstVisibleItemIndex and firstVisibleItemScrollOffset.

8. Q: How do you group items under section headers in a LazyColumn?
   A: Use a data model with group headers, then use itemsIndexed and if conditions to insert headers.

9. Q: How do you compose deeply nested item views without performance issues?
   A: Use key in items() and memoize heavy components.

10. Q: How do you disable scrolling in a LazyColumn conditionally?
    A: Avoid attaching a scroll state or use userScrollEnabled = false.

---

 Card (Advanced)

1. Q: How do you create a swipeable Tinder-style card?
   A: Use Modifier.pointerInput(...) to track drag gestures and animate translation using Animatable.

2. Q: How do you handle state restoration inside a card (e.g., toggle states)?
   A: Use rememberSaveable and manage state at the card level.

3. Q: How do you dynamically animate a card's shape on interaction?
   A: Change the shape using state and animate with animateDpAsState() or animateShapeAsState().

4. Q: How do you embed advanced layouts like ConstraintLayout inside a Card?
   A: Simply place ConstraintLayout { ... } inside the Card’s content block.

5. Q: How do you animate a card's size during expansion or collapse?
   A: Use Modifier.animateContentSize() for automatic layout transitions.

6. Q: How do you track when a card becomes visible on screen in a list?
   A: Use LazyListState.layoutInfo.visibleItemsInfo and check if the card's index is present.

7. Q: How do you debounce rapid taps on a card?
   A: Use a CoroutineScope with delay logic or debounce extensions.

8. Q: How do you group cards into a paginated view?
   A: Use HorizontalPager() from the Accompanist library.

9. Q: How do you apply a vertical gradient background to a Card?
   A: Use Modifier.background(Brush.verticalGradient(...)).

10. Q: How do you test card content and behavior using Jetpack Compose testing APIs?
    A: Use Modifier.testTag("card") and assert with composeTestRule.onNodeWithTag(...).assertExists().

---

 Jetpack Compose Interview Q&A with Code Examples

---

Beginner Level

---

Text

Q: How do you display styled text in Jetpack Compose?

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

---

Image

Q: How do you display a circular local image?

@Composable
fun CircularImage() {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "App Icon",
        modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
    )
}

---

Column

Q: How do you arrange multiple Text elements vertically?

@Composable
fun ColumnExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Item One")
        Text("Item Two")
        Text("Item Three")
    }
}

---

Card

Q: How do you create a simple Card with some text?

@Composable
fun SimpleCard() {
    Card(
        modifier = Modifier.padding(16.dp),
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        Text("This is inside a Card", modifier = Modifier.padding(16.dp))
    }
}

---

Intermediate Level

---

Text

Q: How do you make part of a text clickable?

@Composable
fun ClickableTextExample() {
    val annotatedString = buildAnnotatedString {
        append("Visit ")
        pushStringAnnotation(tag = "URL", annotation = "https://developer.android.com")
        withStyle(SpanStyle(color = Color.Blue, textDecoration = TextDecoration.Underline)) {
            append("Android Docs")
        }
        pop()
    }

    ClickableText(
        text = annotatedString,
        onClick = { offset ->
            annotatedString.getStringAnnotations("URL", offset, offset).firstOrNull()?.let {
                println("Clicked URL: ${it.item}")
            }
        }
    )
}

---

Image

Q: How do you load an image from a URL using Coil?

@Composable
fun NetworkImage() {
    AsyncImage(
        model = "https://picsum.photos/300",
        contentDescription = "Random Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(200.dp)
            .clip(RoundedCornerShape(16.dp))
    )
}

---

Column

Q: How do you build a scrollable list using LazyColumn?

@Composable
fun LazyColumnExample() {
    val items = List(20) { "Item #$it" }
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(items) { item ->
            Text(item, modifier = Modifier.padding(8.dp))
        }
    }
}

---

Card

Q: How do you create an expandable Card?

@Composable
fun ExpandableCard() {
    var expanded by remember { mutableStateOf(false) }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable { expanded = !expanded },
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Click to ${if (expanded) "Collapse" else "Expand"}")
            AnimatedVisibility(visible = expanded) {
                Text("This is extra content shown when expanded.")
            }
        }
    }
}

---

Advanced Level

---

Text

Q: How do you animate text size when clicked?

@Composable
fun AnimatedTextSize() {
    var large by remember { mutableStateOf(false) }
    val size by animateDpAsState(targetValue = if (large) 32.dp else 16.dp)

    Text(
        text = "Tap me!",
        fontSize = size.value.sp,
        modifier = Modifier
            .clickable { large = !large }
            .padding(16.dp)
    )
}

---

Image

Q: How do you animate image swipe like a Tinder card?

@Composable
fun SwipeableImageCard() {
    val offsetX = remember { Animatable(0f) }

    Box(
        Modifier
            .fillMaxWidth()
            .height(200.dp)
            .pointerInput(Unit) {
                detectHorizontalDragGestures { _, dragAmount ->
                    launch { offsetX.snapTo(offsetX.value + dragAmount) }
                }
            }
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = null,
            modifier = Modifier
                .offset { IntOffset(offsetX.value.toInt(), 0) }
                .fillMaxSize()
        )
    }
}

---

Column

Q: How do you add sticky headers in a list with LazyColumn?

@Composable
fun StickyHeaderList() {
    val sections = mapOf(
        "Fruits" to listOf("Apple", "Banana"),
        "Vegetables" to listOf("Carrot", "Lettuce")
    )

    LazyColumn {
        sections.forEach { (header, items) ->
            stickyHeader {
                Text(
                    text = header,
                    modifier = Modifier
                        .background(Color.LightGray)
                        .padding(8.dp)
                )
            }
            items(items) {
                Text(text = it, modifier = Modifier.padding(8.dp))
            }
        }
    }
}

---

Card

Q: How do you animate a card’s content size when toggled?

@Composable
fun AnimatedCardContent() {
    var expanded by remember { mutableStateOf(false) }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable { expanded = !expanded }
            .animateContentSize(),
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Tap to ${if (expanded) "Collapse" else "Expand"}")
            if (expanded) {
                Text("This is the expanded content.")
            }
        }
    }
}

---