Some updates on the compose rewrite of an app from work 🤭🤭

Trying to draw

Text

with a horizontal gradient. After much trial and error, found that this works only if I specify

alpha = 0.99f

in the

graphicsLayer

(output in 🧵) Can someone explain why? 😖

Text(
    text = "$ 20",
    modifier = Modifier.graphicsLayer(alpha = 0.99f)
        .drawWithCache {
            val brush = Brush.horizontalGradient(listOf(StartColor, EndColor))
            onDrawWithContent {
                drawContent()
                drawRect(brush, blendMode = BlendMode.SrcAtop)
            }
        },
)

How do we do real time updates with jetpack compose? Example updating stock price of list of stocks in a list. Do we need to convert list to mutable list and change price each time we get a new price or is there any other ? Thanks in advance

Is there any way to see compose generated code in IDE?

I'm looking at using

VisualTransformation

but the documentation for

OffsetMapping

is not clear. They value returned from

originalToTransformed

should be increasing or stay the same. So if I remove the second character the value would stay 0. What should I do if I remove the first character. Is that still 0 or is it -1?

I’m trying to create some UI in compose which I can’t get my head around how to do it, more in thread. 🧵

Hello everyone, I have a question, I am uploading the version of compose to 1.1.0 but it is generating errors when compiling with compileSdkVersion 30

The minCompileSdk (31) specified in a
dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
is greater than this module's compileSdkVersion (android-30).
Dependency: androidx.compose.ui:ui-tooling:1.1.0-rc01.
AAR metadata file: /Users/mac/.gradle/caches/transforms-3/b8977160c1c83bc23bb78b40a0700549/transformed/jetified-ui-tooling-1.1.0-rc01/META-INF/com/android/build/gradle/aar-metadata.properties.

If I am doing a

Layout {}

which may accept arbitrary composable slots, and I want to be able to add a modifier to them to add a

layoutId

how would I go around doing that?

Using compose on Android and I can not find this in the docs any where. Had an issue where a

Text

composable was not getting

MaterialTheme

colors unless it is also wrapped in a

Scaffold

as shown below. Does that sound right that you need

Scaffold

with the

MaterialTheme

to get the colors to work or do i have a config issue somewhere?

// Does not get theme colors
MaterialTheme { Text("test") }

// Gets theme colors
MaterialTheme { Scaffold { Text("Test") } }

Hi All. Looking to to create a Lazy Column where the header scrolls with the content, but there is a border only around the actual items themselves. I’ve seen some stuff about using drawWithContent and clipping, but this seems like a large amount of effort to accomplish a basic pattern.

Hey all, I have this weird problem that I think might be a bug but I can't be sure. I have this

BasicTextField

that has a visual transformation applied to it that transforms

# Title

to

Title

and changes the size of the text (markdown). It constructs a

TransformedText

object with an

OffsetMapping

to account for the 2 characters that have been removed. However there seems to be a bug because when I type in

# Title

it gets transformed to

Title

in the text field however when I move the cursor using the arrow keys to the end of the line the application crashes with an out of bounds error. I traced this down and it looks like its an issue with the

isLtr()

function as it uses

selection.end

without performing a

OffsetMapping

conversion on it.

// TextPreparedSelection.kt

    private fun isLtr(): Boolean {
        val direction = layoutResult?.getParagraphDirection(selection.end)
        return direction != ResolvedTextDirection.Rtl
    }

Any ideas on how I could resolve this issue?

say i have a column like this:

Column(Modifier.wrapContentHeight()) {
    Box(Modifier.fillMaxWidth().weight(1f).background(Color.Red)) { ... }
    Box(Modifier.fillMaxWidth().height(100.dp).background(Color.Blue)) { ... }
}

i was expecting the

Modifier.wrapContentHeight()

to compress the

weight(1f)

down such that both of the inner boxes would simply wrap their own content (since this was how it worked with vertical linear layouts). but i found that the

weight(1f)

still caused the

Column

to expand to fill its maximum height regardless. basically i’m wondering if there is a way for me to control whether the

weight(1f)

expands or not simply by passing a modifier to the parent `Column`… my current workaround is adding a

