What is the correct way to combine several `StateFlow`s and display the resulting value in Compose?

Hi all ! I'm looking for some ressource or explanation to understand why Compose use function instead of class ? I've listened this Android Leaks episode, where Leland and Romain explain a little bit about the starting point of Compose (at approximately 11 minutes). They say that at the beginning of Compose, they first decided to declare component as classes. I'm really curious to find an example of what it looked like at that time (when using classe). Also I have trouble to imagine what was the extra rules they had to add to declare how the class should behaved and why it started to become less and less a good approach to use classes. Thanks for your help 🙏

When we say that something "enters the composition" or "leaves the composition", what does this mean exactly? I noticed that I've started to think about

@Composable

functions as objects in this regard, but that's not true, is it? A function itself doesn't have anything to do with composition lifecycle: only its effects do. Is there some good mental model to think about this?

I’m facing this issue. When i click on a

textField

inside

LazyColumn

, its not work. I’m using

adjustResize

in manifest.

I have an app that uses Scaffold at Activity level that has a bottom bar (bottom nav). Now there is one screen on the bottom nav that needs to display a non-dismissible (non-dismissible being important here) bottom sheet. The problem is that if I put a BottomSheetScaffold at “Screen” level, that won’t be aware of the paddings/insets (e.g. bottom bar) from the Activity Scaffold. This obviously means that my bottom nav is covering some of the sheet content. Is there a good way to handle this or do I just need to hardcode (I hate it already) some bottom padding to my sheet content?

I've got a simple example of a button that I want to be "toggleable". So when it's off it's an outlined button, but when it's "on" its filled with my companies primary color. I have it working but it kinda feels unnatural + the ripple into the background change also adds to how unnatural it looks. Any ideas?

OutlinedButton(
    modifier = Modifier.fillMaxWidth().heightIn(min = 48.dp),
    colors =
        ButtonDefaults.outlinedButtonColors(
            backgroundColor = if (toggle) CompanyPrimaryColor else Color.White))

Hello all, I am running into an issue when trying to create a MapView in compose. I am going to need to cluster my map markers, as such I need to use MapView instead of the new GoogleMap composable as it does not support clustering. When I navigate away from the map and then back to the map my markers do not show. code in reply…

Does anyone know if there’s a limit to the # of arguments in a data class? We have a custom theme that has like 160 or so different colors (technically it’s like 40 tokens, but each has a value for base, hover, focus and down), and now i’m getting this error at runtime:

Rejecting invocation, expected 79 argument registers, method signature has 81 or more

If i group the sets of 4 into their own data classes and pass that in instead of as 4 separate parameters, things seem to start working again. What’s odd is that there’s actually 166 parameters to the constructor (yeah, i know, blame the design team for creating so many color tokens)

Anyone using

@ExperimentalMaterialApi

in product apps? I need to use

ModalBottomSheetLayout

or

BottomSheetScaffold

, but I’m afraid because it’s ExperimentalMaterialApi. I need reviews from people who have been using this. Additionally, does the meaning of

@ExperimentalMaterialApi

mean that the API can be mutable as well as error-prone?

Anyone have a good idea on how to propagate the below positionInParent() from a specific composeable up through e.g. 7-8 levels of parents, so you would know how a given child of child of… is positioned according to any level parent.

