kotlinlang #compose

Fatal Exception: java.lang.IllegalArgumentException: Required value was null.
       at androidx.compose.ui.node.LayoutNode.getInnerLayerWrapper$ui_release(LayoutNode.kt:639)
       at androidx.compose.ui.node.LayoutNode.shouldInvalidateParentLayer(LayoutNode.kt:1298)
       at androidx.compose.ui.node.LayoutNode.setModifier(LayoutNode.kt:670)
       at androidx.compose.ui.node.LayoutEmitHelper$setModifier$1.invoke(LayoutNode.kt:1382)
       at androidx.compose.ui.node.LayoutEmitHelper$setModifier$1.invoke(:6)
       at androidx.compose.ui.layout.LayoutKt$materializerOf$1.invoke(Layout.kt:614)
       at androidx.compose.ui.layout.LayoutKt$materializerOf$1.invoke(:13)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:155)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationItemBaselineLayout$1.invoke(BottomNavigation.kt:456)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationItemBaselineLayout$1.invoke(:10)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:146)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.ui.layout.LayoutKt.Layout(Layout.kt:682)
       at androidx.compose.material.BottomNavigationKt.BottomNavigationItemBaselineLayout(BottomNavigation.kt:238)
       at androidx.compose.material.BottomNavigationKt.access$BottomNavigationItemBaselineLayout()
       at androidx.compose.material.BottomNavigationKt$BottomNavigationItem$3$1.invoke(BottomNavigation.kt:179)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationItem$3$1.invoke(:17)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:155)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationTransition$1.invoke(BottomNavigation.kt:218)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationTransition$1.invoke(:10)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:146)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.runtime.AmbientKt.Providers(Ambient.kt:187)
       at androidx.compose.material.BottomNavigationKt.BottomNavigationTransition-P1FLhu4(BottomNavigation.kt:214)
       at androidx.compose.material.BottomNavigationKt.access$BottomNavigationTransition-P1FLhu4()
       at androidx.compose.material.BottomNavigationKt$BottomNavigationTransition$2.invoke(:13)
       at androidx.compose.material.BottomNavigationKt$BottomNavigationTransition$2.invoke(:10)
       at androidx.compose.runtime.RecomposeScope.compose(Composer.kt:286)
       at androidx.compose.runtime.Composer.recomposeToGroupEnd(Composer.kt:1696)
       at androidx.compose.runtime.Composer.skipToGroupEnd(Composer.kt:1975)
       at androidx.compose.material.ScaffoldKt$ScaffoldLayout$1$1$1$bottomBarPlaceables$1.invoke(Scaffold.kt:281)
       at androidx.compose.material.ScaffoldKt$ScaffoldLayout$1$1$1$bottomBarPlaceables$1.invoke(:10)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:146)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.ui.layout.SubcomposeLayoutState$subcompose$2$1.invoke(SubcomposeLayout.kt:181)
       at androidx.compose.ui.layout.SubcomposeLayoutState$subcompose$2$1.invoke(:10)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(ComposableLambda.kt:146)
       at androidx.compose.runtime.internal.ComposableLambda.invoke(:10)
       at androidx.compose.runtime.ComposerKt.invokeComposable(Composer.kt:2887)
       at androidx.compose.runtime.Composer.composeInitial(Composer.kt:2057)
       at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:353)
       at androidx.compose.runtime.Composer$CompositionReferenceImpl.composeInitial$runtime_release(Composer.kt:2500)
       at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:110)
       at androidx.compose.ui.platform.WrapperKt.actualSubcomposeInto(Wrapper.kt:124)
       at androidx.compose.ui.platform.SubcompositionKt.subcomposeInto(Subcomposition.kt:39)
       at androidx.compose.ui.layout.SubcomposeLayoutState$subcompose$2.invoke(SubcomposeLayout.kt:175)
       at androidx.compose.ui.layout.SubcomposeLayoutState$subcompose$2.invoke()
       at androidx.compose.runtime.snapshots.SnapshotStateObserver.pauseObservingReads(SnapshotStateObserver.kt:147)
       at androidx.compose.ui.node.OwnerSnapshotObserver.pauseSnapshotReadObservation$ui_release(OwnerSnapshotObserver.kt:52)
       at androidx.compose.ui.node.LayoutNode.ignoreModelReads(LayoutNode.kt:1156)
       at androidx.compose.ui.layout.SubcomposeLayoutState.subcompose(SubcomposeLayout.kt:173)
       at androidx.compose.ui.layout.SubcomposeLayoutState.subcomposeIfRemeasureNotScheduled(SubcomposeLayout.kt:167)
       at androidx.compose.ui.layout.SubcomposeLayoutKt.SubcomposeLayout(SubcomposeLayout.kt:83)
       at androidx.compose.ui.layout.SubcomposeLayoutKt$SubcomposeLayout$2.invoke(:10)
       at androidx.compose.ui.layout.SubcomposeLayoutKt$SubcomposeLayout$2.invoke(:10)
       at androidx.compose.runtime.RecomposeScope.compose(Composer.kt:286)
       at androidx.compose.runtime.Composer.recomposeToGroupEnd(Composer.kt:1696)
       at androidx.compose.runtime.Composer.skipCurrentGroup(Composer.kt:1953)
       at androidx.compose.runtime.Composer.recompose(Composer.kt:2083)
       at androidx.compose.runtime.Recomposer.performRecompose(Recomposer.kt:375)
       at androidx.compose.runtime.Recomposer.access$performRecompose()
       at androidx.compose.runtime.Recomposer$recomposeAndApplyChanges$2$4.invoke(Recomposer.kt:310)
       at androidx.compose.runtime.Recomposer$recomposeAndApplyChanges$2$4.invoke(:7)
       at androidx.compose.runtime.dispatch.AndroidUiFrameClock$withFrameNanos$2$callback$1.doFrame(AndroidUiFrameClock.kt:34)
       at androidx.compose.runtime.dispatch.AndroidUiDispatcher.performFrameDispatch(AndroidUiDispatcher.kt:111)
       at androidx.compose.runtime.dispatch.AndroidUiDispatcher.access$performFrameDispatch()
       at androidx.compose.runtime.dispatch.AndroidUiDispatcher$dispatchCallback$1.doFrame(AndroidUiDispatcher.kt:71)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1007)
       at android.view.Choreographer.doCallbacks(Choreographer.java:821)
       at android.view.Choreographer.doFrame(Choreographer.java:753)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:995)
       at android.os.Handler.handleCallback(Handler.java:873)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:201)
       at android.app.ActivityThread.main(ActivityThread.java:6826)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:873)

