• Development
  • Features
  • Design
  • Try it out
  • Contributing
  • Requirements
• Tech Stacks
  • Kotlin Multiplatform
  • Jetpack Compose
• Architecture
• Trouble Shooting

Now this app has the Feed feature. We will deliver Feed and events related to DroidKaigi.

Home	Drawer

Android

iOS

The builds being distributed through mobile app distribution services.

• Production (TBR)
• Try the latest staging through
• and more... (tbw)

We always welcome any and all contributions! See CONTRIBUTING.md for more information

For Japanese speakers, please see CONTRIBUTING.ja.md

Latest Android Studio BumbleBee and higher. You can download it from this page. Xcode version is 12.5.1 (If you do iOS development)

TBD

• Jetpack Compose
• Kotlin Coroutines & Flows
• Dagger Hilt
• DataStore
• Kotlin Multiplatform

Compose processing and ViewModel processing are performed by Unidirectional data flow.

By performing State hoisting(pass the value and receive the event), Jetpack Compose displays with unidirectional data flow.

/**
 * stateful
 */
@Composable
fun FeedScreen(
    onNavigationIconClick: () -> Unit,
    onDetailClick: (Feed) -> Unit,
) {
...

    val (
        state,
        effectFlow,
        dispatch,
    ) = use(feedViewModel())

    val context = LocalContext.current
    effectFlow.collectInLaunchedEffect { effect ->
        when (effect) {
            is FeedViewModel.Effect.ErrorMessage -> {
                scaffoldState.snackbarHostState.showSnackbar(
                    effect.appError.getReadableMessage(context)
                )
            }
        }
    }

    FeedScreen(
        // ...
        FeedContents = state.filteredFeedContents,
        onFavoriteChange = {
            dispatch(FeedViewModel.Event.ToggleFavorite(Feed = it))
        },
        // ...
    )
}

/**
 * stateless
 */
@Composable
private fun FeedScreen(
    // ...
    FeedContents: FeedContents,
    onFavoriteChange: (Feed) -> Unit,
    // ...
) {
    Column {
        BackdropScaffold(
            backLayerBackgroundColor = MaterialTheme.colors.primarySurface,
            scaffoldState = scaffoldState,
            backLayerContent = {
                BackLayerContent(filters, onFavoriteFilterChanged)
            }
// ...
        )
// ...
    }
}

This app handles the ViewModel with an MVI-like interface.

Compose

    val (
        state,
        effectFlow,
        dispatch,
    ) = use(feedViewModel())

    val context = LocalContext.current
    effectFlow.collectInLaunchedEffect { effect ->
        when (effect) {
            is FeedViewModel.Effect.ErrorMessage -> {
                scaffoldState.snackbarHostState.showSnackbar(
                    effect.appError.getReadableMessage(context)
                )
            }
        }
    }

    FeedScreen(
        // ...
        FeedContents = state.filteredFeedContents,
        onFavoriteChange = {
            dispatch(FeedViewModel.Event.ToggleFavorite(Feed = it))
        },
        // ...

This state, effectFlow and dispatch are created from ViewModel.

state represents the state that the UI should display.

effectFlow represents a one-time event such as a Snackbar display.

And dispatch represents a change of state.

ViewModel Interface

interface UnidirectionalViewModel<EVENT, EFFECT, STATE> {
    val state: StateFlow<STATE>
    val effect: Flow<EFFECT>
    fun event(event: EVENT)
}

use(viewModel) function

@Composable
inline fun <reified STATE, EFFECT, EVENT> use(
    viewModel: UnidirectionalViewModel<EVENT, EFFECT, STATE>,
):
    StateEffectDispatch<STATE, EFFECT, EVENT> {
    val state by viewModel.state.collectAsState()

    val dispatch: (EVENT) -> Unit = { event ->
        viewModel.event(event)
    }
    return StateEffectDispatch(
        state = state,
        effectFlow = viewModel.effect,
        dispatch = dispatch
    )
}

Jetpack Compose is still a new technology. We are thinking of best practices. We will try to improve testing, preview and build by using Fake. For example, this app allows you to interact with the Android Studio Preview as if it were a real app.

This is possible by creating a Fake ViewModel and making it reliable.

Do the same test for Fake and the real thing by testing against the interface. This makes Fake's ViewModel reliable. This technique of doing the same test against Fake was introduced in "Build testable apps for Android" session(Google I/O'19).

You can also prevent forgetting to update by forcing the implementation with interface and . Also, by forcing the implementation with interface and " Exhaustive ", it is possible to prevent forgetting to update Fake's ViewModel.

override fun event(event: FeedViewModel.Event) {
    coroutineScope.launch {
        @Exhaustive
        when (event) {
            is FeedViewModel.Event.ChangeFavoriteFilter -> {

This app uses fake's ViewModel to enable preview.

@Preview(showBackground = true)
@Composable
fun FeedScreenPreview() {
    Conferenceapp2021FeedTheme(false) {
        ProvideFeedViewModel(viewModel = fakeFeedViewModel()) {
            FeedScreen {
            }
        }
    }
}

If you want to check the UI display, you can check it in the Preview of Android Studio. In that case, the required task is :uicomponent-compose:main:compileDebugKotlin. Therefore, there is no need to build the data module that contains the definitions such as API and the build of Android dex, so you can quickly build and check. Also, changes to the data layer do not affect the ui module, so you can build faster.

Thank you for contributing!

GitHub : Contributors

nontan
nobo

JDK 1.8 is a requirement to build an Android project basically, but AGP 7.0 requires JDK 11. Please make sure you are using Java 11. Please note that the java version of Gradle Daemon is determined at the launch-time, so ./gradlew --stop might be required for you.

android.enableBuildCache is REMOVED in AGP 7.0. android.enableBuildCache=false has no issue but builds randomly succeed with true value. This may affect to those who declare android.enableBuildCache=true in their $GRADLE_USER_HOME/gradle.properties.