Should I use Compose in production if I'm okay with maintaining the code with new releases? My use-case mainly involves dealing with Camera and videos. I went through compose-samples and found comments referencing to some of the issues being tracked; could someone brief me about the things (integrations with other jetpack components) that are not yet supported in Compose? I personally found jetpack compose opening up way more possibilities to do with the UI that I wouldn't have bothered to do had I using the legacy xml based layouts, but I'm getting bit confused about the architecture patterns to follow. Any recommendations in this regard would also make things clearer for me.

How to handle WebView back press event?

WebComponent(
    url = url.value,
    webContext = webContext,
    modifier = Modifier.keyInputFilter {
        if (it.key == Key.Back) {
            if (webContext.canGoBack()) {
                webContext.goBack()
                true
            } else false
        } else false
    },
)

But I got exceptions

Exception dispatching finished signal.
Exception in MessageQueue callback: handleReceiveCallback
java.lang.IllegalStateException: KeyEvent can't be processed because this key input node is not active.

building a plugin for this today 🙂. Still have to parse all the different formats.

Does

View.INVISIBLE

analog exist?

Hi, is there any way, right now, to render a String with html tag? (the string itself is coming from an API)

Hello everyone, I’m facing an issue where I’m updating my LiveData in ViewModel, but there is no recomposition happening after the LiveData is updated. Here, I’m changing the quantity of a menu item (

var

). If I remove an item, then there is recomposition happening. How to handle such cases in compose? ViewModel

class MenuViewModel : ViewModel() {

    private val data = MenuRepository.getMenuData()

    private val _menuItems = MutableLiveData(data.menuItems)
    val menuItems: LiveData<List<MenuItem>> = _menuItems

    fun incrementMenuItem(menuItem: MenuItem) {
        _menuItems.value = _menuItems.value!!.apply { find { it == menuItem }!!.quantity++ }
    }

}

In Composable function

val menuItems by viewModel.menuItems.observeAsState()

        LazyColumnFor(
            items = menuItems!!
        ) { menuItem ->
            MenuItem(
                menuItem = menuItem,
                onIncrement = { viewModel.incrementMenuItem(menuItem) },
                onDecrement = { viewModel.decrementMenuItem(menuItem) },
                modifier = Modifier.padding(16.dp)
            )
        }

Currently we have

Modifier.fillParentMaxWidth()

for

LazyItemScope

. I want my item to take 80% of the available width. It would be great to have similar API like

fillMaxWidth(fraction: Float)

ModalBottomSheet

doesn't support nested scroll. I can't swipe on the list to slide up the sheet

Hi everyone! It’s my first time in this community. I have a question about Jetpack compose and I am wondering if there is a channel for open questions so i can post mine? Thanks

I am trying to draw a gradient on the integrity of the screen as a fixed layer, for some reason I am not getting any preview, am I doing this wrong?

Box(modifier = Modifier.height(100.dp).width(100.dp).drawBehind {
        HorizontalGradient(
            0.0f to Color.Red,
            0.5f to Color.Green,
            1.0f to Color.Blue,
            startX = 0.0f,
            endX = 100.0f
        )
    })

Is there a way to change internal paddings in

TextField

?

Why not make

@Preview

workable with Composable functions with arguments? As I understand almost all arguments are data classes. Compiler can instantiate them using primary constructor. For example:

data class Post(
    val title: String,
    val description: String
)

Default instance for this class can be

Post("Title", "Description")

. Same with Lists of data classes, but compiler can add index for each instance

Post("Title №0", "Description №0")

,

Post("Title №1", "Description №1")

, etc. So in most cases you don't need to create special preview composable functions or mess around with

@PreviewParameter

. What do you think?

Hi everyone, is it known issue that textfield doesn't work after closing the keyboard? i.e its becomes non clickable and not focused anymore

Is the opacity of the

drawShadow

modifier supposed to change the opacity of the whole Box? Changing the

0.3f

opacity changes the opacity of the whole box and its contents. Simplified example:

@Composable
private fun StrangeButton() {
    Box(
        modifier = Modifier.then(
            Modifier.drawShadow(
                elevation = 4.dp,
                opacity = 0.3f
            )
        ).then(
            Modifier.background(
                color = Color.Green
            )
        )
    ) {
        Image(
            asset = Icons.Default.Person,
            colorFilter = ColorFilter.tint(Color.White)
        )
    }
}

Still can't see the Compose source code in 4.2.14Canary?😢😢

There's no way to specify duration for a spring animation spec?

Using MutableState vs LiveData in compose For displaying UI using simple variable, say "name" in compose, which of the below options is better ? 1. using state in viewModel : val name = mutableStateOf<String>("") in ui : simply access it as viewModel.name 2. using live data val _name = MutableLiveData<String>("") val displayName = Transformations.map(_name){ it?: "" } in ui : val name = viewModel.displayName.observeAsState("")