zoha131

12/09/2020, 4:07 PM

I am getting this fatal issue for

BottomNavigation

. not sure if I am doing something wrong or there is an issue with

BottomNavigation

lilypuchi

12/09/2020, 5:15 PM

My understanding of recomposition might be really poor, but I’m unable to understand why the value of

bounce

isn’t changing when I trigger

bounce.animateTo(..)

onClick

Would really appreciate some help here 🙇

@Composable
fun Bouncy(modifier: Modifier = Modifier) {
    val bounce = animatedFloat(initVal = 0f)

    Box(modifier = modifier
            .size(width = 150.dp, height = 50.dp)
            .clip(shape = GenericShape {
                val height = it.height * bounce.value
                relativeMoveTo(0f, 0f)
                relativeLineTo(it.width / 2, height)
                relativeLineTo(it.width / 2, -height)
            })
            .background(color = Color.Red)
            .clickable(onClick = {
                bounce.animateTo(
                        targetValue = 1f,
                        anim = spring(
                                dampingRatio = Spring.DampingRatioMediumBouncy,
                                stiffness = Spring.StiffnessLow
                        ),
                )
            })
    )
}

zsperske

12/09/2020, 6:26 PM

Has anyone been able to disable a text field but still make it clickable? I want to show a date/time picker when the text field is tapped

Daniele B

12/09/2020, 7:12 PM

I get this error:

2020-12-08 15:59:51.291 2602-10311/? D/PowerUI: can't show warning due to - plugged: true status unknown: false
  java.lang.NoSuchFieldError: No field Companion of type Landroidx/compose/runtime/SlotTable$Companion; in class Landroidx/compose/runtime/SlotTable; or its superclasses
    at androidx.navigation.compose.NavHostKt.NavHost(NavHost.kt:163)

Android Studio: Arctic Fox 2020.3.1 Canary 2 Kotlin: 1.4.21 Compose: 1.0.0-alpha08 Navigation: 1.0.0-alpha03 any idea?

Spikey Sanju

12/09/2020, 7:20 PM

I'm facing following issue for Image component after updating to alpha 08. Why is that happening?

