jetpack-compose-design-patterns

A factory design pattern is a generative design pattern that helps to abstract how an object is created. This makes your code more flexible and extensible.

The basic idea of the factory design pattern is to delegate object creation to a factory class. This factory class determines which object is created.

• Product: The object to be created.
• Factory: The class that creates the product object.

• Makes your code more flexible and extensible.
• It makes your code more readable and understandable by abstracting the object creation process.
• It makes the software development process more efficient.

• It may be difficult to use in complex applications.
• It may cause you to write more code.

Sample Scenario

Here's a real-world example of the Factory Design Pattern in Jetpack Compose, focusing on a scenario where you want to implement different card layouts for displaying various types of content in a news application:

Scenario: You have a news app where each news item can be displayed in several formats like ' simple' (only text), 'rich' (with image), or 'interactive' (includes interactive elements like a poll).

1. Define an Interface for Card Factories:

interface NewsCardFactory {
    @Composable
    fun CreateCard(newsItem: NewsItem)
}

data class NewsItem(val title: String, val content: String, val imageUrl: String?)

2. Implement Concrete Factories for Each Card Type:

• Simple Card Factory:

class SimpleCardFactory : NewsCardFactory {
    @Composable
    override fun CreateCard(newsItem: NewsItem) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            shape = RoundedCornerShape(8.dp)
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(newsItem.title, style = MaterialTheme.typography.titleSmall)
                Text(newsItem.content, style = MaterialTheme.typography.bodyMedium)
            }
        }
    }
}

• Rich Card Factory:

class RichCardFactory : NewsCardFactory {
    @Composable
    override fun CreateCard(newsItem: NewsItem) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            shape = RoundedCornerShape(8.dp)
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                newsItem.imageUrl?.let { url ->
                    AsyncImage(
                        model = url,
                        contentDescription = null,
                        contentScale = ContentScale.FillBounds,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(200.dp)
                            .clip(RoundedCornerShape(3.dp))
                    )
                }
                Text(newsItem.title, style = MaterialTheme.typography.titleSmall)
                Text(newsItem.content, style = MaterialTheme.typography.bodyMedium)

            }
        }
    }
}

3. Create a Factory Provider:

enum class CardType { SIMPLE, RICH }

@Composable
fun CardFactoryProvider(
    cardType: CardType = CardType.SIMPLE,
    content: @Composable () -> Unit
) {
    val factory = when (cardType) {
        CardType.SIMPLE -> SimpleCardFactory()
        CardType.RICH -> RichCardFactory()
    }
    CompositionLocalProvider(LocalCardFactory provides factory) {
        content()
    }
}

private val LocalCardFactory = staticCompositionLocalOf<NewsCardFactory> {
    SimpleCardFactory() // Default
}

4. Usage in your App:

@Composable
fun NewsFeed(
    newsItems: List<NewsItem>,
    modifier: Modifier,
) {
    var selectedCardType by remember { mutableStateOf(CardType.SIMPLE) }

    CardFactoryProvider(cardType = selectedCardType) { // Or dynamically choose based on item type
        LazyColumn(modifier = modifier) {
            item {
                Row(modifier = Modifier.padding(8.dp)) {
                    Button(onClick = { selectedCardType = CardType.SIMPLE }) {
                        Text("Simple Card")
                    }
                    Spacer(modifier = Modifier.width(8.dp))
                    Button(onClick = { selectedCardType = CardType.RICH }) {
                        Text("Rich Card")
                    }
                }
            }
            items(newsItems) { item ->
                val cardFactory = LocalCardFactory.current
                cardFactory.CreateCard(item)
            }
        }
    }
}

This approach allows for a flexible and extensible design where new types of cards can be added by creating new factories without altering existing code that uses these cards. It uses the Factory Pattern to manage the creation of different UI components based on the type of news item, enhancing modularity and maintainability of the UI.

Back to the beginning of the documentation

