How to make

TextField

pre-focused when a Composable is loaded for the first time?

Hi all, I have an architecture issue with a composable and a Kotlin Flow from a ViewModel. In my ViewModel, I have a flow which observes any changes in a room database to emit a data with a delay. Here a small example of my ViewModel:

fun myFunc(input: Input) = flow {
  myDao.get().collect {
    it.forEach {
      emit(it.data)
      delay(it.delayTime)
    }
  }
}

In my composable, I have something like this:

@Composable
fun MyComposable(input: Input) {
  val myViewModel: MyViewModel = viewModel()
  val data = myViewModel.myFunc(input).collectAsState()
  AnotherComposable(data = data.value)
}

The issue is: When I emit new data from my flow, compose collect the data and recompose itself because the state has been updated but due to this recomposition, it recall

myFunc

function, cancel the previous execution of the flow, collect data from database, emit values and loop a long time like this. How can I change my code to avoid this loop? There is any good practice for my usecase? Thanks in advance!

Upfront: Sry if this it the 101. time asking that question but I didn't find one for my use case. How can i fit the height of the Box around the "X"-Text to the height of its Parent (the Row with the gray background) The Problem is that fillHeight would fill the whole screen not just the Parent Code im Thread

does anyone have examples of architecture using compose? My entire app is using databinding + presenters (BaseObservable).. but now I change it to use viewmodels + livedata (compose views only) .. my old presenters describe all formatted values in variables.. and bind it to views.. now my composables use the data object to populate the view.. should I build a presenter/helper to format values for composables? how can I unit test it? Is it strange to use viewmodels for screen state and presenters for data formatting?

Does anyone have problem running the Jetpack Sample on Android Studio Arctic Fox 2020.3.1 Canary 3? Error is "The project is using an incompatible version (7.0.0-alpha02) of the Android Gradle plugin." and it cannot be resolved automatically by Android Studio.

Hello everyone, I'm trying a compose in a simple app, and I wonder what is a proper way to create ViewModels for composable screens. Atm there are two screens in an app, both of them in one Activity. Navigation is implemented with NavHost. Each screen should have its ViewModel. Should I create both ViewModels in my single Activity or may be create many Activities? Each Activity for one composable screen? I'm using the first approach now, but it can be problematic if for example I would need to pass a runtime arguments to second ViewModel and those arguments should come from first VM. The 'many-activities' approach doens't seem to be correct either, so what is a correct pattern for that?

I asked this in #compose-desktop yesterday but didn't get an answer. I think because it wasn't specifically a compose desktop question, but rather a compose question in general and better asked here. Detail are in the thread.

Looks like there's new AS Arctic Fox canary release (Canary 4). Has anyone used it and could share if everything is working fine?

Is there some easy way to achieve something like sticky header behavior? I have a scrollable tab row inside lazy column and the screen needs to stop scrolling when that tab row reaches the top of the screen but couldn’t find anything, that would resemble it

Can someone help me with this question: https://stackoverflow.com/questions/65605272/java-util-concurrentmodificationexception-compose-jetpack

how to change the status bar color? https://stackoverflow.com/questions/65610216/how-to-change-statusbar-color-in-jetpack-compose

