foso/jetpack-compose-playground

Community-driven collection of Jetpack Compose example code and tutorials :rocket: https://foso.github.io/compose

Jetpack Compose Playground

Introduction 🙋‍♂️

This is a Jetpack Compose example project. I'm collecting a bunch of sample codes for Jetpack Compose. I also collect information/tutorials on the GitHub page https://foso.github.io/compose.

Show some ❤️ and star the repo to support the project

Composable of the week!! 🎉

The SubComposeLayout

New to Compose?

Check Compose for Android Developers or Hello World Compose

📙 Jetpack Compose examples/tutorials and demos

Look in the repo or take a look at the GitHub page: https://foso.github.io/compose

Animation

• Crossfade

Layouts

• ConstraintLayout
• Scaffold
• Column
• Row
• Stack

Foundation

• Canvas
• Image
• LazyColumn
• LazyRow
• Shape
• Text

Material

• AlertDialog
• BadgeBox
• Buttons: Button, FloatingActionButton, OutlinedButton, TextButton
• Card
• Divider
• DropdownMenu
• ModalBottomSheetLayout
• ModalDrawerLayout
• NavigationRail
• Progress Indicators: CircularProgressIndicator, LinearProgressIndicator
• Scaffold
• Selection Controls: Checkbox, RadioButton, Switch
• Slider
• Snackbar
• Surface
• Text
• TextField
• TopAppBar

Cookbook

• Overview
• Handle changes to a TextField

Some of the code samples in this Repository:

Overview	DialogExample	CircularProgress

Project Structure

• /app - Android project directory

Resources

Talks