None of the following functions can be called with the arguments supplied.
Image(ImageAsset, Modifier = ..., Alignment = ..., ContentScale = ..., Float = ..., ColorFilter? = ...) defined in androidx.compose.foundation
Image(Painter, Modifier = ..., Alignment = ..., ContentScale = ..., Float = ..., ColorFilter? = ...) defined in androidx.compose.foundation
Image(VectorAsset, Modifier = ..., Alignment = ..., ContentScale = ..., Float = ..., ColorFilter? = ...) defined in androidx.compose.foundation

Bryan Herbst

12/09/2020, 9:20 PM

Has anyone else had issues with Gradle hanging after updating to AGP 7.0.0 and Compose alpha08?

Kshitij Patil

12/09/2020, 9:26 PM

Has anyone made compose implementation of

AutoCompleteTextView

? I know I can just use the existing one but having it implemented in Compose would make it more flexible I feel.

Sam

12/09/2020, 10:26 PM

what’s the best way to set a fixed

dp

spacing between each item in a

LazyColumnFor

? There seems to be

contentPadding

as a param but no obvious

itemSpacing

➕ 1

Martin Nowosad

12/10/2020, 8:57 AM

is there currently a way to render/draw your own ui elements / composables (analog to creating a custom view on android and writing your own logic within

onDraw

Mayank Saini

12/10/2020, 9:46 AM

I have recently upgraded to compose

alpha08

I have encountered this error in

layout

while measuring height.

java.lang.IllegalArgumentException: maxHeight(-35) must be >= minHeight(0)

This is the code snippet.

SubcomposeLayout(modifier = modifier) { constraints ->
        val layoutWidth = constraints.maxWidth
        val layoutHeight = constraints.maxHeight
        val gridTopOffset = 10.dp.toPx().toInt()
        val looseConstraints = constraints.copy(minWidth = 0, minHeight = 0)
        layout(width = layoutWidth, height = layoutHeight) {
            val imagePlaceables = subcompose(GamesCompositionContent.Image, image).fastMap {
                it.measure(looseConstraints.copy(minHeight = layoutHeight))
            }
            val imageWidth = imagePlaceables.fastMaxBy { it.width }?.width ?: 0

            val gridPlaceables = subcompose(GamesCompositionContent.GamesGrid) {
                val innerPadding = PaddingValues(
                    start = if (imageWidth != 0) (imageWidth / 2).toDp() else 0.dp
                )
                grid(innerPadding)
            }.fastMap {
                it.measure(
                    looseConstraints.copy(
                        maxWidth = layoutWidth - imageWidth / 2,
                        maxHeight = layoutHeight - gridTopOffset
                    )
                )
            }

The code was working perfectly and no crashes on

alpha07

darkmoon_uk

12/10/2020, 12:15 PM

Anyone else think Google's Jetpack Compose API reference is just awful? It has all the Jetpack packages combined into a single space, so that you can't easily separate one (i.e. Compose) from any other. Search that doesn't indicate which package/library a result is from, and parts of compose split across packages in a way that makes it hard to locate anything - useless... the JetPack Playground documentation is unofficial, possibly out of date, but does a far better job of being usable.

allan.conda

12/10/2020, 4:20 PM

Is there available API currently which logs node interactions with compose? for debugging purposes?

Nat Strangerweather

12/10/2020, 6:20 PM

```
I don't understand why the animation works when I select the button but not when I deselect it. Any ideas? Here is my code. Also, are there any animation effects, like bouncing etc out of the box, or do they have to be implemented from scratch?
```var isSelected = selectedIndex.value == index
val scale = animate(if (isSelected) 1f else 0f)

            if (color != null) {
                Column(
                    Modifier.fillMaxWidth(), horizontalAlignment = CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Box(Modifier.fillMaxWidth(), Center) {
                        Card(
                            backgroundColor = color,
                            modifier = Modifier.size(100.dp)
                                .padding(10.dp)
                                .clip(CircleShape)
                                .clickable(
                                    indication = null,
                                    onClick = {
                                        selectedIndex.value = index
                                        isSelected = !isSelected
                                    }
                                )
                        ) {
                            Box(Modifier.fillMaxSize(), Center) {
                                when (index) {
                                    0 -> Icon(alarm)
                                    1 -> Icon(mediaSounds)
                                    2 -> Icon(touchSounds)
                                    3 -> Icon(Icons.Rounded.Notifications)
                                    4 -> Icon(events)
                                    5 -> Icon(Icons.Rounded.Email)
                                }
                            }
                        }
                        Box(Modifier.fillMaxSize(), Center) {
                            OptionsPopUp(scale = scale, color = color)
                        }
                    }
                    Text(text = string, style = typography.subtitle2)
                }
            }
        }
    }
}

