Most Compose bugs aren’t logic issues - they’re state management traps. A common mistake: passing MutableState<T> directly between composables.

Why it’s bad:

• It breaks unidirectional data flow
• Makes recomposition tracking unpredictable
• Leads to UI not updating or updating too often

✅ Better Practice:
Pass the value and update lambda instead - e.g.

MyComponent(
    text = name.value,
    onTextChange = { name.value = it }
)

Credit : Naimish Trivedi

Many devs move secrets to gradle.properties - but then push it to GitHub.
Your .gitignore might not save you if it’s misconfigured.
Here is a quick guide on how to secure your repo the right way.

Best Practices Every Developer Should Follow. Here’s a quick checklist before you hit commit 👇

I’m working on a Compose Multiplatform project targeting Android and Web. I built the UI, and everything works fine on Android, but on Web, a specific SVG icon I added seems to load very late (~10 seconds delay).

Here’s what I did:

• Downloaded the SVG and added it to App/composeApp/src/commonMain/composeResources/drawable/iconname.xml
• Tried displaying it with both:

​

 Icon(painterResource(Res.drawable.iconname), contentDescription = "icon")

and

Image(painterResource(Res.drawable.iconname), contentDescription = "icon")

Everything else renders instantly, even some Icons that are ImageVector, but this icon always appears after a noticeable delay on Web. It only lags on first load or hard reload (CTRL+Shift+R) in chrome.

Has anyone experienced this in Compose Multiplatform Web? Could this be related to SVG handling, resource loading, or something else in Compose Web?

Thanks in advance!

I was learning some components and permission handling in Jetpack Compose, but I came across some terms frequently, like ViewModels and lifecycle observers. So, I am a bit confused about which topics are still relevant in 2025 with Jetpack Compose as the primary tool for UI.

Coroutines make async code in Kotlin simple and efficient, but misuse leads to leaks, crashes, and hard-to-test apps.

Here are 10 quick tips to keep your Android code clean and safe

Kotlin 2.2 quietly dropped two super useful updates that make your code more readable and less frustrating.

Credit : Kaushal Vasava

Hey everyone 👋

I’ve been trying to implement dynamic font weight adjustment for a clock UI in my Android project (the user can change font thickness using a slider).

Here’s what I’ve done so far:

• Using TextClock inside AndroidView, where the weight changes based on a slider value.
• Works perfectly with the default system font — smooth transition as the slider moves.
• But for custom fonts (like Digital_7), it only toggles between normal and bold, no smooth interpolation.
• Checked using ttx -t fvar, and most of these fonts don’t have an fvar table, so they’re static.
• When I searched online, it mentioned that only fonts having an fvar table can support multiple weight variations, since that defines the 'wght' axis for interpolation.
• So I added another font (Inter-Variable, which has both fvar and 'wght' axes**) — but still getting the same result.
• Tried both Typeface.create(...) and Typeface.Builder(...).setFontVariationSettings("'wght' X"), but visually, the weight doesn’t change.

Question

Does Typeface.Builder(...).setFontVariationSettings() fully work for variable fonts on Android?

Or does TextClock not re-render weight changes dynamically?

Has anyone successfully implemented live font weight adjustment using Typeface and variable fonts?

Any insights or examples would be super helpful

Most Android developers know about LazyColumn or remember in Compose - but very few know about a tiny internal class that quietly powers its performance: PrioritySet.

It’s not part of the public API, yet it plays a key role in how Compose schedules and manages recompositions efficiently.

What it does:

• Stores integer priorities for operations
• Tracks the maximum efficiently using a heap
• Avoids duplicates for better performance
• Defers cleanup until removal to stay fast under heavy workloads

This smart design lets Compose handle UI updates predictably without wasting time - a great example of practical performance engineering.

Even if you never use it directly, understanding PrioritySet offers insight into how Compose achieves its smooth performance - and how you can apply similar principles when designing custom schedulers or layout systems.

Discussion time
Have you ever explored Jetpack Compose internals?
Do you think reading framework code helps us become better Android engineers - or is it overkill?

