I believe I know the answer but does animating text size in compose still have the same drawbacks as discussed in some conference talks cc @nickbutcher (I dont have a link handy)

Stack is causing a weird issue for me. I have a stack containing two images. If I wrap them each in column and rows that are centered (gravity) the last image only centers in one axis. Anyone else having this problem.

Keyboard input is not working for 

TextField

 in my emulator. Is this a known issue?

How do you manage navigation in a Compose app? I think I can make startActivity and setResult work, but tends to be quite difficult.

I want to do a different layout for different screen sizes. Can you please tell me how it should be done? (e.g. getting screen size in composable function?)

Curious how people are using a date pickers in compose? I found a library but it uses

LocalDate

which is API 26 and above. I need to support API 24.

Hi! Just joined the channel. I've dived into Jetpack Compose a few days ago, and it's really, reallly nice so far. I have an issue with the Popup composable however, for some reason it doesn't fill the full screen width, only about 75%, although the child has

Modifier.fillMaxWidth()

set. Is that a known issue, or a configuration/usage error on my part? Using Compose alpha02.

I have a question of understanding about re-composition. I have written the following simple code example:

@Composable

fun StateDemo() {

var counterOne by remember { mutableStateOf(0) }

var counterTwo by remember { mutableStateOf(0) }

var items = remember { mutableStateListOf<Int>() }

Column {

Button(onClick = { counterOne++ }) {

Text("One")

}

Button(onClick = { counterTwo++ }) {

Text("Two")

}

Button(onClick = { items.add(counterOne) }) {

Text("List")

}

MyText(counterOne)

MyText(counterTwo)

MyList(items)

}

}

@Composable

fun MyText(counter: Int) {

Text("counter: $counter (${System.currentTimeMillis()})")

}

@Composable

fun MyList(items: MutableList<Int>) {

Text("list: ${items.size} (${System.currentTimeMillis()})")

}

Unfortunately, the behavior in case of re-composition is not completely clear to me. If I click the button "One", the function "*MyText(counterOne)*" is re-drawn, the function "*MyText(counterTwo)*" remains completely unaffected. The behavior with the button "Two" is similar. Unfortunately in both cases the function "*MyList(items)*" is also redrawn. The behavior is not clear to me. What am I doing wrong! I want to prevent this function from being drawn, because in my opinion it is not involved in the re-composition. Many thanks in advance!

I'm using

Scaffold

with

BottomNavigation

and it looks like the bottom navigation bar is covering

bodyContent

Scaffold(
    topBar = {
        TopAppBar(
            title = { ... },
            navigationIcon = { ... },
            actions = { ... },
            backgroundColor = MaterialTheme.colors.surface,
            elevation = 0.dp
        )
    },
    bodyContent = { ChatScreen(viewModel) },
    bottomBar = {
        BottomNavigation(
            backgroundColor = MaterialTheme.colors.surface,
            elevation = if (isSystemInDarkTheme()) 0.dp else 4.dp
        ) {
            BottomNavigationItem(
                icon = { ... },
                selected = true,
                onClick = {},
                label = { ... },
            )

            BottomNavigationItem(
                icon = { ... },
                selected = false,
                onClick = {},
                label = { ... }
            )
        }
    }
)

Is this a bug or am I doing something wrong?

Is there a way to specify multiple Provide composables to save indentation? Something like:

Provide(textStyle = TextSyle(...), emphasis = EmphasisAmbient.current.medium) {
    ...
}

Wow, did anyone notice a strange behavior in JetChat after update?

When making a gradient, I see quite a few examples using this, for instance:

endY =150.dp.toPx()

but I get "Unresolved Reference: toPx(). What am I doing wrong?

I'm really curious whether doing,

Crossfade(key) {
    when (it) {
        is CaseA -> ComposableA()
        is CaseB -> ComposableB()
        ....
    }
}

Is just "similar" (effect wise not implmentation wise) as using

AnimatedVisibilty

such as this:

AnimatedVisibility(
    visible = key == CaseA,
    exit = ...,
    enter = ...,
    content = content
) {
    ComposableA()
}
AnimatedVisibility(
    visible = key == CaseB,
    exit = ...,
    enter = ...,
    content = content
) {
    ComposableB()
}