Kshitij Patil

12/10/2020, 6:27 PM

With these ~40 lines of code, I was able to build a fully functioning

AutoCompleteTextFIeld

. Power of Jetpack Compose 🔥

@Composable
fun AutoCompleteTextField(
    initialText: String,
    itemList: List<String>,
    onQuery: (String) -> Unit,
    onClearResults: () -> Unit,
    modifier: Modifier = Modifier
) {
    val (field, changeField) = savedInstanceState(saver = TextFieldValue.Saver) { TextFieldValue(text = initialText) }
    LaunchedEffect(subject = field.text) {
        if (!field.text.isBlank()) {
            delay(1000L)
            onQuery(field.text.trim())
        }
    }
    LazyColumn(modifier = modifier.animateContentSize()) {
        item { 
            TextField(
                value = field,
                onValueChange = {
                    changeField(it)
                    onClearResults()
                },
                maxLines = 1
            ) 
        }
        if (itemList.isNotEmpty() && !field.isBlank()) {
            items(itemList) { item ->
                Text(
                    item,
                    modifier = Modifier
                        .padding(4.dp)
                        .clickable(onClick = {
                            changeField(TextFieldValue(item))
                        })
                )
            }
        }
    }
}

You can find a gist here for future reference: https://gist.github.com/Kshitij09/01ed382d395273dd0eac453003265ad9 Any suggestion are welcome 🙂 One issue I found was with the cursor offsets. I need some way to move the cursor to the end on selecting an item from suggestion-list. I tried to do something with

OffsetMap

but didn't work.

🎉 7

Charles Burton

12/10/2020, 7:50 PM

So, I’m new to Jetpack and I’m having what are admittedly some problems related to my newness. For reference I’m using the version shipped with the current canary build of Android Studio and I’m running Ubuntu 20.04.1 as my dev machine. The device I’m working with is a Pixel 4a 5G fully up to date. 1. I can’t seem to get reload to work. In the sample app created by default when I change the text “Android” to “World” no combination of rebuild and send preview to device seems to update the text. 2. Dark mode colors seem to not work, all I have is black text on a blacker background. I’ve tried adjusting the colors but the same problem as above seems to make reloading them not function.

zsperske

12/10/2020, 9:13 PM

do Columns/LazyColumns have any diffing functionality if you replace an element or elements in the middle of the list or will it recompose the whole list?

Bradleycorn

12/10/2020, 9:33 PM

Is there a Codelab or Tutorial or Blog Series or anything from the Google team regarding animations in Compose?

Shakil Karim

12/10/2020, 10:10 PM

Anyone else having issues with performance on some devices while using Compose? is it a known issue, And Does it will get better on beta or stable release?

Sam

12/10/2020, 11:25 PM

Does anyone have experience with the new suspend scrolling functions added in

alpha08

, specifically

lazyListState.smoothScrollBy

and

lazyListState.snapToItemIndex

? We have a chat application so these new functions are critical for starting at the bottom of the message list, as well as revealing new messages into view as they arrive. However, the api is quite cumbersome for these reasons: •

snapToItemIndex

takes an index, but it’s not very easy to know how many items are in a

LazyColumn

, because there could be group headers, arbitrary items etc and

firstVisibleItemIndex

doesn’t help much •

snapToItemIndex

will only align the item to the top of the `LazyColumn`’s viewport, which is unhelpful in scenarios of scrolling to the very bottom of the list. There’s also

scrollOffset

param but this requires every [variable height] item to be measured to calculate the offset, is this even possible? •

smoothScrollBy

seems to only take a relative offset, as you can imagine if 3 new messages come in within a chat interface, it’s a tough time to calculate everything needed to scroll to bottom, including the height of all new items as well as the current scroll position. I know some might suggest using

reverseScrollDirection

to avoid some of these challenges, but that leads to a bunch of tradeoffs down the line (e.g. maintaining scroll position when user is scrolled up, control over animation of new messages, infinite scroll older msgs, etc). Plus it’s not even available yet on

LazyColumn

Lilly

12/10/2020, 11:46 PM

Hi,

Icons.Filled

doesn't cover all icons right? I'm looking for a collapse icon. Any ideas?

Colton Idle

12/11/2020, 1:17 AM

