I am having an issue with the new Compose version (0.1.0-dev15) in Android Studio. My project builds fine, but Studio shows warnings near things such as `MaterialTheme.colors.surface`:

'surface: Color' is only available since Kotlin 1.4 and cannot be used in Kotlin 1.3

I have also set the "Update channel" in Languages & Frameworks > Kotlin (Android Studio settings) to "Early Access Preview 1.4.x".

Hey, does compose provide functionality to "attach"/"detach" layout nodes? Basic example is routing: we have a list with some heavy animation running on screen -> open detail of list item on top. In that case it will be great to not draw the background screen anymore but keep scroll state of the list. Currently two solutions I've seen is to either draw screens on top of each other (quite inefficient), or just switch composables completely (doesn't keep the state). Maybe there are some interesting methods of making pieces of composition detached (not drawing them) while keeping the state?

I need to add badge on icon image. Is there any example to do that.

Basically I would like to animate the rect of the root Composable till it reaches its full size, any pointers? 😊

Hey everyone, I’m trying to understand why a recomposition occurs. As a dumb example, let’s say I have a

Foobar

composable displaying

Foo

and

Bar

children composables.

Foobar

has two state variables.

@Composable
fun Foobar(fooFlow: StateFlow<Long>, barFlow: StateFlow<Long>) {
    val foo by fooFlow.collectAsState()
    val bar by barFlow.collectAsState()

    Column {
        Foo(foo)
        Bar(bar)
    }
}

@Composable
fun Foo(value: Long) {
    Text("Foo $value")
}

@Composable
fun Bar(value: Long) {
    Text("Bar $value")
}

Every time either

fooFlow

or

barFlow

receives a new value, both

Foo

and

Bar

are recomposed (onCommit is triggered) . I was hoping that only the composable using the flow value would be refreshed. The only solution I see is to pass each StateFlow down to the children. I’m I correct ?

How to you keep the value of

state { ... }

across configuration changes?

Hi. What you'd use to get the position of a composable on screen relative to the parent? as in: view.top / view.bottom etc.

Layout

?

Has anyone noticed instability after updating to dev15? My app starts crashing silently while using FilledTextField.

2020-07-24 16:05:59.308 582-659/system_process W/InputDispatcher: channel '5963efc .ui.MainActivity (server)' ~ Consumer closed input channel or an error occurred.  events=0x9
2020-07-24 16:05:59.308 582-659/system_process E/InputDispatcher: channel '5963efc ui.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!

is there a way to modfiy CircularProgressIndicator innerPadding and the color of the remaining progress?

I'm getting this weird error while trying to compile

Comparison of incompatible enums 'Direction' and '[ERROR : Direction.LEFT]' is always unsuccessful

Android Studio doesn't show any errors though. The offending line is #4

.dragGestureFilter(
        dragObserver = dragObserver,
        canDrag = {
            it == Direction.LEFT || it == Direction.RIGHT
        }
)

Anyone have a good example showing a Data Class -> ViewModel -> Composable View with a FilledTextField (or any text field for that matter)? Most example projects don’t show data input…. Thanks in advance

I’m running into issues with the latest version of Android Studio and the Kotlin 1.4-M3 plugin. Is this expected? The build compiles with no issues, it’s just really driving me up the wall to see so many red squiggles

Is it possible to use Compose with a non androidx project. I mean, I'm contributing to a project (Koin to be specific) and I'd like to add a module running compose to add some feature to the whole project, but compose complains that my project is not androidx I should add:

android.useAndroidX=true
android.enableJetifier=true

To the gradle.properties, but it would impact imports in the entire project 😞 I've tried to add a gradle.properties for the specific module, but it didn't work

Is it possible to use a custom font ( a ttf file I added to the font res directory) with Jetpack Text()? I have failed so far to do so!

Seem to have a bug with OutlinedTextField in Popups - it crashes after a couple of key strokes (dev15)

A simple gridview implementation with compose, anyone?

Another question, why is it that paddings on

Card

's are somehow showing as margins? Am I getting it wrong?

I'm updating from

dev14

->

dev15

and I got the following error: Any ideas?

Hello wonderful people 👋🏼 I started collecting and answering some “Frequently Asked Questions” about Compose. I would love to know which other questions I should be adding to this list. You can find it here 👉🏼 https://JetpackCompose.app/faq. Also if you think any information is incorrect, please let me know!

To avoid too much indentation, I write my code like this,

@Composable
fun Widget() = Column(modifier = Modifier.fillMaxSize()) {
  Text(
    text = "First item",
    modifier = Modifier.padding(16.dp)
  )
  Text(
    text = "Second item",
    modifier = Modifier.padding(16.dp)
  )
  Text(
    text = "Third item",
    modifier = Modifier.padding(16.dp)
  )
}

Is there a caveat?

So I found that you could create a

ViewModel

in

Compose