Modifier.onGloballyPositioned {
it.positionInParent()

I have a UI where I’m showing a list of items in a

Column

and if several consecutive items are the same, they are “grouped” into one row. The user can choose to “ungroup” one item from the group, and then it appears in its own row. I’m trying to animate this process by having the ungrouped row slide downwards from the “group” row. I’ve successfully used

AnimatedVisibility

on the row that appears, but this looks bad because only that row is animated - the rest of the rows below it “jump” to position. Is there no animation facility that takes care of animating the entire layout during a transition?

I recently tried to do an analysis of

composable

based on chris’s article, and then I found out that painter is unstable, resulting in some

composable

being non-skippable, Why can’t add @Immutable or @Stable to painter and How to change composable with a painter parameter to skippable?

restartable scheme("[androidx.compose.ui.UiComposable]") fun NormalImage(
  unstable painter: Painter
  stable contentDescription: String?
  stable modifier: Modifier? = @static Companion
  stable tint: Color = @dynamic LocalContentColor.current
)

I’ve encountered what sounds like the same issue in a layout with a collapsing toolbar style behaviour. Dragging a lazyColumn uses a NestedScrollConnection to calculate an offset and change the height of the toolbar above. However, when a fling is performed that causes the toolbar to change in height and released as the view’s height is changing the NestedScrollConnection receives a high velocity fling in the opposite direction. My hypothesis is that the fling coordinates being processed by the LazyColumn are not being treated as absolute coords relative to the screen and so as the LazyColumn’s origin moves within its parent the gesture handler incorrectly generates another fling in the opposite direction. (code in thread)

AndroidView

’s

factory

lambda will always be called twice when used in

movableContentOf

. Does anyone know why?

val content = movableContentOf {
    AndroidView(factory = { context ->
        SomeView(context)
    })
}
val content2 = movableContentOf {
    // content2
}
val isLandscape =
    LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
if (!isLandscape) Column {
    content()
    content2()
} else Row {
    content()
    content2()
}

If I’m drawing a circle in compose, and the top is getting clipped because of the bounds of the parent, is there an easy solution to allow the child to draw outside the bounds of the parent?

Compose UI doesn't clip to parents by default, check the container and modifiers you're using

My app uses camera2 and I map the CameraCharacteristics for the camera currently in use, in a Flow that I collect in a screen in my app. I am routinely getting this exception (in 🧵 )

What is the equivalent of

save/restore

in Compose Canvas (or DrawingScope)?

My newVm keeps getting it's

init {}

block. My first two thoughts were to either use a

remember {}

or a LaunchedEffect. But both don't work. Any ideas?

BottomSheetScaffold(
    scaffoldState = complexBottomSheetState,
    sheetContent = {
          Box(Modifier.fillMaxWidth().height(200.dp)
          ) {
            Log.e("ABC", "creating new VM?")
            val newVm = hiltViewModel<ComplexBottomSheetViewModel>()
            MyComplexBottomSheet(viewModel = newVm)
          }
    },

Suggestions on how to handle over 2 states of validity for a field? Valid/Maybe/Invalid? Currently the default

TextField

takes

isError: Boolean

and I'm using my

Maybe

state as a valid state with a small context message. I'm trying to not work around this in a way that I think is weird like... replacing the

colors: TextFieldColors

, but maybe that's actually a better way to do it than I'm trying to hint at?

On 1.2.0-alpha08, noticing that the `OutlinedTextField`’s label is offset to the right. bug or expected? 🧵

Hi was playing around with compose navigation when I noticed that when the screen animates I see a white background appear before the actual screen. In the video recording I have slowed the animation to make it more prominent. My screens are just a scaffold with a text field in it. I am running 1.2.0-beta02 for compose and using material3 alpha, although saw it with material compose also. Does anyone know what that white screen is and if it's just something that should be filed ? you can find a sample of the code here https://github.com/abhishekdewan101/ListMaker

Hey all, I just noticed that soft hyphens do not work. Is there anything similar to setHyphenationFrequency existing or planned for compose. Or any other workaround? If I use a zero width space the word breaks correctly but without a hyphen obviously.

do you know when/if the coupling between Compose and Kotlin version will end?

I've noticed that

TextField

param

placeholder

gets called many times when the

placeholder

in question gets rendered, it gets re-called many many times (18-24, not sure the criteria). is this simply something that just is, or is this a bug/avoidable? i have not been able to find much information on it

When using compose version 1.2.0-beta03, The preview is having issues, Even after successful build it showing "Project needs to be compiled". Works fine when running in app in emulator and device, Any help?

tl;dr: Is there a way to hook into the native text line-breaking algorithm (if there is one)? I created a Composable for handling HTML ruby text. It's basically markup that can be used to add additional information to text. It's often used for providing readings in Japanese for example. For that the text is displayed above the Japanese characters (see image). My composable if made out of

RubyText

that contains text and optionally a ruby text that dictate it's reading. These are packed inside a

FlowRow

.The problem I am facing is that I can't control line breaking properly this way. If there is a long slice of text without reading annotations they are packed into the same

RubyText

composable. Thus they cannot break in the middle. Is there a way to hook into the native line-breaking and take advantage of it? Or do I have to re-implement it myself to make my rubied text work properly?

@Composable
fun RubyText(
    text: String,
    ruby: String? = null,
    rubyVisible: Boolean = true,
    style: TextStyle = TextStyle.Default,
) {
    val rubyFontSize = LocalTextStyle.current.fontSize / 2
    val boxHeight = rubyFontSize.toDp()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Box(modifier = Modifier.requiredHeight(boxHeight + 3.dp)) {
            ruby?.let {
                if (rubyVisible) {
                    Text(text = it, style = TextStyle(fontSize = rubyFontSize))
                }
            }
        }
        Text(text = text, style = style)
    }
}

// This renders the second image (nside of the thread).
fun example2() {
        RubyText(text = "このルールを")
        RubyText(text = "守", ruby = "まも")
        RubyText(text = "るらない")
        RubyText(text = "人", ruby = "ひと")
        RubyText(text = "は")
        RubyText(text = "旅行", ruby = "りょこう")
        RubyText(text = "ができなくなることもあります。")
}

According to the rememberSaveable’s documentation, it says: “If you use it with types which can be stored inside the Bundle then it will be saved and restored automatically using autoSaver, ...“. So, I was expecting this code can survive during the configuration changes but it doesn’t. Am I missing something?

var foo = rememberSaveable { false }

I’m attempting to make a layout such that it is a row if the enclosed children will fit in the horizontal space given to the composable. If not, I wanted to swap to a column where each child is assigned a minWidth of the constrained horizontal space. I was able to get this working with a

SubcomposeLayout

by: 1. Call

subcompose

with the passed in width constraints 2. If the resulting placeables are too wide, call

subcompose

with constraints that has a minWidth of what was passed to the SubcomposeLayout. 3. I then only place either the horizontal or vertical placeables. The one problem I’m having with this approach is the semantics tree still knows about the horizontal subcomposition even though I never placed them. Is there a way to remove them or perhaps another way to approach this problem?