https://kotlinlang.org logo
Join Slack
Powered by
# compose-android
  • f
    TextField data: StateFlow or Compose State? the new material textInput uses state but i am having issue using it with my viewModel especaily because prior to updating to it i was using SingleStateFlow to handle all my FormState add TextInputState breaks that flow
    z
    • 2
    • 1
  • g
    With Nav3, do we have an equivalent for a subgraph from Nav2? It was quite convenient for a feature module to have its own little navigation graph 🤔
    i
    s
    p
    • 4
    • 21
  • h
    Has anyone been able to get the 
    DialogScenes
    in Nav3 to dim the content behind them? Calling it doesn't seem to do it, and an older implementation using 
    (LocalView.current.parent as? DialogWindowProvider)?.window?.setDimAmount(.32f)
    doesn't seem to work anymore
  • n
    Copy code
    val uiState by viewModel.loginUiState.collectAsStateWithLifecycle()

var isOfferChecked by rememberSaveable { mutableStateOf(false) }
val isLoginButtonEnabled by remember {
    derivedStateOf {
        uiState.login.isNotBlank() && uiState.password.isNotBlank() && isOfferChecked
    }
}

  private var _loginUiState = MutableStateFlow(LoginUIState())
    val loginUiState: StateFlow<LoginUIState> = _loginUiState.asStateFlow()

Hello!