fillMaxHeight: Boolean

parameter to my composable function to decide whether or not the

weight(1f)

is applied but it felt kind of dirty

Considering a case of

LazyColumn

- let's say i have a conditional statement inside my composable - which can end up making a structural change

if(loading) {
 // ShowLoader 
} else { 
  LazyColumn {}
}

Every-time there is a

State<>

mutation of

loading

being

false

or

true

compose compiler will wipe away(remove it from the composition tree) and re-add it again and

LazyColumn

can end up composing it's all items again. One simple scenario could be - when clicked on item to delete •

isLoading

is set to true, removing

LazyColumn

from the composition tree • once any item is updated (say a server call!), when

isLoading

is set to false,

LazyColumn

gets added again This is mostly an anti-pattern i believe and i am ending up losing the

LazyColumn

Positional with key Memoization

capability in this case and in scenarios like this, this should not be part of a conditional logic?

How can we scroll to a specific composable in a

Column

? For example, upon TextField error, or upon focusing on one. I’m not sure if we really have to manually compute the pixels to achieve this. Wasn’t able to find existing info here.

Hi. I am trying to implement a screen with multiple tabs (accompanist - pager) so i did something like this:

@Composable
fun Screen() {
  val screenViewModel: ScreenViewModel = hiltViewModel()
  val pages by screenViewModel.pages.collectAsState()
  val pagerState = rememberPagerState(pageCount = pages.size)

  HorizontalPager(state = pagerState) { index ->
    Column(modifier = Modifier.fillMaxWidth()) {
      // this viewmodel should be created with data from the page object (e.g. id)
      val pagerViewModel: PagerViewModel = hiltViewModel() // actual: same viewmodel on every page -> expected: every page get´s its own viewmodel
      ...
    }
  }
}

Is it possible to get a ViewModel per page via hilt or should i use a complete different approach than ViewModels in this case?

Working with a custom

Layout{}

I wanted to have all children have the exact same height. But I only get once chance to measure all of them and giving them constraints. Optimally I’d like to get a measurement of all of them, get the max height among them and have them all measure with the constraints to exactly match that height. This feels like one of the things that intrinsic layouts should be achieving, but I am not quite sure how to use intrinsics in my custom

Layout {}

measurePolicy

. Any ideas of what I’m missing or an example I could look at? Currently starting off by doing something like but I can’t quite find what I want to do instead:

Layout(
    content = content
) { measurables, constraints ->
    val width = (constraints.maxWidth / 2) - (horizontalSpacingInPx / 2) // I am placing 2 side by side
    val height = measurables.maxOf { it.maxIntrinsicHeight(width) } // What would I do here instead
    val placeables = measurables.map { measurable ->
        val halfWidthAndIntrinsicMaxHeightConstraint = constraints.copy(
            minHeight = height,
            maxHeight = height,
            maxWidth = width,
            minWidth = width
        )
        measurable.measure(halfWidthAndIntrinsicMaxHeightConstraint)
    }

So i’m working with a layout that is drawing a custom progress ring animation. I’m having trouble figuring out how to give it an intrinsic size so that until a specific size is give, or it’s give a fillMaxWidth/FillMaxSize, it will use that size:

BoxWithConstraints(
        modifier = modifier
            .defaultMinSize(RingDefaultMinSize, RingDefaultMinSize)
            .aspectRatio(RingAspectRatio)
            .padding(RingStrokeWidthOffset),
        contentAlignment = Alignment.Center
    ) {
        Canvas(modifier = Modifier.size(constraints.maxWidth.dp, constraints.maxHeight.dp)) {
            drawArc(
                color = ringColor,
                startAngle = rotation.value,
                sweepAngle = -1f * sweepAngle.value,
                useCenter = false,
                style = Stroke(width = RingStrokeWidth.toPx(), cap = StrokeCap.Round)
            )
        }
    }

The problem is that when i don’t specify any size, the Box is filling it’s entire parent. I know it’s due to my use of contraints.maxWidth, but i’m unsure how to properly figure out the size of the canvas based on the constraints.

about LazyPagingItems with

Pager.flow.cachedIn(viewModelScope)

I'm losing the loaded data when the last load State is Error even if I cache the flow to the Viewmodel. Let's say data is already rendered, I refresh and let it fail (turn off wifi). I go to the next screen. Now when coming back, previously loaded data is now gone and the latest loads state is error. If the latest loadstate is not error then the data is retained as I wanted. My requirement is to not clear the data if it failed to refresh. but my issue is that I lose it when navigating to another screen and going back. Is it a bug or is this expected? Also not sure if this is a Compose or Paging issue.

Reposting for visibility: is there a way to know what triggered a re-compose? If you have a complex page with many states, it gets really hard to figure out what triggered it.

With RTL, does automirror work for vector drawables being painted in compose? I’m not seeing it forcing a config change on device, or using the LocalLayoutDirection local

Hi all! In our team we are implementing the first feature with Compose. There are ui End to End tests practice in project. When there are compose and view in one Activity we have problem with switching between Espresso and Compose matchers. It looks like compose keeps main thread.

androidx.test.espresso.IdlingResourceTimeoutException: Wait for [Compose-Espresso link] to become idle timed out

I created simple project to reproduce issues: https://github.com/Maksim-Novikov/ComposeUiTestsBug Just run EspressoComposeLinkTest. In real project problems arise when we go back from compose to view, but In sample it begins earlier. I found the only one similar problem, but it associated with infinity animation https://issuetracker.google.com/issues/160259537

I have to execute async operations on button clicks. May be the following extension considered a bad practice?

fun Modifier.clickable(
    context: CoroutineContext,
    enabled: Boolean = true,
    onClick: suspend CoroutineScope.() -> Unit
) = composed {
    val coroutineScope = rememberCoroutineScope()
    clickable(enabled = enabled) { coroutineScope.launch(context = context, block = onClick) }
}

Drag and Drop in Compose, the doc cover the dragging part but say nothing about the "dropping" part. Say you have an active area where you want to drop another content and you want to check if the item being dragged is on top of it.. Is there any better / recommended way than using

Modifier.onGloballyPositioned

on the source / target layouts and the drag offset to check if they are within bounds? Any API that makes the process easier? Maybe something like Flutter AnchorStrategy / DragTarget?

Is it possible to use any version of Compose with kotlin

1.6.20

?

This message was deleted.

Compose 1.2.0-alpha05 released today • Probably the biggest change is that

includeFontPadding

is turned off by default. Most of your layouts will look slightly different, but this is a welcome change IMO. Almost 18 months in the making =) • "Hooray! Compose animation now supports 'Animator duration scale' setting from Developer Options." • Bunch of things related to lazy grids 1.

LazyVerticalGrid

and

LazyHorizontalGrid

are now stable 2.

LazyGridItemInfo.Unknown

was replaced with separate

LazyGridItemInfo.UnknownRow

and

LazyGridItemInfo.UnknownColumn

3.`LazyVerticalGrid`/`LazyHorizontalGrid` and all related apis were moved into

.grid

subpackage. Please update your imports from

androidx.compose.foundation.lazy

to

androidx.compose.foundation.lazy.grid

•

WindowInsets.toString()

will now show the correct values. Read more here • Updated to use Kotlinx coroutines 1.6.0 • Bunch of things regarding focus 1. Added FocusGroup modifier 2. Modifier.onFocusedBoundsChanged Read more here • Update TextFieldsInScrollableDemo to enable toggling setDecorFitsSystemWindows. (happy to see more progress on text fields in a scrollable. I think we're getting close Zach!) •

TextToolbar

now takes lambda arguments instead of

ActionCallback

. • Updated nullability in core and appcompat to match Tiramisu DP2 •

ComposeContentTestRule.setContent

will now throw an

IllegalStateException

if you try to set content when there already is content.

Hi all, quick question, tried to load downloadable fonts set on xml in the family font and got an error, leaving the stacktrace on the thread…

hi, just downloaded

Android Studio Dolphin Canary 5

and trying to use with

Compose 1.2.0-alpha05

, but receiving this ambiguous compile-time error:

Is there a build in way to achieve this (showing the error under the field, recommended by the material guidelines) with

OutlinedTextField

I did not manage to find one?