What am I doing wrong here? Just want a simple text field that reflects in a text below it as well

@Composable
fun MyInput() {
    Column(Modifier.padding(16.dp)) {
        val textState by remember { mutableStateOf(TextFieldValue()) }
        TextField(
            value = textState.text,
            onValueChange = { textState = it) }
        )
        Text("The textfield says: " + textState.text)
    }
}

note: I'm trying to learn via little samples from https://foso.github.io/Jetpack-Compose-Playground/cookbook/textfield_changes/ but let me know if there is another resource or some more official docs with these sorts of samples. I understand theres a bunch of sample apps, but I'm just trying to learn component by component first, and not jumping into an entire application.

I was trying to make this example from youtube, but I have 2 problems. The first one is that state is deprecated, but I cant make remember work with these 2 values. The second thing is that I cannot ripple anymore from Modifier Code:

@Composable
fun ModifiedShape(){
    // TODO: Replace by remember?
     val (shape, setShape) = state<Shape> { CircleShape }

    // TODO: Fix error
    //       Destructuring declaration initializer of type Shape must have a 'component1()' function
    //       Destructuring declaration initializer of type Shape must have a 'component2()' function
    // val (shape, setShape) = remember<Shape> { CircleShape }
    Image(
        asset = imageResource(id = R.drawable.ic_launcher_background),
        modifier = Modifier
            .size(256.dp)
            .padding(16.dp)
            .drawShadow(8.dp, shape)
            .border(6.dp, MaterialTheme.colors.primary, shape)
            .border(12.dp, MaterialTheme.colors.secondary, shape)
            .border(18.dp, MaterialTheme.colors.background, shape)
            // TODO: Add ripple?
            //.ripple(color = MaterialTheme.colors.surface)
            .clickable {
                setShape(
                    if (shape == CircleShape) {
                        CutCornerShape(topLeft = 32.dp, bottomRight = 32.dp)
                    } else {
                        CircleShape
                    }
                )
            }

    )

}

I just upgraded to AS 4.2 Canary 11. But I think I have lost the correct dependency versions. Build.gradle

classpath "com.android.tools.build:gradle:4.2.0-alpha11"

Dependencies:

object Compose {
            const val snapshot = ""
            const val version = "1.0.0-alpha01"

            const val core = "androidx.compose.ui:ui:$version"
            const val foundation = "androidx.compose.foundation:foundation:$version"
            const val layout = "androidx.compose.foundation:foundation-layout:$version"
            const val material = "androidx.compose.material:material:$version"
            const val materialIconsExtended = "androidx.compose.material:material-icons-extended:$version"
            const val runtime = "androidx.compose.runtime:runtime:$version"
            const val runtimeLivedata = "androidx.compose.runtime:runtime-livedata:$version"
            const val tooling = "androidx.ui:ui-tooling:$version"
            const val test = "androidx.compose.test:test-core:$version"
            const val uiTest = "androidx.ui:ui-test:$version"
        }

Does

ScrollableColumn

not support nested scrolling? I have a

LazyRowFor

and a

LazyColumnFor

inside a

ScrollableColumn

and it messed up vertical scrolling. Fling scroll doesn't work.

ScrollableColumn {
    Text(...)
    LazyRowFor(...)
    LazyColumnFor(...)
}

Does android studio builds the project twice when using

Preview

? It looks like sometimes I get an error saying the jar is being used by another process and the build for my emulator succeeds but the build for

Preview

fails.

Is it possible to detect whether the device is using Gesture navigation or 3-button navigation, as I would like to organise my layout accordingly to avoid large empty areas... I am currently using

if (ConfigurationAmbient.current.screenHeightDp >= 750) {
    Spacer(modifier = Modifier.height(40.dp))}

but it does not appear to reflect whether there is a nav bar or not

I have some issues integrating compose in my project. I have been referring to the samples as those compile perfectly. Unfortunately, whenever I add in any of my modules :