Is something wrong with using derivedStateOf here?
    h
    y
    • 3
    • 4
  • k
    Animation feature request? Or already possible? I've been trying to use one or a combination of the following: 
    animateFloatAsState
    , 
    AnimatedVisibility
    , 
    AnimatedContent
    . I need to display 
    ComposableA
    when 
    objectA
    is not null, 
    ComposableB
    when 
    objectB
    is not null, or neither when they are both null. If it were always just one or the other (if there were no "neither case") then 
    AnimatedContent
    would suit me just fine. The problem is, when I transition from either one of them visible to neither one visible, the visible one just disappears suddenly. But I need it to fade out. Is there a good, clean way to do this and I'm just not seeing it, or should I file a feature request?
    solved 1
    i
    • 2
    • 7
  • s
    Hey folks, I've got an incredibly simple Compose Multiplatform demo app for my library, and for some reason when I run the Android build for this demo, the network calls cause the UI to stutter, as if they're blocking the main thread. I'm making the network call using a 
    suspend fun
    in a 
    LaunchedEffect
    , and the client is backed by Ktor (via Ktorfit) and the OkHttp engine. As far as I can tell, these network calls shouldn't be blocking the main thread, but still the UI stutters when I scroll (triggering network calls as list items load). The problem only happens on Android. The demo on iOS, Desktop (JVM), macOS (native), JS, and WASM builds all have a totally smooth UI. I've tried: • Explicitly setting 
    <http://Dispatchers.IO|Dispatchers.IO>
    ◦ No change. Verified in Ktor source that the default is IO, so that makes sense. • Switching to the 
    CIO
    engine on the JVM target. ◦ No change, still stutters when loading data on Android • Running as profileable to debug further ◦ The problem disappears when I run a profileable build; scrolling is smooth while data loads, so it's unclear to me how to debug further or gather data on the issue You can repro by cloning https://github.com/PokeAPI/pokekotlin and running the demo app (the 
    :demo-app
    module) (x-post from #C0B8M7BUY)
    s
    a
    c
    • 4
    • 26
  • j
    Hi! I read in the documentation for rememberSaveable that one should be careful with the amount of data read/written since it could slow down the UI performances. It also said one should consider viewmodels instead. But as far as I know, SaveStateHandle also uses a read/write solution. Are there any significant differences between the two mechanisms or is it because viewmodels do the reading/writing in a different coroutine/thread?
    j
    j
    • 3
    • 2
  • d
    Anyone know if you can generate a codecoverage from snapshot tests? Im using jetpack compose screenhots and it should generate junit compatible xml reports.
    👀 1
  • t
    There seems to be a bug in navigation-compose 2.9.0 with lifecycle getting stuck at created which is affecting my app. This prevents me from upgrading to the latest version. Can anyone take a look, please? https://issuetracker.google.com/issues/421095236
  • z
    Greetings, I’m a little confused migrating our TV app to Compose. Is 
    flingBehaviour
    supposed to work in a focused-driven navigation ? It seems it doesn’t and I assume it is only working with gestures, right ? Is there a way to change the default spring animation when scrolling through a 
    LazyColumn
    using interaction sources / D_PAD ?
    t
    • 2
    • 1
  • c
    I've got a new team member that keeps defining composables with 
    MutableState<Bar>
    as arguments instead of just 
    Bar
    . I want to point to some documentation about this but I'm coming up empty. I could have sworn the android docs had something very clearly about this sort of pattern. Does anyone remember by chance?
    e
    w
    +2
    • 5
    • 15
  • c
    This is bad, right? I'm trying to come up with why it's bad... and my brain is just melting as to why someone would try to call setContent in a scope.launch{}. Sort of similar as the one before this... is there any docs on when to call setContent{}?
    h
    w
    +3
    • 6
    • 10
  • c
    Hi everyone, I'm working on an Android project using Jetpack Compose, and I'm encountering a random crash when launching the app. The crash log is:
    Copy code
    Unable to start activity ComponentInfo{com.example.myapp/.MainActivity}:  
java.lang.RuntimeException: Window couldn't find content container view
    This doesn't happen every time — it's random and seems to occur more frequently on cold starts or after backgrounding the app. Has anyone faced this issue before or know what might be causing it? Any help or guidance would be greatly appreciated. Thanks in advance!
    c
    • 2
    • 2
  • s
    If anyone else has recently updated to the 
    com.android.kotlin.multiplatform.library
    plugin and you’re experiencing a 
    MissingResourceException
    because your library includes resources, you need to explicitly opt in to resources with an experimental flag:
    Copy code
    kotlin {
  androidLibrary {
    experimentalProperties["android.experimental.kmp.enableAndroidResources"] = true
  }
}
    The migration guide doesn’t call this out but I found it mentioned in a YouTrack issue. Sharing here for viz.
  • s
    Hey everyone, I'm working on a large Android app in Jetpack Compose, and we've designed its navigation with a deep, tree-based hierarchy. To manage complexity and modularize, we've opted for a structure where certain "nodes" or feature areas in this tree actually contain their own 
    NavHost
    with an independent 
    NavController
    . For example, our main 
    NavHost
    might show 
    RootScreenA
    , which then composes a 
    FeatureANavHost
    (with 
    featureANavController
    ) internally. Similarly, 
    RootScreenB
    might compose 
    FeatureBNavHost
    (with 
    featureBNavController
    ). The challenge we're facing is how to achieve coordination or navigation between these separate 
    NavController
    instances. For instance, if an action occurs deep within `FeatureANavHost`'s stack, we might need to navigate to a specific screen within `FeatureBNavHost`'s stack. Currently, we're exploring methods like using a global event bus/coordinator (e.g., 
    SharedFlow
    or a simple object with callbacks accessible at a higher level) to "signal" navigation events from one independent `NavController`'s domain to another. The coordinator then explicitly calls 
    navigate()
    on the target 
    NavController
    . While this works, it feels like we're working against the core principles of Jetpack Compose Navigation, which typically advocates for a single 
    NavController
    for the entire app, leveraging nested 
    navigation { ... }
    blocks. My questions are: 1. Is this pattern of having multiple independent `NavHost`es (each with its own 
    NavController
    ) considered an anti-pattern for a single-activity app, even for modularity in a deep tree structure? 2. If it is, what are the recommended patterns or best practices to achieve similar modularity and hierarchical organization (especially with deep nesting like 10+ levels) while sticking to a single 
    NavController
    ? 3. If this multi-
    NavController
    approach can be viable under specific circumstances, what are the most robust ways to handle cross-controller "navigation" or coordination, and what are the major pitfalls to watch out for beyond basic isolation? Any insights, examples, or pointers to relevant architectural discussions would be greatly appreciated! Thanks in advance!
    d
    • 2
    • 5
  • n
    Hi everyone! How to fix this button issue? This content is ModalBottomSheet
    Copy code
    @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DigitalLoanApplicationResultBottomSheet(
    item: TotalStateEntity,
    employeeCode: String,
    onEmployeeCodeChanged: (String) -> Unit,
    sheetState: SheetState,
    isSheetOpen: (Boolean)-> Unit,
) {

    ModalBottomSheet(
        modifier = Modifier.fillMaxSize().statusBarsPadding(),
        sheetState = sheetState,
        containerColor = colorResource(R.color.colorSurfaceBackgroundPrimary),
        contentColor = colorResource(R.color.colorSurfaceBackgroundPrimary),
        onDismissRequest = {
            isSheetOpen.invoke(false)
        },
//        contentWindowInsets = BottomSheetDefaults.windowInsets,
        dragHandle = {
            Box(
                modifier = Modifier
                    .padding(8.dp)
                    .width(36.dp)
                    .height(5.dp)
                    .clip(RoundedCornerShape(50))
                    .background(colorResource(R.color.colorLabelsVibrantTertiary))
            )
        }
    ) {
       .....
        Column(
            modifier = Modifier
                .padding(top = 72.dp, start = 16.dp, end = 16.dp, bottom = 16.dp)
                .windowInsetsPadding(WindowInsets.statusBars)
                .imePadding(),
                // enable scrolling, // Add Status Bar Padding,
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Top
        ) {
            Box(
                modifier = Modifier
                    .size(80.dp)
                    .background(
                        color = bgColor,
                        shape = RoundedCornerShape(50)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Image(
                    painter = painterResource(icon),
                    contentDescription = "Checkmark",
                    colorFilter = ColorFilter.tint(tintColor),
                    modifier = Modifier.size(40.dp),
                )
            }
            Spacer(modifier = Modifier.height(24.dp))
            val formattedText = item.text?.replace("\\n", "\n").orEmpty()
            Text(
                text = formattedText,
                textAlign = TextAlign.Center,
                style = TextStyle(
                    color = colorResource(R.color.colorTextPrimary),
                    fontSize = 20.sp,
                    fontWeight = FontWeight.W600
                )
            )
            Spacer(modifier = Modifier.height(8.dp))
            if(item.subText.isNullOrEmpty().not()) {
                Text(
                    text = item.subText.orEmpty(),
                    style = TextStyle(
                        color = colorResource(R.color.colorTextSecondary),
                        fontSize = 13.sp,
                        fontWeight = FontWeight.W400
                    ),
                    textAlign = TextAlign.Center
                )
                Spacer(modifier = Modifier.height(8.dp))
            }
            Text(
                text = item.date.orEmpty(),
                style = TextStyle(
                    color = colorResource(R.color.colorTextSecondary),
                    fontSize = 13.sp,
                    fontWeight = FontWeight.W400
                ),
                textAlign = TextAlign.Center
            )

            Spacer(modifier = Modifier.weight(1f))
            Column(
                modifier = Modifier
                    .border(
                        width = 1.dp,
                        color = colorResource(R.color.colorSurfaceBorder),
                        shape = RoundedCornerShape(16.dp)
                    ).padding(20.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = stringResource(R.string.lbl_if_you_applied_branch_with_help_of_employee_specify_their_code),
                    style = TextStyle(
                        color = colorResource(R.color.colorTextSecondary),
                        fontSize = 14.sp,
                        fontWeight = FontWeight.W400
                    ),
                    textAlign = TextAlign.Center,
                    lineHeight = 20.sp
                )
                Spacer(modifier = Modifier.height(16.dp))
                AppInputCompose(
                    value = employeeCode,
                    onValueChange = {
                        onEmployeeCodeChanged.invoke(it)
                    },
                    imeAction = ImeAction.Done,
                    label = stringResource(R.string.lbl_employee_code),
                )
            }
            FilledButtonCompose(
                modifier = Modifier.padding(vertical = 16.dp),
                text = stringResource(R.string.title_close),
                onClick = {
                    isSheetOpen.invoke(false)
                }
            )
        }
    }
}
    🧵 6
    c
    • 2
    • 1
  • n
    telegram-cloud-photo-size-2-5390949865569251380-y.jpg,telegram-cloud-photo-size-2-5390949865569251381-y.jpg
    y
    • 2
    • 5
  • d
    How do I make a 1.dp thick Slider in Material3? I've searched all over (I'm using 1.4.0 alpha with expressive...) LIke this:
  • d
    image.png
    s
    c
    • 3
    • 10
  • s
    Hey there, I'm looking into making my UI accessible for TalkBack. So I checked out the docs and articles about it. But they mostly focus on what's technically possible (semantics modifier, etc) and not what's sensible. I found very little information on what I actually need to achieve: what does a TalkBack user expect to hear? How much "explanation" should a contentDescription do? Are there commonly used methods to make it easier to understand the UI? Where would you use accessibility actions? Stuff like that. You guys know of any resources that provide this kind of info?
    c
    • 2
    • 5
  • a
    Hey Guys, I am trying to place N LazyColumns in a row to create a table structure and I want a common vertical scroll instead of individual scroll for every LazyColumn. Has anyone achieved a common scroll for two or more LazyColumns? I tried implementing it by observing firstVisibleItemIndex and firstVisibleItemScrollOffset and then scroll the other columns. It is working but not so good. It is completely glitchy and there is a definite lag in scroll of other columns. Let me know of you have worked or seen something like this. Thanks.
    c
    o
    • 3
    • 5
  • r
    Hi! I’m using 
    TextField
    within the bottom sheet from 
    BottomSheetScaffold
    , but I’m not able to use 
    .imePadding()
    to display the 
    TextField
    on top of the keyboard. Any suggestion? I tried to place the 
    .imePadding()
    to various modifiers, but no success.
    j
    • 2
    • 1
  • r
    Hello everyone, I was wondering if there is a way in Compose Android to automatically assign a 
    testTag
    to every component of the app without having to add it manually, be it with a ksp plugin or else. I think this should not be possible due to the nature of Compose being declarative in code, but I might not be aware of a hidden API that would allow that
    o
    • 2
    • 5
  • a
    Anyone else having issues with 
    ListDetailPaneScaffold
    and 
    SecondaryTabRow
    on the latest Material3/Material3Adaptive libraries? I’m getting a crash when navigating from the 
    listPane
    to the 
    detailPane
    .
    • 1
    • 2
  • m
    Is there any need to allow Android to destroy and recreate the activity in a single activity compose setup? Preventing it with the configChanges option in the manifest seems to work just fine. Compose rebuilds the screen correctly when, for example, the orientation changes. What are the downsides to this?
    s
    k
    +3
    • 6
    • 11
  • a
    Hey guys, Anyone knows how to observe after a particular composable method is rendered? Before render and disposal can be obtained using respective side effects. But I can't find anything to observe it after render.
  • a
    Hello folks, Anyone has idea why 
    shadow
    modifier doesn't render properly if parent composable is a 
    Surface
    ? If it is under 
    Box
    , it is rendered correctly. Couldn't find in the documentation. In the attached screenshots, notice the sharp edge if parent is 
    Surface
    . TIA Snippet in 🧵
    s
    • 2
    • 2
  • t
    Hi, I am exploring 
    Navigation3
    library right now. I have come across a scenario where we need to scope a 
    ViewModel
    to the previous screen Current we are using compose-destinations which is built on top of Jetpack Navigation library We scope a 
    ViewModel
    to the previous destination like this. Can this is be achieved in 
    Navigation3
    ?
    Copy code
    @Composable