I feel like this was asked before and someone posted a link to a blog post, but I'm searching through slack with no luck so far. My question: I want to use compose in my app, but I think moving all of my composables to a separate module will have a bunch of benefits. Is there a good tutorial for how to go about this? My main issue I think is the fact that I've never worked in a multi module project and so I'm definitely a bit intimidated. Also, composable re-use for desktop seems to make sense if we go this way.

Brady Aiello

12/11/2020, 5:05 AM

I'm having an issue with LiveData's

observeAsState()

and Flow's

collectAsState()

just not being invoked on change anymore, where

observe()

and

collect()

lambdas are still being invoked on change. ViewModel:

private val _spellLiveData: MutableLiveData<DataState<List<Spell>>> = 
                MutableLiveData(DataState.Loading)
val spellLiveData: LiveData<DataState<List<Spell>>> = _spellLiveData
...
// Posting initial Loading, Success states
viewModelScope.launch {
   ...
    _spellLiveData.postValue(it)
}
...
// Posting new Success states with modified data
viewModelScope.launch {
   ...
    _spellLiveData.postValue(it)
}

MainActivity:

// This onChanged listener will always be invoked after a change.
viewModel.spellLiveData.observe(owner = this, onChanged = {
    Log.d(TAG, "onCreate: $it")
})

// This will stop being invoked after the initial Loading, then Success states.
// So we can't update it.
val spells by viewModel.spellLiveData.observeAsState(initial = DataState.Loading)

I'm fetching 308 DnD 5e Spells, each with a few paragraphs about how they're used, as well as some smaller fields. After posting the initial 308, I can't post another 308 in its place and have it update. But, when I post modified data with just 3 spells,

observeAsState()

and

collectAsState()

work fine, and the views recompose correctly. So I'm wondering if I've reached the limits of what state can do? I thought it might be a bug in

observeAsState()

, but the same problem occurs with Flow's

collectAsState()

Archie

12/11/2020, 12:03 PM

BottomBar no longer updates `Scaffold`'s

contentPadding

whenever

bottomBar

changes visibility.

Scaffold(
    bottomBar = {
        AnimatedVisibility(
            visible = currentBackStack?.arguments?.getString(KEY_ROUTE) == secondScreenRoute
            ...
        ) {
            SomeComposable()
        }
    }
) { padding ->
    val modifier = Modifier.padding(padding)
    NavHost(navController, startDestination = startRoute) {
        composable(startRoute) {
            FirstScreen(modifier)
        }
        composable(secondScreenRoute) {
            // When the bottomBar is shown on this screen
            // it overlaps the content of second screen
            SecondScreen(modifier)  
        }
        ...
    }
}

Rafs

12/11/2020, 1:51 PM

Is there anyway to change the fillcolor of a particular pathdata in a vector drawable loaded in compose?

Geert

12/11/2020, 1:53 PM

I suddenly have this error in my project. I did not update any dependencies as far as I know. Can someone tell my why Icon with asset is removed?

Dominaezzz

12/11/2020, 5:25 PM

Silly question but..... for

State

updates to work properly, do they have to be directly in a

@Composable

method? Would it still work with a non-

@Composable

wrapper method?

Nuru

12/11/2020, 6:52 PM

My question is more of Android Studio tool for Compose than Compose itself. The Compose Preview Window is not updating, what are possible ways to fix it?

Sam

12/11/2020, 10:45 PM

Question on using ViewModels in Jetpack Compose -- if I have:

class TodoViewModel : ViewModel() {
    var todoItems = mutableStateOf(listOf())
    override fun onCleared { /* clean stuff up */ }
}

and then i remember it in my composable:

var todoItems by remember { TodoViewModel().todoItems }

why isn’t

onCleared

called on the VM when navigation pops the composable back off the stack?

elye

12/12/2020, 3:43 AM

Is there a replacement for

ItemDecoration

RecyclerView

LazyColumnFor

? https://stackoverflow.com/questions/65261251/what-is-the-itemdecoration-for-jetpack-compose-lazycolumn/65261377#65261377

Title

elye

12/12/2020, 3:43 AM

Is there a replacement for

ItemDecoration

RecyclerView

LazyColumnFor

? https://stackoverflow.com/questions/65261251/what-is-the-itemdecoration-for-jetpack-compose-lazycolumn/65261377#65261377

Dominaezzz

12/12/2020, 1:12 PM

Not really, as you can just decorate the items yourself. So you have the power.

👍 1

Thiago

12/12/2020, 2:49 PM

In declarative frameworks you got the power. Just use a if inside your itemContent function e put a divider while is not the last item.

👍 1

View count: 7