Name	Description
Thinking in Compose	Jetpack Compose is the new next generation UI toolkit. It uses a declarative component based paradigm for building UIs easily and quickly. It’s written entirely in Kotlin and embraces the style and ergonomics of the Kotlin language.
Compose by example	Jetpack Compose is a new declarative UI toolkit built for the demands of creating modern user interfaces. Get started with Compose and learn about the new APIs and Material components that make up the toolkit by examining concrete UIs we’ve created with it. We’ll walk through examples of theming, animation, layout and more, demonstrating how to customize and combine components to build real UIs. We’ll show how the new toolkit simplifies your development experience and enables new possibilities.
Compose for existing apps	Jetpack Compose is now in alpha and you might want to start adding it to your existing apps. In this talk, you'll learn how to do that! We'll cover topics such as: adding Compose to your existing Views and embedding Views in Compose, using your existing View theme and current app architecture in Compose, testing all of that code, and much more.
Jetpack Compose	Jetpack Compose is Android’s new modern UI toolkit. Learn how Compose simplifies & accelerates your UI development, allowing you to create richer, more robust and responsive UIs. We outline our roadmap, what is ready for use right now, share our direction in areas that are still evolving, and show how the tight integration with tooling makes the development experience even better. Get up to speed with Compose and how it can help you to build better apps!
droidcon Online 2020: Become A Composer By Brian Gardner
KotlinConf 2019: The Compose Runtime, Demystified by Leland Richardson	Jetpack Compose is an ambitious multi-team effort to reimagine Android's UI Toolkit more than 10 years after the Android Platform launched with the original UI Toolkit. Compose follows a declarative programming model, and the runtime is coupled with a Kotlin compiler plugin to enable a novel new approach to declarative programming. In this talk, Leland will go over the mechanics of how the Compose runtime and compiler plugin work together, demystifying how it can be used to enable efficient and performant user interfaces. In addition, this talk will describe how Compose can operate completely independent of the Android Platform and Compose UI, allowing it to be used as a general language feature for Incremental Computing and the management of tree-like data structures.
KotlinConf 2019: Compose Yourself: Designing a Kotlin First UI Toolkit by Anna-Chiara & Clara	#Jetpack Compose is an unbundled UI Toolkit for #Android, designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of Kotlin. Learn directly from engineers on the project about the decisions that went into making this toolkit and how a Kotlin-first approach has influenced API design from the project's inception.
What's New in Jetpack Compose (Android Dev Summit '19)	Jetpack Compose was announced at Google I/O and the team has been hard at work ever since. This talk introduces Compose to new audiences, including what the project is and how it is taking shape. The talk also updates people who already know about Jetpack Compose, including how the project has evolved.
Understanding Compose (Android Dev Summit '19)	This session covers the benefits of a declarative reactive UI system like Jetpack Compose and how it applies to real problems that Android developers have today. Additionally, this talk expands on the programming model of Jetpack Compose and some of its implementation details the can help you understand how Compose works.
#AskAndroid at Android Dev Summit 2019 - Jetpack Compose	Missed the #AskAndroid livestream segment of Android Dev Summit 2019? Don’t worry, we got you covered. Hosts Lyla Fujiwara and Dan Galpin are joined by Anna-Chiara Bellini and Adam Powell to discuss Jetpack Compose questions submitted by Android developers online. Anna-Chiara Bellini is a product manager, and Adam Powell is an engineering lead.
Google IO19 - Declarative UI patterns	Explore how reactive and declarative paradigms can be applied to Android UI development, making it easier for developers to integrate these patterns into their Android apps with Kotlin.
DroidconBerlin - Jetpack Compose — Next Gen Kotlin UI Toolkit for Android
DroidconBerlin - Jumping into Jetpack Compose way too early to see what's inside
KotlinEverywhere - Jetpack Compose
DevFest Kolkata 2019 - Let's Talk Composing UI

Podcasts

Name	Episode	Description
Android Developers Backstage	Episode 147	Jetpack Compose Alpha
Android Developers Backstage	Episode 131	Jetpack Compose and Declarative UIs
Android Developers Backstage	Episode 115	Jetpack Compose
Fragmented Podcast	Episode 171	Jetpack Compose with Leland Richardson
The Kodeco Podcast	S09 E09	Google’s Android Toolkit Lead Developer Romain Guy

Other Links

Name	Description
Jetpack Compose
Jetpack Compose UI Readme
Compose Readme
Video - Kotlin and Jetpack Compose
#compose channel on Kotlin Slack
Compose from first Principles
Jetpack Compose Tutorial
AndroidX Git Compose
Release Notes
Compse UI Docu
Video - Jetpack compose - MVVM State management in a simple way
Jetpack Compose Twitter Bot
SSComposeCookBook
SSJetPackComposeProgressButton
SSJetpackComposeSwipeableView
SSComposeOTPPinView

Feel free to contribute!

✍️ Feedback

If you want to improve Compose, join the Kotlin Slack and the #compose channel or file a Compose bug on the Google Issue Tracker

Find this project useful? ❤️

• Support it by clicking the ⭐ button on the upper right of this page. ✌️

This project is proudly supported by JetBrains OSS License

License

MIT License

Copyright (c) 2019-2023 Jens Klingenberg

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Acknowledgments

Projects that helped me understand how to setup the project:

• Mishkun/try-compose

Credits

Jetpack-Compose-Playground is brought to you by these contributors.

jetpack-compose-playground's Issues

Doc issue with cookbook/textfield_changes/ page

This is no longer applicable, as a TextField now requires a onValueChanged callback.

Doc issue with desktop/general/scrollbar/ page

Link to official docs is dead.

Doc issue with material/radiogroup/ page

At the tp of this function it has a object or variable called state that does not exist?

How is this "state" created? There is n reference to it at all

bottom bar

Is there any example of a bottom navigation bar using jetpack compose? please let me know

LazyVerticalGrid Not working with paging 3 as expected

I'm using paging 3 with LazyVerticalGrid but the LazyVerticalGrid request all pages at once and display it.
I'm using paging 3 with LazyRow and LazyColumn and they worked perfectly with paging 3.

Example LazyRowUi:

val categoryList = categoryList.collectAsLazyPagingItems()
LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .height(35.dp)
                .animateContentSize(),
            contentPadding = PaddingValues(horizontal = 4.dp),
            horizontalArrangement = alignment,
        )
        {
            items(categoryList) { category ->
                CreateCategory(category, onCategoryCLicked)

            }
        }

Example LazyVerticalGrid:

val restaurantListItems = restaurantList.collectAsLazyPagingItems()
LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            modifier = Modifier.padding(horizontal = 4.dp),
        ) {
            //TODO remove itemSnapshotList and use another items fun
            items(restaurantListItems.itemSnapshotList) { restaurant ->
                if (restaurant != null) {
                    CreateRestaurant(m = 250, restaurant, onRestClicked)
                }
            }
        }

Can I use some components in jetpack to achieve dynamic updates without using Handler?

Jetpack-Compose-Playground/compose/src/main/java/androidx/ui/material/ProgressIndicatorDemo.kt

Line 88 in 8e24557

private val handler = Handler()

Doc issue with material/button/ page

the section button is not selected when on the button page.

Doc issue with animation/crossfade/ page

animation doesn't work
has the core api been re-written already?

Doc issue with foundation/lazycolumn/ page

Plz explain this part
{ item -> Log.d("COMPOSE", "This get rendered $item") when (item) {

And it seem missing some thing before when?

Example for a multiplatform Compose library

I've not seen any multiplatform library that is a UI Composable widget.
So, I'm self-promoting my own library here!

Would you like to mention this wavy slider component which demonstrates how to create a Composable usable in Desktop/Web/Android (and IOS, with a catch)?

Doc issue with cookbook/textfield_changes/ page

This code:

Text("The textfield has this text: " + textState.value.text)

failed to compile with "Unresolved reference: text".
Removing the ".=text" worked:

Text("The textfield has this text: " + textState.value)

Is the documentation referring to an old version

I'm currently reading the documentation on the website. The problem is that some of the components i.e., TopAppBar have certain parameters that're not mentioned in other walkthroughs, namely backgroundColor and elevation.
The full code imports Material, and I'm using Material3, but when I've tried to import Material it only shows the Icons and ripple packages.
Even MaterialTheme has the class colorScheme not colors.
Am I missing something, or is the docs outdated?

Known issues

The navigation pattern i use in this demo app is improvised, AFAIK there is no "right" way to do navigation with compose only (yet) (its in development). Sometimes a demo page will crash when you open it from the App "Homepage". Try to open it again. If this doesn't help try wrapping the code in your composeable function inside a MaterialTheme{}. If there already is one, try it with removing the theme.

If you find a better way to do navigation, please let me know

Doc issue with material/linearprogressindicator/ page

No data present

Doc issue with material/snackbar/ page

SnackBar is not auto-dismissed. This seems to be an issue that has no solution.

Please update the Compose binaries

11 hours ago this commit was added to AOSP that fixes this critical issue.

P.S. I'm very grateful that you've been keeping the binaries up to date thus far.

Doc issue with material/dropdownmenu/ page

fun DropdownMenu() ... has no body? Is this correct?

Doc issue with foundation/text/ page

the latest Canary build (16) of Android Studio 4.2 with compose 1.0.0-alpha07 complains that Text in foundation is deprecated and androidx.compose.material.Text should be used or androidx.compose.foundation.text.BasicText if we don't want any specific theming.

"Use androidx.compose.material.Text for a high level Text component that consumes theming information, or androidx.compose.foundation.text.BasicText for a basic unopinionated component that does not have default theming"

Doc issue with animation/crossfade/ page

Video can't be watched on Safari
It is just plain white view with some video controls

Doc issue with general/providers/ page

The explanation is too abstract and doesn't give an example.

Doc issue with layout/constraintlayout/ page

there's no method tag() under ConstraintSet scope

Using version 1.0.0-alpha08

How to load image using Jetpack compose?

It's a feature request, can you please add an example to load an image?
https://stackoverflow.com/q/56767624/4613320

Doc issue with foundation/shape/ page

When we add the Border in that Circle then we can see some color or box content outoff the border.
also I added shap as same as Box shap.

Why not open the DemoActivity directly?

Why not open the DemoActivity directly but through MainActivity ? There are 2 startup icons on the desktop !

why not this :

Modal Drawer direction guidance needed

Is there any way to openDrawer from the right or top?

Doc issue with material/textbutton/ page

The textbutton page doesn't show the content for the page, it seems to be broken.

Doc issue with material/scaffold/ page

There is no scaffoldState parameter in Scaffold for Material3 as stated here:

• Stack Overflow
• Official Documentation

Instead developers are encouraged to use ModalNavigationDrawer with Scaffold as content.

Doc issue with material/topappbar/ page

Topbar doesn't have a title property.

No sample for input text

Please add sample for input Text TextField as well.

Version update

plz update the library to dev10

Doc issue with general/testing/ page

I suspect that the Gradle instructions are out of date. This stuff went multiplatform, so for an Android project, it appears that you need ui-test-junit4-android to get composeTestRule().

Doc issue with cookbook/loadimage/ page

Example given appears to only work for Android. I see it's talking about that R class which you get autogenerated for you if you are an Android project. What if you're using desktop?

In my case, the app is actually multiplatform so ideally I'd want something I can put in commonMain...

Path issue in doc

mkdocs/index.md has wrong paths to the components individual page

Replace with:

• ConstraintLayout
• Scaffold
• Column
• Row
• Stack
• LayoutPadding

Doc issue with material/topappbar/ page

There is an error when you copy paste the code snippets, plus it also mentions that this is experimental. Any updates on this?

update library to dev-04

There are a lot of changes in dev-04, please update the playground samples

LazyColunmFor LazyRowFor Deprecated

LazyColunmFor and LazyRowFor are Deprecated

Doc issue with viewinterop/androidview/ page

The TextView interop example uses the argument viewBlock where as the AndroidView function only has a factory.

Current example :

AndroidView(viewBlock = { ctx ->
            //Here you can construct your View
            TextView(ctx).apply {
                layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
            }
        }, update = {
            it.text = "You have clicked the buttons: " + state.value.toString() + " times"
        })

Actual example :

AndroidView(factory= { ctx ->
            //Here you can construct your View
            TextView(ctx).apply {
                layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
            }
        }, update = {
            it.text = "You have clicked the buttons: " + state.value.toString() + " times"
        })

ModalBottomSheetLayout not opening when closing the keyboard simultaneaously inside Fragment

If my keyboard is opened, then on clicking of button if i try to hide my keyboard and change sheetState to show() then my keyboard hides but my sheet is not visible.

Mimicing opening of sheetState on result from api call.

Note - Sheet is shown for first time only. Its also working fine on emulator on Api level 33 but not below that
Note - If using preview then its working fine, but if using it inside fragment then its not working
Link to StackOverflow - https://stackoverflow.com/questions/74958610/bottom-sheet-not-being-shown-if-hiding-keyboard?noredirect=1#comment132284233_74958610
setContent { val sheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden) val key = LocalSoftwareKeyboardController.current ModalBottomSheetLayout( sheetState = sheetState, sheetContent = { repeat(20) { Text(text = "$it") } } ) { Column { var otpResponse by remember { mutableStateOf<Boolean?>(null) } if (otpResponse == false) { LaunchedEffect(key1 = Unit, block = { delay(180) otpResponse = true }) } if (otpResponse == true) { LaunchedEffect(key1 = Unit, block = { sheetState.show() }) } Column { var string by remember { mutableStateOf("") } TextField(value = string, onValueChange = { string = it }) Button(onClick = { key?.hide() otpResponse = false }) { Text(text = "TEST") } } } } }

LazyVerticalGrid display staggered UI

How to remove the unused empty spaces between these cards ?
Example
my Code:

var c = 0
LazyVerticalGrid(
                cells = GridCells.Fixed(2),
                modifier = Modifier.padding(horizontal = 4.dp),
            ) {

                items(restaurantListItems.itemSnapshotList) { restaurant ->
                    if (restaurant != null) {
                        if (c == 0) {
                            CreateRestaurant(m = 250, restaurant, onRestClicked)
                            c = 1
                        } else {
                            CreateRestaurant(m = 160, restaurant, onRestClicked)
                            c = 0
                        }
                    }
                }
           
            }

Provide link to the corresponding api doc

Okay it seems most pages have but missing on some pages.

Doc issue with material/divider/ page

Cannot find a parameter with this name: startIndent ,
Divider(startIndent = 8.dp, thickness = 1.dp, color = Color.Black) does not work

Doc issue with material/modaldrawer/ page

The full Example code link is 404 Not Found respond.

Doc issue with layout/box/ page

Hey, why can't i find align method in modifier when i put Column inside a "Box"

LazyVerticalGrid java.lang.IllegalStateException: Check failed.

The app crache after adding this block:

item {
           HandlePagingError(restaurantListItems.loadState)
         }

full method:

 LazyVerticalGrid(
                cells = GridCells.Fixed(2),
                modifier = Modifier.padding(horizontal = 4.dp),
            ) {

                items(restaurantListItems.itemSnapshotList) { restaurant ->
                    if (restaurant != null) {
                        CreateRestaurant(m = 250, restaurant, onRestClicked)
                    }
                }
                  // for adding footer indicator for state
                  item {
                      HandlePagingError(restaurantListItems.loadState)
                  }
            }


@Composable
fun HandlePagingError(loadState: CombinedLoadStates) {
    when {
        loadState.refresh is LoadState.Loading -> {
            CircleLoading(loadingState = true)
        }
        loadState.append is LoadState.Loading -> {
            CircleLoading(loadingState = true)
        }
        loadState.refresh is LoadState.Error -> {
            val e = loadState.append as LoadState.Error
            Snackbar(
                modifier = Modifier.padding(8.dp)
            ) { TextUi(text = stringResource(id = R.string.error_no_internet)) }
        }
        loadState.append is LoadState.Error -> {
            val e = loadState.append as LoadState.Error
            val v = loadState.append.endOfPaginationReached
            Log.i("HandlePagingError: ", v.toString())
            val error = getNetworkErrorFromThrowable(e.error)
            val messageError = when(error) {
                is Result.NetworkError.Generic -> getErrorType(error.type)
                Result.NetworkError.NoInternet -> stringResource(id = R.string.error_no_more_data)
            }
            TextUi(
                modifier = Modifier.fillMaxWidth(),
                text = messageError,
                textAlign = TextAlign.Center
            )
        }
    }
}

full crache output:

    java.lang.IllegalStateException: Check failed.
        at androidx.compose.foundation.lazy.LazyGridKt$ItemRow$2.measure-3p2s80s(LazyGrid.kt:448)
        at androidx.compose.ui.node.InnerPlaceable.measure-BRTryo0(InnerPlaceable.kt:51)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:100)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:126)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:88)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeMeasureSnapshotReads$ui_release(OwnerSnapshotObserver.kt:76)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:71)
        at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1293)
        at androidx.compose.foundation.lazy.layout.LazyLayoutPlaceablesProvider.getAndMeasure-0kLqBqw(LazyMeasurePolicy.kt:61)
        at androidx.compose.foundation.lazy.LazyMeasuredItemProvider.getAndMeasure-ZjPyQlc(LazyMeasuredItemProvider.kt:45)
        at androidx.compose.foundation.lazy.LazyListMeasureKt.measureLazyList-7Xnphek(LazyListMeasure.kt:141)
        at androidx.compose.foundation.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.measure-3p2s80s(LazyList.kt:245)
        at androidx.compose.foundation.lazy.layout.LazyLayoutKt$LazyLayout$2.invoke-0kLqBqw(LazyLayout.kt:55)
        at androidx.compose.foundation.lazy.layout.LazyLayoutKt$LazyLayout$2.invoke(LazyLayout.kt:44)
        at androidx.compose.ui.layout.SubcomposeLayoutState$createMeasurePolicy$1.measure-3p2s80s(SubcomposeLayout.kt:355)
        at androidx.compose.ui.node.InnerPlaceable.measure-BRTryo0(InnerPlaceable.kt:51)
        at androidx.compose.foundation.layout.PaddingValuesModifier.measure-3p2s80s(Padding.kt:417)
        at androidx.compose.ui.node.ModifiedLayoutNode.measure-BRTryo0(ModifiedLayoutNode.kt:39)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.ui.graphics.SimpleGraphicsLayerModifier.measure-3p2s80s(GraphicsLayerModifier.kt:306)
        at androidx.compose.ui.node.ModifiedLayoutNode.measure-BRTryo0(ModifiedLayoutNode.kt:39)
        at androidx.compose.ui.node.DelegatingLayoutNodeWrapper.measure-BRTryo0(DelegatingLayoutNodeWrapper.kt:131)
        at androidx.compose.foundation.layout.PaddingModifier.measure-3p2s80s(Padding.kt:364)
        at androidx.compose.ui.node.ModifiedLayoutNode.measure-BRTryo0(ModifiedLayoutNode.kt:39)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:100)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:126)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:88)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeMeasureSnapshotReads$ui_release(OwnerSnapshotObserver.kt:76)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.measure-BRTryo0(OuterMeasurablePlaceable.kt:71)