@Composable
fun Main() {
    val state = remember { PaletteState(...) }
    Scaffold(
        topBar = { TopBar(onSave = { viewModel.save(state.toPalette()) } }
    ) {
        ColorWheel(state)
    }
}

@Composable
fun ColorWheel(state: PaletteState) {
    val colorWheel = rememeber { ColorWheel(...) }
    state.colors = colorWheel.getColors()

    Content(colorWheel)
}

I have a

state

that needs to be updated by a child composable. Is this the right way to do it?

Is there a technical reason Compose is not supported on stable A.S. versions?

Hi. How can add bold to a part of a text? (the

@nosferatu95

part

I'm experiencing an issue while using navigation-compose. I have a very simple setup.

HomePage

composable receives a

HomeViewModel

and a

HomeState

object (caller passes

state.value

) as its arguments.

HomePage

also hosts a NavHost which includes 2 different routes(

SettingsPage

,

ProfilePage

) When I pass a field from HomeState like

homeState.username

to one of the composables defined in NavHost, it does not work. State changes do not reflect on children pages of

HomePage

. However, carrying

homeViewModel

and

homeState

directly into

HomePage

composable, fixes this issue.

How To change ripple color of a Card?

Curious about drag and drop story in Compose, if any.

How to force text field to lose focus? I can't exit edit state after ime action etc

Is it possible to use layer-list drawable with Image?

vectorResource

is showing empty image

Is there any existing API through which we can achieve a flow-like layout, Where items shift to the next line if there is not enough space available?

Is there a way to show a Snackbar with a custom Text but using the default positioning of the Scaffold SnackbarHost? When using

scaffoldState.snackbarHostState.showSnackbar

you can only set a String, but I would like to set a Text so I can style the text using annotated string builder. When just including a Snackbar without using Scaffold it appears at the top of the screen, which is not what I want (I would like it at the bottom how it is supposed to be). Looks like the Scaffold/SnackbarHost is setting the correct positions.

how to make single line true in OutlinedTextField?

I'm using

SnapshotStateList<SnapshotStateList<MyObject>>

as a state but when I change it, the composables aren't getting recomposed. However, if I wrap it with a mutable state

MutableState<SnapshotStateList<SnapshotStateList<MyObject>>

it's working fine. Is this intended?

data class MyStateHolder(
    val name: MutableState<String>,
    val list: SnapshotStateList<SnapshotStateList<MyObject>>
)

var state = remember { MyStateHolder(...) }
...
MyComposable(onSomeEvent = { newList -> state = state.copy(list = newList) })
SomeOtherComposable(state.list) // not getting recomposed when I change state with a new list

I'm not sure but I think it works fine if I just change an item of the list as opposed to copying the whole state for a new list. This works fine:

data class MyStateHolder(
    val name: MutableState<String>,
    val list: MutableState<SnapshotStateList<SnapshotStateList<MyObject>>>
)

val state = remember { MyStateHolder(...) }
...
MyComposable(onSomeEvent = { newList -> state.list = newList })
SomeOtherComposable(state.list)

Hey! Has anyone else encountered issues with AndroidView and WebView? WebView is totally unresponsive.

AndroidView(
    viewBlock = ::WebView,
    modifier = Modifier.fillMaxSize()
) { webView ->
    with(webView) {
        settings.javaScriptEnabled = true
        webViewClient = WebViewClient()
        loadUrl("<https://google.com>")
    }
}

Hi. Using navigation:

NavHost(
                    navController = navController,
                    startDestination = "splash"
                ) {
                    composable(Navigation.ROUTE_SPLASH) { InitScreen(navController) }
                    composable(Navigation.ROUTE_LOGIN) { LoginScreen(navController) }
                    composable(Navigation.ROUTE_USER) { UserScreen(navController) }
                    composable(Navigation.ROUTE_GO_WALK) { GoWalkScreen(navController) }
                }

From splash I navigate to login or user..., but when I hit the back button of the devices it goes again to splash. How can avoid that, and if I'm at login, or User close the app when back button is hit

Is there a way to place items in column starting from the bottom? In my case I have a bottom bar and content that has to fill all the rest of the screen, but when I put them into column starting content the this content fullfil a whole screen and bottom bar is not visible, how to layout it properly? Use ConstraintLayout?

Is there any tutorial/manual/samples/docs on lazy components, like how

LazyVerticalGrid

works internally. I want to implement

LazyTileMap

(a big table of cells into which one looks through a small viewport, I need it for a game-like experience) which would only compose tiles that are visible and will allow scrolling and (optionally) zooming. But I’m currently lost in all these layout stuff, subcomposition, measurements, etc. What is the best guide into this? I’ve read Custom layouts section, but it seems it’s a tiny fraction of the underlying machinery.

Is there a reason

Layout

composable function has

content

parameter first and not last, so it would allow for container-like invocation?

So about the Keyboard not opening on tapping text fields, seems like I have reproductible scenarii: • it never happens if I tap exactly inside the text field • it always happens if I tap on the bound between the text field and the nearest component I think that’s why my workaround kinda work: it makes the safely tappable zone bigger It also seems like only the first time I tap a textfield matters: afterwards, it works or doesn’t work until I restart the app