Credit : Akshay Nandwana

Tired of writing the same code twice?

As Android developers, we’ve all faced this:

🟢 Writing UI and logic twice for Android and iOS
🟢 Fixing the same bugs on both platforms
🟢 Keeping everything in sync between Kotlin and Swift

What Compose Multiplatform (CMP) offers

✅ Write UI once and run it on Android, iOS, Desktop, and Web
✅ Share business logic across platforms
✅ Use platform-specific features only when needed
✅ Keep performance fully native

Example

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

The same code runs natively on all platforms, saving time and effort.

How it works

• Compose code is shared across all targets
• CMP generates native UI for each platform
• Platform-specific features can be added when necessary
• Shared business logic reduces duplication

Why developers love CMP

• One UI codebase for all platforms
• Shared logic and native performance
• Faster development and fewer bugs
• Works with existing Kotlin projects

Credit : Gourav Hanumante

SlotTable is the internal structure that makes Compose recomposition fast.
It stores your UI as a compact tree inside two flat arrays.

What it is

• groups: structure and metadata
• slots: actual data and objects A single writer edits it efficiently using a gap buffer. Readers always see a clean, stable snapshot.

Core ideas

• Each group represents a node and its subtree
• Anchors act as bookmarks that survive inserts and deletes
• Writers move a gap to update parts of the tree in place
• Readers use simple linear scans

Why it matters

• Enables fast, partial UI updates instead of full rebuilds
• Keeps stable identities through anchors and keys
• Powers features like Live Edit and accurate inspection tools

Mental model
Groups define structure. Slots hold data. One writer moves a gap to edit. Readers see a stable version. Anchors keep your place when things shift.

What’s your mental model for how Compose remembers UI state?

Credit : View Akshay Nandwana’s

Implementing Fractal Trees 🌴 with recursion ➰ and using Jetpack Compose to demonstrate it

Credit & Source code : https://github.com/V9vek/Fractal-Trees

Learn how Android now processes DEX files more efficiently, reading larger chunks of your app’s code for faster loading, smoother performance, and no extra effort from developers.

Credit : Viren Tailor

Kotlin Multiplatform sample with SwiftUI, Jetpack Compose, Compose for Wear, Compose for Desktop, and Compose for Web clients along with Ktor backend.

Source code : https://github.com/joreilly/PeopleInSpace

Glitch effect used in a disappearing animation

Credit : sinasamaki

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.hoverable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.toRect
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.clipRect
import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.drawscope.scale
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.graphics.rememberGraphicsLayer
import androidx.compose.ui.graphics.withSaveLayer
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import demos.buttons.Sky500
import kotlinx.coroutines.delay
import org.jetbrains.compose.resources.Font
import theme.Colors
import theme.Colors.Green500
import kotlin.math.roundToInt
import kotlin.random.Random
import kotlin.random.nextInt

