Clean Architecture layers in Android Kotlin - UI Render Trace

Component - Clean Architecture layers

This UI component visually represents the Clean Architecture layers in an Android Kotlin app. It shows how the app is divided into separate layers: Presentation, Domain, and Data. Each layer has a clear role, helping keep the app organized and easy to maintain.

Widget Tree

Column
├─ Container (Presentation Layer)
│  ├─ Text ("Presentation Layer")
│  └─ Text ("UI and ViewModels")
├─ Container (Domain Layer)
│  ├─ Text ("Domain Layer")
│  └─ Text ("Business Logic and Use Cases")
└─ Container (Data Layer)
   ├─ Text ("Data Layer")
   └─ Text ("Repositories and Data Sources")

The main layout is a vertical Column with three Containers stacked. Each Container represents one Clean Architecture layer with two Text widgets: a title and a short description. This visually separates the layers from top (Presentation) to bottom (Data).

Render Trace - 4 Steps

Step 1: Column

Step 2: Container (Presentation Layer)

Step 3: Container (Domain Layer)

Step 4: Container (Data Layer)

State Change - Re-render

Trigger:User taps on a layer container to highlight it

Before

All layer containers have normal background colors

→

After

Tapped container background changes to a darker shade to show selection

Re-renders:Only the tapped Container widget re-renders to update background color

UI Quiz - 3 Questions

Which layer contains the UI and ViewModels?

A Presentation Layer

B Domain Layer

C Data Layer

D Network Layer

Key Insight

Using separate layers in Clean Architecture helps keep code organized. Each layer has a clear job, so developers can work on UI, business rules, or data independently. This separation makes apps easier to test and maintain.

Practice

1. Which layer in Clean Architecture is responsible for business rules and logic?
domain, data, or presentation?

easy

A. Presentation layer

B. Domain layer

C. Data layer

D. UI layer

Solution

1. Step 1: Understand the role of each layer

   The domain layer contains business rules and logic, independent of UI or data sources.

2. Step 2: Match the layer to its responsibility

   Since business logic is in the domain layer, it is the correct answer.

3. Final Answer:

   Domain layer -> Option B

4. Quick Check:

   Business logic = Domain layer [OK]

Hint: Business rules live in domain layer, not UI or data [OK]

Common Mistakes:

• Confusing data layer with domain layer
• Thinking UI handles business logic
• Mixing presentation with domain

2. Which Kotlin syntax correctly defines a repository interface in the domain layer?

?

easy

A. interface UserRepository { fun getUser(id: Int): User }

B. class UserRepository { fun getUser(id: Int): User }

C. fun UserRepository() = User()

D. val UserRepository = object { fun getUser() = User() }

Solution

1. Step 1: Identify interface syntax in Kotlin

   Interfaces use the keyword interface followed by function signatures without bodies.

2. Step 2: Check each option

   interface UserRepository { fun getUser(id: Int): User } correctly declares an interface with a function signature. Others define classes or objects incorrectly for an interface.

3. Final Answer:

   interface UserRepository { fun getUser(id: Int): User } -> Option A

4. Quick Check:

   Kotlin interface syntax = interface UserRepository { fun getUser(id: Int): User } [OK]

Hint: Interfaces use 'interface' keyword with function signatures [OK]

Common Mistakes:

• Using class instead of interface for repository
• Defining function bodies inside interface
• Using val or fun incorrectly for interface

3. Given this code snippet in the data layer:

class UserRepositoryImpl(private val api: UserApi) : UserRepository {
  override fun getUser(id: Int): User {
    return api.fetchUser(id)
  }
}

What does getUser(5) return?

medium

A. Null because fetchUser returns nothing

B. An error because UserRepositoryImpl lacks a constructor

C. A User object fetched from the API with id 5

D. A compile-time syntax error

Solution

1. Step 1: Understand class and method behavior

   UserRepositoryImpl implements UserRepository and calls api.fetchUser(id) to get a User.

2. Step 2: Analyze getUser(5) call

   Calling getUser(5) returns the User object fetched by api.fetchUser(5), assuming api works correctly.

3. Final Answer:

   A User object fetched from the API with id 5 -> Option C

4. Quick Check:

   Method calls API and returns User [OK]

Hint: Implementation calls API method and returns result [OK]

Common Mistakes:

• Assuming missing constructor causes error
• Thinking fetchUser returns null by default
• Confusing syntax errors with runtime behavior

4. Identify the error in this presentation layer code snippet:

class UserViewModel(private val repo: UserRepository) {
  fun loadUser(id: Int) {
    val user = repo.getUser(id)
    println(user.name)
  }
}

medium

A. UserViewModel should not call repository directly

B. User object might be null causing a crash

C. No error; code is correct

D. UserRepository interface is not implemented

Solution

1. Step 1: Recall Clean Architecture dependencies

   The presentation layer (ViewModel) should depend on use cases in the domain layer, not directly on repository interfaces.

2. Step 2: Identify the violation

   Directly injecting and calling UserRepository in ViewModel bypasses use cases, mixing concerns and violating layer separation.

3. Final Answer:

   UserViewModel should not call repository directly -> Option A

4. Quick Check:

   ViewModel -> UseCase -> Repository [OK]

Hint: ViewModels call UseCases, not Repositories directly [OK]

Common Mistakes:

• Focusing on null safety (type system prevents null here)
• Thinking no architecture error in the code
• Assuming missing interface implementation

5. You want to add caching to your app using Clean Architecture. Where should the cache logic be placed?
Options:
A) In the domain layer
B) In the data layer
C) In the presentation layer
D) In the UI components

hard

A. Domain layer to keep business rules

B. UI components for faster display

C. Presentation layer to update UI directly

D. Data layer to manage data sources including cache

Solution

1. Step 1: Understand caching responsibility

   Caching is a data management concern, related to how data is stored and retrieved.

2. Step 2: Match caching to Clean Architecture layer

   The data layer handles data sources like network, database, and cache, so caching logic belongs here.

3. Final Answer:

   Data layer to manage data sources including cache -> Option D

4. Quick Check:

   Cache logic = Data layer [OK]

Hint: Cache belongs in data layer managing data sources [OK]

Common Mistakes:

• Putting cache in domain layer (business logic)
• Adding cache in UI or presentation layers
• Mixing UI concerns with data management