android {
    ...

    composeOptions {
        kotlinCompilerVersion = "1.4.0"
        kotlinCompilerExtensionVersion = "1.0.0-alpha3"
    }

    buildFeatures.compose = true
}

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile::class.java).configureEach {
    kotlinOptions {
        freeCompilerArgs += listOf(
            "-Xopt-in=kotlin.RequiresOptIn",
            "-Xopt-in=kotlin.Experimental",
            "-Xallow-jvm-ir-dependencies'"
        )
        jvmTarget = "1.8"
    }
}

I keep hitting:

Execution failed for task ':my-module:prepareDebugKotlinCompileTask'.
> Could not resolve all files for configuration ':my-module:kotlin-extension'.
   > Could not find androidx.compose:compose-compiler:1.0.0-alpha3.

I don’t understand what could cause this error… Does someone have an idea?

I have a

LazyColumnFor

which it's list is changed over time but when i scroll down and the list changes the

LazyColumnFor

does not resize i think and the white space that is left down in it is not scrollable so if no item is showing on the screen i cannot scroll up this a gist for that case: https://gist.github.com/mohamedmelfiky/28c3fbc0466b17ea96e10c8981183717

Is there any way I can improve my code? I'm using compose-router

var selectedUser: User? by remember { mutableStateOf(null) }

when(currentScreen) {
    is Routing.Root.Main -> { 
        MainScreen(onChatClick = { user ->
            selectedUser = user
            // change current screen
        }
    }
    is Routing.Root.Conversation -> {
        when (val user = selectedUser) {
            null -> throw IllegalStateException("selectedUser is null")
            else -> ConversationScreen(user)
        }
    }
}

I don't like the way I'm handling

selectedUser

here

I've taken SwipeToRefresh implementation from JetNews into my own project. However, I feel like there is an important bug in the implementation that comes to surface when the state of the UI directly starts in refreshing (loading) status.

refreshingState: Boolean,

is an argument to the SwipeToRefresh composable. It makes total sense that refreshing status is controlled by the parent. However, inner swipe state and this received state of refresh are combined together to call

onRefresh

callback inside the listener for swipe state change as follows:

val state = rememberSwipeableState(refreshingState) { newValue ->
        // compare both copies of the swipe state before calling onRefresh(). This is a workaround.
        if (newValue && !refreshingState) onRefresh()
        true
    }

However, something goes wrong in this lambda. Even if the

refreshingState

is changed from

true

to

false

by the parent, this lambda will keep reading it as the first time

remember

is called. If

refreshingState

was true at the start, it will remain true in the scope of this lambda until composition of

SwipeRefreshLayout

leaves the UI. As a workaround, I've changed

refreshingState

to a lambda that returns a boolean.

How to disable elevation overlays?

so i have code like the below with a class represents the whole state of the screen and observing it in the root compose of that screen. is this a bad design from what i saw when i watched leland that the compose compiler is smart enough or will be to know when to recompose. second is using MutableStateFlow or mutableStateOf make any diffrence?

enum class Sort {
    ownerName,
    taskTitle,
    size
}

sealed class UiState {
    object Loading : UiState()
    data class Success(
        val data: List<Int>,
        val sortExpanded: Boolean = false,
        val sort: Sort = Sort.ownerName,
    ) : UiState()
    object Error : UiState()
}

class UiViewModel(repo: Repo) : ViewModel() {

    // private val _state = MutableStateFlow<UiState>(UiState.Loading)
    // val state: StateFlow<UiState> get() = _state
    var state by mutableStateOf<UiState>(UiState.Loading)
    private set

    fun toggleSortDialog() {}
    ....
}

@Composable
fun RootScreenUi() {
    val viewModel = viewModel<UiViewModel>()
    val state = viewModel.state

   ....
}

TextField

with

adjustPan

messes up the touch. The screen shifts up when text field is focused but when it shifts down, the touch doesn't work correctly. I think it's like the system thinks the screen is still shifted up or something like that. Is this a known issue?

How to change shape for

OutlinedTextField

?

Why is it possible to write

var cost by remember{mutableStateOf(0)}

but not

var (cost, setCost) by remember{mutableStateOf(0)}

?

Hi All. I wonder how is it possible to get scroll x and y value for LazyColumnFor. I know that we can pass scrollState to ScrollableColumn and get scroll x value from state we passed in. But there is not such an option for LazyColumnFor.