Keep UI Out of Shared Code
Draw the line so the shared layer stays portable.
Keep UI Out of Shared Code is a free Kotlin Multiplatform Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Kotlin Multiplatform Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Draw a Clear Line
Shared code holds logic; the UI stays native. Drawing this line early keeps your common module portable to every target.
Why UI Does Not Belong
Android views and SwiftUI are platform-specific. Putting them in commonMain would break compilation on the other target instantly.
Logic Is the Reusable Part
Calculations, rules and models are what truly repeat across apps. That logic is the high-value code worth sharing once.
Return Data, Not Widgets
Shared functions should hand back plain data, like a total or a label string, never a button or a view.
fun cartLabel(total: Double): String = "Total due: " + totalNo Toasts or Alerts
Showing a message is a UI job. Shared code returns the text to show; each app decides how to display it.
No Colors or Styling
Hex colors and fonts are presentation. Keep styling in each platform's UI so designers can tune apps independently.
Expose State to the UI
Shared code can publish state the UI watches. The apps render it however they like, but never the other way around.
data class CartState(val total: Double, val itemCount: Int)The Dependency Direction
UI depends on shared code, never the reverse. This one-way arrow is what keeps the common module clean and reusable.
Compose MP Is the Exception
Compose Multiplatform can share UI too, but it is opt-in. Your core logic module still stays UI-free and lightweight.
A Quick Smell Test
If a shared file imports a platform UI package, that is a smell. Move that code out into the right app module.
The Payoff
A UI-free shared layer compiles everywhere and adds new targets with ease. Discipline here is what makes KMP pay off. 🚀
Quick Check
What should a shared function return instead of a UI widget?
Recap: Logic Shared, UI Native
You kept widgets, colors and alerts out of common code and let it expose only data the native UIs render. ✅
Frequently asked questions
Is the “Keep UI Out of Shared Code” lesson free?
Yes — the full text of “Keep UI Out of Shared Code” is free to read here on the web, and the Kotlin Multiplatform Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Kotlin Multiplatform Academy course, upgrade to CoddyKit PRO.
What will I learn in “Keep UI Out of Shared Code”?
Draw the line so the shared layer stays portable. You practise Kotlin Multiplatform Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Kotlin Multiplatform Academy?
No prior experience is required. Kotlin Multiplatform Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Keep UI Out of Shared Code” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Kotlin Multiplatform Academy lesson?
Yes. Every Kotlin Multiplatform Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- A Shared Price & Tax Calculator
- Format Currency & Numbers
- Business Rules as Pure Functions
- Keep UI Out of Shared Code