Which modules would you like that ComposeDrawer provides by default, to help you build faster and better apps? https://github.com/alorma/ComposeDrawer

Can we set any enter or exit animation with navigation-compose?

The option to run via wifi (visible in the Running Devices dropdown) has disappeared for me in Canary 4.2/14. Has anyone else experienced this?

why is not possible to do a

try

inside a @Composable block?

@Composable
override fun build() {
   try {

   }
}

And another question, how can I simulate the "onResume" behaviour?

I keep getting this but I'm not sure why:

e: androidx.compose.compiler.plugins.kotlin.IncompatibleComposeRuntimeVersionException: You are using an outdated version of Compose Runtime that is not compatible with the version of the Compose Compiler plugin you have installed. The compose compiler plugin you are using (version 1.0.0-alpha07) expects a minimum runtime version of 1.0.0-alpha07. The version of the runtime on the classpath currently is 0.1.0-dev16.

my versions are all the same

const val COMPOSE_VERSION = "1.0.0-SNAPSHOT"
implementation("com.github.skydoves:landscapist-glide:1.0.7")
implementation("androidx.navigation:navigation-compose:$COMPOSE_VERSION")
implementation("androidx.compose.runtime:runtime-livedata:$COMPOSE_VERSION")
implementation("androidx.compose.material:material:$COMPOSE_VERSION")
implementation("androidx.compose.ui:ui:$COMPOSE_VERSION")
implementation("androidx.ui:ui-tooling:$COMPOSE_VERSION")

and it's from a snapshot

maven("<https://androidx.dev/snapshots/builds/6924113/artifacts/repository>")

Saw a similar demo with SwiftUI and wanted to try it with Jetpack Compose. Found a couple of bugs along the way. Also wondered if shadow colour should be a thing, even though it feels like a weird concept. https://twitter.com/AfzalivE/status/1320835734782283778

Is there any to trigger a callback when the end of a lazycolumn scroll has been reached? aka infinite scroll?

How can I change the LinearGradient shader, I am using LinearGradientShader but I don’t know how to pass it to drawRect()?

I'm trying to use

BottomSheetScaffold

to implement bottom sheet behavior. In old

BottomSheetBehavior

we have some middle states like

STATE_DRAGGING

or

STATE_HALF_EXPANDED

, however now the

BottomSheetValue

have only

Collapsed

and

Expanded

. Is there any plan to implement additional states or other ways to deal with the middle states?

How can I make this layout in Android compose without using constrain layout , I couldn’t done this just by simple Row , Column combination and possible option of layout alignment. I have done this using constrain layout and it goes as follows

@Preview
@Composable
fun ConfirmationScreen() {

    ConstraintLayout(
        modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.White)
    ) {

        val (topBar, confirmationText, continueButton) = createRefs()

       TopAppBarFlat(
            topBarTitle = "Screen Title",
            topBarColor = Color.White,
            topBarLeftIcon = R.drawable.ic_back,
            navigation = {

            },
            modifier = Modifier.constrainAs(topBar) {
                top.linkTo(<http://parent.top|parent.top>)
            }
        )

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth().wrapContentHeight().constrainAs(confirmationText) {
                bottom.linkTo(<http://continueButton.top|continueButton.top>)
                centerVerticallyTo(parent)
            }
        ) {

            Image(
                asset = imageResource(id = R.drawable.test),
                modifier = Modifier.fillMaxWidth(0.5F)
            )

            Text(
                text = "Screen Title.",
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                ),
                fontSize = 14.sp,
                color = Color.Black,
                modifier = Modifier.padding(10.dp)
            )

            Text(
                text = "Description....",
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Normal,
                    textAlign = TextAlign.Center
                ),
                fontSize = 14.sp,
                color = Color.Black,
                modifier = Modifier.padding(start = 50.dp, end = 50.dp)
            )
        }

        Button(
            onClick = {

            },
            modifier = Modifier.fillMaxWidth().padding(10.dp).preferredHeight(40.dp)
                .constrainAs(continueButton) {
                    bottom.linkTo(parent.bottom)
                },
            backgroundColor = Color.Black
        ) {
            Text(
                text = "OK",
                style = TextStyle(
                    color = Color.White,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                )
            )
        }
    }
}


@Composable
fun TopAppBarFlat(
    topBarTitle: String,
    topBarColor: Color = Color.Black,
    topBarLeftIcon: Int = R.drawable.ic_back,
    navigation: () -> Unit,
    modifier: Modifier = Modifier.fillMaxWidth()
) {
    TopAppBar(
        elevation = 0.dp,
        title = { Text(text = topBarTitle) },
        navigationIcon = {
            IconButton(onClick = { navigation() }) {
                Icon(vectorResource(topBarLeftIcon))
            }
        },
        backgroundColor = topBarColor,
        modifier = modifier
    )
}

How to center a text?

Column(Modifier.fillMaxSize()) {
   Text("Dashboard will be here", Modifier.wrapContentSize(Alignment.Center))
}

is not working