Hello! I'm trying to implement a collapsing toolbar and I'm stuck on getting my toolbar content to scroll upwards (offscreen) along with my screen content. I've tried setting the offset of the container for the toolbar content to -(

toolbarMaxHeight

) and then adding a spacer of height

toolbarMaxHeight

so it gives the content space to scroll upwards... but I'm ending up with a blank screen. Even though if I look in layout inspector it shows everything is where it's supposed to be. Is there a way to provide space to a composable so that it can be placed above the top of your screen and then allowed to scroll upwards? Code in comments

How to trigger ViewModel function when user input changes on

TextField

? I'm implementing search screen and need to make network call based on input value. I'm using paging for response data and collecting as

LazyPagingItem

What's the difference between this two approaches? And why first is preferable?

@Composable
fun TestScreen(viewModel: TestViewModel = hiltViewModel()) {
    //content
}

@Composable
fun TestScreen() {
    val viewModel: TestViewModel = hiltViewModel()
    //content
}

Hello ! I have three underlying

BasicInputText

for change password. I use

focusRequester

to focus with BasicInputText. When I enter the screen, the last textfield is focused and the cursor is in that textfield. How can I change it to put it in the first textfield?

Do inline/value classes need to be marked as

@Immutable

when they wrap primitives, or is that implied?

I saw compose added

Modifier.blur()

api, but it only can blur the content, is there any way to blur the background like this library? https://github.com/mmin18/RealtimeBlurView

hey all, I have a doubt about

AndroidView

. Using just views a

FrameLayout

above something else it doesn’t intercept any touches, instead using an

AndroidView

on top of a composable all the touches are intercepted

Hello! Test problem here! test methods cannot be annotated wit

@Composable

but they need some composable code... code in 🧵

When composable decompose and there was focused input with keyboard opened, then keyboard stayed opened. How to force close keyboard on such case?

Column
  TextField
  DropdownMenu (height set)