The abstract factory design pattern uses a factory class to create objects from multiple families. This pattern abstracts the object creation process, making your code more readable and flexible.

• Abstract factory: A class used to create objects from multiple families.
• Concrete factory: A class that concretises the abstract factory and is used to create objects from a specific family.

• Makes your code more flexible and extensible.
• It makes your code more readable and understandable by abstracting the object creation process.
• It makes the software development process more efficient.

• It may be difficult to use in complex applications.
• It may cause you to write more code.

Sample Scenario

ThemeComponentsFactory (Abstract Factory)
├── LightThemeFactory
└── DarkThemeFactory
    ├── ThemeButton
    │   ├── LightThemeButton
    │   └── DarkThemeButton
    └── ThemeCard
        ├── LightThemeCard
        └── DarkThemeCard

1. Abstract Products

Define interfaces for themed components:

interface ThemeButton {
    @Composable
    fun Create(onClick: () -> Unit, content: @Composable () -> Unit)
}

interface ThemeCard {
    @Composable
    fun Create(content: @Composable () -> Unit)
}

2. Abstract Factory

Define the factory interface that creates themed components:

interface ThemeComponentsFactory {
    fun createButton(): ThemeButton
    fun createCard(): ThemeCard
}

3. Concrete Factories

Implement theme-specific factories:

class LightThemeFactory : ThemeComponentsFactory {
    override fun createButton(): ThemeButton = LightThemeButton()
    override fun createCard(): ThemeCard = LightThemeCard()
}

class DarkThemeFactory : ThemeComponentsFactory {
    override fun createButton(): ThemeButton = DarkThemeButton()
    override fun createCard(): ThemeCard = DarkThemeCard()
}

Usage

@Composable
fun ThemeSwitchingApp() {
    var isDarkTheme by remember { mutableStateOf(false) }
    val themeFactory: ThemeComponentsFactory = if (isDarkTheme) {
        DarkThemeFactory()
    } else {
        LightThemeFactory()
    }

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {
        themeFactory.createButton().Create(
            onClick = { isDarkTheme = !isDarkTheme }
        ) {
            Text("Switch Theme")
        }

        themeFactory.createCard().Create {
            Text("This is a themed card")
        }
    }
}

Return to the beginning of the documentation

• Singleton class: This class allows only one object to be created.
• Singleton object: The only object created from the Singleton class.

• Useful in situations where a single object is needed.
• Makes your code more readable and understandable.
• It makes the software development process more efficient.

• It may be difficult to use in complex applications.
• It may cause you to write more code.

Sample Scenario Imagine we want to manage a global theme configuration for an app, allowing access to the theme state from multiple places without passing it explicitly.

Singleton Implementation

object ThemeConfig {
    private var darkModeEnabled: Boolean = false

    fun isDarkModeEnabled(): Boolean = darkModeEnabled

    fun toggleDarkMode() {
        darkModeEnabled = !darkModeEnabled
    }
}

Usage in Composable Functions

@Composable
fun ThemeToggleButton() {
    val isDarkMode = remember { mutableStateOf(ThemeConfig.isDarkModeEnabled()) }

    Button(onClick = {
        ThemeConfig.toggleDarkMode()
        isDarkMode.value = ThemeConfig.isDarkModeEnabled()
    }) {
        Text(if (isDarkMode.value) "Switch to Light Mode" else "Switch to Dark Mode")
    }
}

@Composable
fun AppContent() {
    val isDarkMode = ThemeConfig.isDarkModeEnabled()
    MaterialTheme(colorScheme = if (isDarkMode) darkColors() else lightColors()) {
        ThemeToggleButton()
    }
}

Ways to Implement Singleton in Kotlin

1. Object Declaration (Most Common)

• Kotlin's object keyword inherently implements the singleton pattern.

object MySingleton {
    fun doSomething() {
        println("Singleton Instance")
    }
}

2. Lazy Initialization

• Use the lazy delegate to create a singleton only when accessed for the first time.

class MySingleton private constructor() {
    companion obj