using

viewModel()

composable function. I was wondering how to scope these

ViewModel

similar to how

ViewModel

could be scoped to

Activity

/

Fragment

or

NavGraph

? Is this possible to do in

Compose

?

Lets say I have this code:

@Composable
fun Greetings() {
    val state = state { "Hello" }
    Column {
        Text(text = state.value)
        Button(onClick = {
            state.value = "Hello"
        }) {
            Text(text = "Greet!")
        }
    }
}

Notice that the initial value of state is "Hello" and whenever the Button is clicked, it sets the value of the state to the same value (

state.value = "Hello"

). Does this trigger recomposition? or recomposition is only triggered when

state

is set with a different value? Also is there a hook or callback I could attach to see how recomposition works in

compose

?

"Frames have been replaced by snapshots" What does this mean? I didn't see anything about this in the release notes.

What’s the best way to have a button or anything just centered inside its parent (which is the

bodyContent

of Scaffold in my case) ?

Is anyone else having issues with interactive preview generating a preview? It constantly says "The project needs to be compiled for the preview to be displayed" or that it needs to be refreshed

I wonder, is it possible to do something like this?

@Composable suspend fun askQuestion() : Answer {
   return suspendCoroutine { continuation -> 
      QuestionComponent(onAnswer = {answer -> continuation.resume(answer)})
   }
}

The problem is that if I do something like this

setContent {
    runBlocking { askQuestion() }
}

It won't compile because "@Composable invocations can only happen from the context of a @Composable function"

I used the Google icon with colors as SVG but using it as

Icon(vectorResource(id = R.drawable.ic_google))

shows it as a black rectangle, I guess its the icon trying to tint it? Here’s the SVG:

<vector xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:width="23dp"
    android:height="23dp"
    android:viewportWidth="46"
    android:viewportHeight="46">
    <path
        android:fillColor="#4285F4"
        android:fillType="evenOdd"
        android:pathData="M5,3L41,3A2,2 0,0 1,43 5L43,41A2,2 0,0 1,41 43L5,43A2,2 0,0 1,3 41L3,5A2,2 0,0 1,5 3z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#FFFFFF"
        android:fillType="evenOdd"
        android:pathData="M5,4L41,4A1,1 0,0 1,42 5L42,41A1,1 0,0 1,41 42L5,42A1,1 0,0 1,4 41L4,5A1,1 0,0 1,5 4z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#4285F4"
        android:fillType="evenOdd"
        android:pathData="M31.64,23.2045C31.64,22.5664 31.5827,21.9527 31.4764,21.3636L23,21.3636L23,24.845L27.8436,24.845C27.635,25.97 27.0009,26.9232 26.0477,27.5614L26.0477,29.8195L28.9564,29.8195C30.6582,28.2527 31.64,25.9455 31.64,23.2045L31.64,23.2045Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#34A853"
        android:fillType="evenOdd"
        android:pathData="M23,32C25.43,32 27.4673,31.1941 28.9564,29.8195L26.0477,27.5614C25.2418,28.1014 24.2109,28.4205 23,28.4205C20.6559,28.4205 18.6718,26.8373 17.9641,24.71L14.9573,24.71L14.9573,27.0418C16.4382,29.9832 19.4818,32 23,32L23,32Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#FBBC05"
        android:fillType="evenOdd"
        android:pathData="M17.9641,24.71C17.7841,24.17 17.6818,23.5932 17.6818,23C17.6818,22.4068 17.7841,21.83 17.9641,21.29L17.9641,18.9582L14.9573,18.9582C14.3477,20.1732 14,21.5477 14,23C14,24.4523 14.3477,25.8268 14.9573,27.0418L17.9641,24.71L17.9641,24.71Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#EA4335"
        android:fillType="evenOdd"
        android:pathData="M23,17.5795C24.3214,17.5795 25.5077,18.0336 26.4405,18.9255L29.0218,16.3441C27.4632,14.8918 25.4259,14 23,14C19.4818,14 16.4382,16.0168 14.9573,18.9582L17.9641,21.29C18.6718,19.1627 20.6559,17.5795 23,17.5795L23,17.5795Z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
</vector>

Compose question: I wanna have an edge-to-edge app and I want to add the navigation bar height as bottom padding to a scroll list so that the last item doesn't get cut. Right now, I'm checking if

item == lastItem

inside the loop and updating the bottom padding accordingly. Is there a way of doing what we did in xml files by adding

android:clipToPadding="false"

so that the padding was always added at the end of the scroll or is checking item by item the Compose Way™️? 🤔

I'm trying to add Jetpack Compose to my existing pet project. Got stuck getting the following error:

jetified-kotlin-stdlib-1.3.72.jar: Runtime JAR file has version 1.3 which is older than required for API version 1.4

Using latest stable Kotlin plugin for Android Studio. Do I need to switch to 1.4 preview?