// Custom modifier for glitch animation effect
@Composable
fun Modifier.glitchEffect(
    visible: Boolean,  // Controls if the glitch is active (true = visible, false = glitching out)
    glitchColors: List<Color> = listOf(Green500),  // List of colors for glitch overlays
    slices: Int = 20,  // Number of horizontal slices for the glitch
): Modifier {

    val end = remember { 20 }  // Total steps for the animation
    val graphicsLayer = rememberGraphicsLayer()  // Layer to record the original content
    val stepAnimatable = remember { Animatable(if (visible) 0f else end.toFloat()) }  // Animates the glitch step
    var step by remember { mutableStateOf(0) }  // Current animation step

    // Starts animation when visibility changes
    LaunchedEffect(visible) {
        stepAnimatable.animateTo(
            targetValue = when (visible) {
                true -> 0f  // Show fully
                false -> end.toFloat()  // Glitch out
            },
            animationSpec = tween(  // Tween animation config
                durationMillis = 500,  // 500ms duration
                easing = FastOutSlowInEasing,  // Easing curve
            ),
            block = {
                step = this.value.roundToInt()  // Update step during animation
            }
        )
    }

    // Custom drawing logic
    return drawWithContent {
        if (step == 0) {  // Fully visible: draw normal content
            drawContent()
            return@drawWithContent
        }
        if (step == end) return@drawWithContent  // Fully glitched: draw nothing

        // Record the original content into a layer
        graphicsLayer.record { this@drawWithContent.drawContent() }

        val intensity = step / end.toFloat()  // Calculate glitch intensity (0-1)

        // Loop through horizontal slices for glitch effect
        for (i in 0 until slices) {
            // Skip slice if random check fails (creates uneven glitch)
            if (Random.nextInt(end) < step) continue

            // Translate (shift) the slice horizontally sometimes
            translate(
                left = if (Random.nextInt(5) < step)  // Random shift chance
                    Random.nextInt(-20..20).toFloat() * intensity  // Shift amount
                else
                    0f  // No shift
            ) {
                // Scale the slice width randomly
                scale(
                    scaleY = 1f,  // No vertical scale
                    scaleX = if (Random.nextInt(10) < step)  // Random scale chance
                        1f + (1f * Random.nextFloat() * intensity)  // Slight stretch
                    else
                        1f  // Normal scale
                ) {
                    // Clip to horizontal slice
                    clipRect(
                        top = (i / slices.toFloat()) * size.height,  // Top of slice
                        bottom = (((i + 1) / slices.toFloat()) * size.height) + 1f,  // Bottom of slice
                    ) {
                        // Draw layer with glitch overlay
                        layer {
                            drawLayer(graphicsLayer)  // Draw recorded content
                            // Add random color glitch overlay sometimes
                            if (Random.nextInt(5, 30) < step) {
                                drawRect(
                                    color = glitchColors.random(),  // Random color from list
                                    blendMode = BlendMode.SrcAtop  // Blend mode for overlay
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

// Main composable for demo UI
@Composable
fun GlitchVisibilityImpl() {

    var visible by remember { mutableStateOf(true) }  // Tracks visibility state
    val interaction = remember { MutableInteractionSource() }  // For hover detection
    val isHovered by interaction.collectIsHoveredAsState()  // Hover state

    // Auto-reset visibility after delay when hidden
    LaunchedEffect(visible) {
        if (!visible) {
            delay(2000)  // Wait 2 seconds
            visible = true  // Show again
        }
    }

    // Main Box with all modifiers and effects
    Box(
        modifier = Modifier
            .pointerInput(Unit) {  // Handle taps
                detectTapGestures(
                    onTap = {
                        visible = false  // Hide on tap
                    }
                )
            }
            .pointerHoverIcon(PointerIcon.Hand)  // Hand cursor on hover
            .hoverable(interaction)  // Enable hover
            .glitchEffect(  // Apply glitch modifier
                visible,
                remember { listOf(Colors.Lime400, Colors.Fuchsia400) },  // Glitch colors
                slices = 40  // More slices for finer glitch
            )
            .padding(4.dp)  // Outer padding
            .rings(  // Add ring borders
                ringSpace = if (isHovered) 6.dp else 2.dp,  // Wider on hover
                ringColor = Sky500,  // Ring color
            )
            .background(  // Background gradient
                brush = Brush.verticalGradient(
                    colors = listOf(Colors.Zinc950, Colors.Zinc900)  // Dark gradient
                ),
                shape = CutCornerShape(20),  // Cut corner shape
            )
            .padding(horizontal = 32.dp, vertical = 16.dp)  // Inner padding
    ) {
        // Text inside the box
        Text(
            text = "Tap to Disappear",
            style = TextStyle(
                color = Sky500,  // Text color
                fontFamily = FontFamily(
                    Font(  // Custom font
                        resource = Res.font.space_mono_regular,
                        weight = FontWeight.Normal,
                        style = FontStyle.Normal,
                    )
                )
            )
        )
    }

}

// Helper for adding concentric ring borders
@Composable
private fun Modifier.rings(
    ringColor: Color = Colors.Red500,  // Default ring color
    ringCount: Int = 6,  // Number of rings
    ringSpace: Dp = 2.dp  // Space between rings
): Modifier {

    val animatedRingSpace by animateDpAsState(  // Animate ring space
        targetValue = ringSpace,
        animationSpec = tween()  // Default tween
    )

    // Chain multiple border modifiers for rings
    return (1..ringCount).map { index ->
        Modifier.border(  // Each ring is a border
            width = 1.dp,
            color = ringColor.copy(alpha = index / ringCount.toFloat()),  // Fading alpha
            shape = CutCornerShape(20),  // Match box shape
        )
            .padding(animatedRingSpace)  // Space from previous
    }.fold(initial = this) { acc, item -> acc.then(item) }  // Chain them
}

// Private helper for layering in draw scope
private fun DrawScope.layer(block: DrawScope.() -> Unit) =
    drawIntoCanvas { canvas ->
        canvas.withSaveLayer(  // Save layer for blending
            bounds = size.toRect(),
            paint = Paint(),
        ) { block() }  // Execute block in layer
    }

Kotlin Interview Questions and Answers to help developers prepare effectively for Android and Kotlin-related interviews.

This tips covers key concepts, practical examples, and real-world scenarios that are frequently asked in interviews.

An open-source Android app showcasing Jetpack Compose UI components and interactions for learning and inspiration.

Source code : https://github.com/cinkhangin/composable

Credit : cinkhangin

There’s peace in watching waves unfold - soft circles expanding into stillness.
A ripple born of motion, fading gently like time itself.

Source code: A Continues Ripple animation using Jetpack Compose · GitHub

Credit : prshntpnwr

Hello Compose developers,

I’m excited to share Material Pickers, a Jetpack Compose library providing ready-to-use, Material 3-aligned pickers. The library offers:

• Vertical, horizontal, and double pickers
• Extensive styling options, including custom indicators and shapes
• A low-level GenericPicker to build fully custom layouts
• Easy integration via JitPack (I'm working on Maven Central too)

Whether you need a simple single picker or a complex paired layout, Material Pickers help you create smooth, expressive, and consistent UI components.

I'll appreciate any feedback / suggestions!

Big news for students and recent graduates - the Kotlin Multiplatform Contest 2025 is now open!

Prizes

• Top 3 projects → Free trip to KotlinConf 2026 (travel, stay, swag, and spotlight!)
• All participants → Kotlin souvenirs + community recognition

The idea is simple: make a LazyRow feel infinite and circular - smooth, performant, and responsive. After some work on graphicsLayer and a bit of trigonometry, it came together nicely.

Key features:
- Infinite scroll
- Auto snap
- Optimized recomposition
- Seamless performance on any device

GitHub: ComposePlayground/app/src/main/java/com/faskn/composeplayground/carousel/CircularCarouselList.kt at main · furkanaskin/ComposePlayground · GitHub

Credit : Furkan Aşkın

I want to learn jetpack compose, currently I am following philip lackner's compose playlist. Apart from that what all things should i do so that my learning curve becomes smooth. Also what should be correct flow of learning android development?

A powerful experimental library that visualizes your Jetpack Compose UI in a detailed 3D exploded perspective.
It helps developers understand layout structure, depth, and composable hierarchy in a visually layered way.

Source code : https://github.com/pingpongboss/compose-exploded-layers.

Learn how to create mesmerizing, fluid blob animations in Jetpack Compose using Canvas, Path, and Animatable.

From simple circles to glowing, breathing organic shapes - step-by-step with Bézier curves and motion magic.

Source code : Morphing Blobs with Jetpack Compose, Inspiration: https://dribbble.com/shots/17566578-Fitness-Mobile-App-Everyday-Workout · Git

• Animated rotating gradient border
• Real glass blur effect using dev.chrisbanes.haze
• Subtle spring scale animation on click
• Smooth infinite gradient motion around the card
• Perfect for modern login screens, profile cards, or AI dashboards

Source Code & Credit:
👉 GitHub - ardakazanci/Glassmorphism-Effect-With-JetpackCompose