(X is 183 in my tests, haven't tested on other devices to see if that changes) If height <= X, ok, DropdownMenu shows up below the textfield. But if height >= X + 1, then it moves up covering the TextField.

I use the "fill everything up" spacer a lot and want to define this for a util, but the "weight" method is not found. I guess because it depends on the scope. How must I modify this code so I can use

FillSpacer()

everywhere I would write the long form instead?

@Composable
fun FillSpacer() =
    Spacer(modifier = Modifier.weight(1.0f))

I’m facing some issues trying to do this kind of flip animation. I’m using

graphicsLayer

to flip the card component and it’s working. But the problem is with the content, I dont know how to sync the both sides with the flip. Any tips?

I have an app that uses a Material theme in light and dark variants … pretty standard stuff. The light theme uses a white surface color and a pretty dark (navy blue) primary color. So far so good… However, we have a few screens (formerly fragments) where the design calls for the color scheme to be inverted. That is, the dark (navy blue) color is used for the background (surface) and the content (text, textfields, etc) is white. I’m wondering what is the best way to deal with this? At first, I created a

DarkSurface

composable that wraps a surface and sets up some CompositionLocals to handle the color inversions. But the more I go down that path, the more cumbersome and wrong it seems. Now I’m wondering if I should create a new theme for these screens to use. Anyone else ran into something like this before and have any ideas on how to handle it?

What's the quickest way to create a "theme overlay" in Compose? Like if I want my MaterialTheme, but I just want to swap color primary with Color.Red for example?

Just added a section for long form content on JetpackCompose.app. Kicking things off with an article about "donut-hole" skipping in Compose. Give it a read here - https://jetpackcompose.app/articles/donut-hole-skipping-in-jetpack-compose

What is an alternative for back handling in UI tests? Previously I used:

Espresso.onView(ViewMatchers.isRoot()).perform(ViewActions.pressBack())

With Compose I'm trying this:

val keyEvent = NativeKeyEvent(NativeKeyEvent.ACTION_DOWN, NativeKeyEvent.KEYCODE_BACK)
composeTestRule.onRoot().performKeyPress(KeyEvent(keyEvent))

but getting:

KeyEvent can't be processed because this key input node is not active.

So i’m starting to play with BottomSheetModalLayout, the issue i’m having is that i’m in a Scaffold already, and using the NavController to control the content. If the content area has the BottomSheetModalLayout then it’s scrim doesn’t cover the TopAppBar of the main screen. If i move the BottomSheetModalLayout to be a parent of the Scaffold, i could presumably cover the TopAppBar with a scrim, but then i have to know at the top level what all my dialogs look like. I’m wondering what approach people are taking to solve this issue.

Multiple Google engineers have emphasized that Compose (not UI) is designed to handle arbitrary mutable trees of data. I have a project (currently in the “research of feasibility” stage) that would require high-performance multi-threaded tree editions; is there someone knowledgeable to discuss this?

I am using this as a value for a path translation, and I don't know why it's not smooth and kinda late.

val funnelTranslation by animateFloatAsState(
    targetValue = if (isDeleted.value)
        -radius * 3f - particleRadius
    else
        (offsetX.value - radius * 3f - particleRadius).coerceAtMost(0f)
)

isDeleted is a boolean state, and offsetX is an Animateable. Usage:

Box {
    Canvas(
        Modifier.height(imageSizeDp)
    )
    {
        translate(funnelTranslation) {
            drawPath(
                path = drawSideShape(radius = radius, particleRadius = particleRadius * 3 / 4f),
                color = shoesArticle.color
            )
        }
    }
}

Dialog

and

DropDownMenu

unexpand and hide, respectively, when the user touches outside the composables. How can I implement this myself? I want to hide a composable if the user touches outside the composable.

This message was deleted.

here is the error message i am getting : This version (1.0.2) of the Compose Compiler requires Kotlin version 1.5.21 but you appear to be using Kotlin version 1.5.30 which is not known to be compatible. Please fix your configuration (or

suppressKotlinVersionCompatibilityCheck

but don’t say I didn’t warn you!).

Hello everybody. I have a more technical question regarding the layouting of compose. From documentation, compose has no double measuring. Instead, intrinsics are to be used. However, from what I see in the source code, by default, intrinsics just calls measure: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui/src/commonMain/kotlin/androidx/compose/ui/layout/MeasurePolicy.kt;l=138 What is the main difference then? Additionally, isn't that even worse than measuring? For example, if I want both max width and max height of some composable, before I do the final measure, I have to call both intrinsic methods, which will internally call measure twice, instead of just directly calling measure, which would give me both values in one call (but I'm not allowed to do that before final measure). Thanks.

I want to encapsulate some composable code but I want to expose some of the internal state, but not all of it. Any idea how to tackle this on Compose? Or would I have to hoist the whole painter state in this example:

fun DecoratedImage(
  data: Any?
) {
  val painter = rememberImagePainter(data) {
     crossfade(true)
     // lots of styling/customization
  }
  val state = (painter as? Success)?.state // I want to expose this state
  Image(painter)
}

whats the proper way to ‘store’ a computation by key?

using accompanist coil library, when swapping an image url, the image disappears for a second, and then after the request completes it swaps the image. Is there any way to just swap the image when the loading is done ?

Consider this trivial example. Are screen1 and screen2 equivalent, or is screen1 less efficient because it will recompose state2 when state1 changes?

data class State(
	val state1: State1,
	val state2: State2
)

class ViewModel{
	val state = flowOf<State?>(...)
	.distinctUntilChanged()
}

fun screen1(){
	Surface{
		val viewState by viewModel.state.collectAsState(null)

		composeFun1(viewState.state1)
		composeFun2(viewState.state2)
	}
}

fun screen2(){
	Surface{
		val viewState1 by viewModel.state.map{it.state1}.collectAsState(null)
		val viewState2 by viewModel.state.map{it.state2}.collectAsState(null)

		composeFun1(viewState1)
		composeFun2(viewState2)
	}
}

Whats the recommended way to compute values in compose? If I have a

Lazy<Foo>

in my MainActivity that takes 1000 ms to resolve; how can I

.get()

it inside a

@Composable

function such that it happens in the background (e.g. with

Dispatchers.Default

)?