@Destination(style = DestinationStyleBottomSheet::class)
fun ColumnScope.SalesStaffBottomSheet(
    navigator: DestinationsNavigator,
    navBackStackEntry: NavBackStackEntry,
    navController: NavController,
    result: ResultBackNavigator<SalesStaffDetails>,
) {
    val backStack = remember(navBackStackEntry) {
        navController.getBackStackEntry(AnalyticsMobileDestination.route)
    }
    val viewModel = hiltViewModel<AnalyticsViewModel>(backStack)

    val uiState by viewModel.analyticsUiState.collectAsStateWithLifecycle()
    SalesStaffDialogBottomSheet(
        uiState = uiState,
        onSalesStaffClick = { result.navigateBack(it) },
        onCloseClick = { navigator.popBackStack() }
    )
}
    Slack Conversation
    • 1
    • 1
  • b
    The Animation Quick Guide has the following for repeating animations:
    Use 
    rememberInfiniteTransition
    with an 
    infiniteRepeatable
    animationSpec
    to continuously repeat your animation. Change 
    RepeatModes
    to specify how it should go back and forth.
    Use 
    finiteRepeatable
    to repeat a set number of times.
    But I can't find a 
    finiteRepeatable
    api anywhere. Am I missing something?
    e
    c
    • 3
    • 4
  • r
    I'm trying to use text auto size api to scale text in the TopAppBar only if there is room. I noticed that if the font is scaled down, it's line height is not auto sized. Is that a bug or by design. Because it's causing issues where the text when scaled down has an excessive line height
    • 1
    • 4