2022-01-09 12:08:56.152 20346-20346/com.limeint E/AndroidRuntime:     at androidx.compose.ui.node.LayoutNode.measure-BRTryo0(LayoutNode.kt:1293)
        at androidx.compose.foundation.layout.RowColumnImplKt$rowColumnMeasurePolicy$1.measure-3p2s80s(RowColumnImpl.kt:89)
        at androidx.compose.ui.node.InnerPlaceable.measure-BRTryo0(InnerPlaceable.kt:51)
        at androidx.compose.foundation.layout.FillModifier.measure-3p2s80s(Size.kt:658)
        at androidx.compose.ui.node.ModifiedLayoutNode.measure-BRTryo0(ModifiedLayoutNode.kt:39)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:100)
        at androidx.compose.ui.node.OuterMeasurablePlaceable$remeasure$3.invoke(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:1798)
        at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:121)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:88)
        at androidx.compose.ui.node.OwnerSnapshotObserver.observeMeasureSnapshotReads$ui_release(OwnerSnapshotObserver.kt:76)
        at androidx.compose.ui.node.OuterMeasurablePlaceable.remeasure-BRTryo0(OuterMeasurablePlaceable.kt:99)
        at androidx.compose.ui.node.LayoutNode.remeasure-_Sx5XlM$ui_release(LayoutNode.kt:1302)
        at androidx.compose.ui.node.LayoutNode.remeasure-_Sx5XlM$ui_release$default(LayoutNode.kt:1298)
        at androidx.compose.ui.node.MeasureAndLayoutDelegate.doRemeasure(MeasureAndLayoutDelegate.kt:174)
        at androidx.compose.ui.node.MeasureAndLayoutDelegate.remeasureAndRelayoutIfNeeded(MeasureAndLayoutDelegate.kt:232)
        at androidx.compose.ui.node.MeasureAndLayoutDelegate.access$remeasureAndRelayoutIfNeeded(MeasureAndLayoutDelegate.kt:38)
        at androidx.compose.ui.node.MeasureAndLayoutDelegate.measureAndLayout(MeasureAndLayoutDelegate.kt:205)
        at androidx.compose.ui.platform.AndroidComposeView.measureAndLayout(AndroidComposeView.android.kt:658)
        at androidx.compose.ui.node.Owner$DefaultImpls.measureAndLayout$default(Owner.kt:182)
        at androidx.compose.ui.platform.AndroidComposeView.dispatchDraw(AndroidComposeView.android.kt:842)
        at android.view.View.draw(View.java:23904)
        at android.view.View.updateDisplayListIfDirty(View.java:22776)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
        at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:5320)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:5292)
2022-01-09 12:08:56.152 20346-20346/com.limeint E/AndroidRuntime:     at android.view.View.updateDisplayListIfDirty(View.java:22731)
        at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:579)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:585)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:662)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:5042)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:4749)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:3866)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2618)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:9971)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1010)
        at android.view.Choreographer.doCallbacks(Choreographer.java:809)
        at android.view.Choreographer.doFrame(Choreographer.java:744)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:246)
        at android.app.ActivityThread.main(ActivityThread.java:8653)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:602)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1130)

Doc issue with cookbook/how_to_use_compose_in_viewgroup/ page

The cookbook/how_to_use_compose_in_viewgroup/ page is empty. It just links to the actual ComposeView page