LoginViewModel() {
    private val _sessionUser = MutableLiveData<SessionUser>()
    val sessionUser: LiveData<SessionUser>
        get() = _sessionUser
    fun changeSessionUserValue() {
        _sessionUser.value = ....
    }
}
@composable
OuterComposable(){
    val currentSessionUser: SessionUser? by loginViewModel.sessionUser.observeAsState()
    Timber.d("Heyyooo!")
    NavHost(...) {
        ....,
        composable(route) { InnerComposable(loginViewModel) }
    }
    ....
}
@composable
InnerComposable(loginViewModel) {
    ....
    NavHost(...) {
        ....,
        composable(rt) { InnerInnerComposable(loginViewModel) }
    }
}
@composable
InnerInnerComposable(loginViewModel) {
    Button(onClick = loginViewModel.changeSessionUserValue())
}

Hi guys, I have a question related to observing mutable live data. When the activity created, outerComposable is called and 

"Heyyooo!"

   is logged. After, the user clicks to the button in InnerInnerComposable, changeSessionUserValue is called. However the observed sessionUser in OuterComposable is not triggered so that 

Heyyooo!

 is not logged on screen again after button click. Any idea why I can't trigger 

observeAsState

 ? Thanks🤗

How to call suspend functions?

• IS anyone else getting:

Duplicate class androidx.compose.animation.AlignmentBasedSizeAnimation found in modules animation-1.0.0-alpha11-runtime (androidx.compose.animation:animation:1.0.0-alpha11) and animation-debug-runtime (org.jetbrains.compose.animation:animation-android-debug:0.3.0-build141)

????

I’m having this error after updating IncompatibleClassChangeError: Found interface androidx.compose.runtime.Composer, but class was expected (declaration of ‘androidx.compose.runtime.Composer’ appears in /data/app/uz.apk

After upgrading from Alpha 9 to Alpha 11, I got these two issues. Any idea what’s the new syntax?

FYI, the

transitionDefinition

based transitions have been deprecated in alpha 11. The replacements are: updateTransition and rememberInfiniteTransition for the finite and infinite use cases, respectively. I know it's a large amount of API change. 😅 Hopefully, the new API is more straightforward to use. If you have any questions about them, or any issue with your migration, please let me know. I'm happy to help. 🙂

How can we resize vectors now that ImageVector is no longer a data class in

1.0.0-alpha11

? Previously was doing:

vectorResource(R.drawable.ic_target).copy(defaultHeight = 18.dp, defaultWidth = 18.dp)

any one having this issue after updating to alpha11

org.jetbrains.kotlin.ir.expressions.impl.IrCallImpl@1240ed89: No such type argument slot: 1

?

Hello! Am I right that the the following legacy calls are equivalent?

onCommit(Unit) {}

and

onActive {}

.

ViewModel

as it is, for surviving configuration change isn’t really needed in

Compose

. Right?

Compose

has it’s own

by saveInstanceState

. do we still use

ViewModel

as we have been using it until now?

I am replacing 

ScrollableColumn

 (which is now deprecated) with

Column(modifier = Modifier.verticalScroll(rememberScrollState())

but 

Column

 doesn’t have the 

contentPadding

 parameter, so when using 

Scaffold

 with a 

BottomBar

 , the bottom part of the column gets covered by the bottombar. Any solution?

👋 On a widget with a

BasicTextField

and an

IconButton

, I’d like to give focus to the text field (and therefore have the on screen keyboard appear) at the press of the button. Which API should I use?

hey guys.. is it correct to create a “previewTheme” to avoid unnecessary providers when previewing composables?

Hi guys, not sure if this belong to this channel but ill try. im using Compose + StateFlow and i have a function that will trigger an event (i’ll call it

authMethod

)

viewModel.authMethod.onEach {
            Log.e("i'm here", "yes im here ${it}")
        }.collect()

this will be trigger the first time and every time after i change the value on the viewModel. my issue is that when i push new view (using

Navigation alpha06

) and i pop back the

onEach

will be triggered again. How could i only tell

authMethod

to be triggered only on changes and not every-time the compose is rendering ?🌈 With liveData i had the observable that only triggers on changes, but i can not find the equivalent on StateFlow :/

How do I force recomposition without passing a parameter if I won’t use it? Context: I am changing the locale of the app and I handle config changes so that the activity is not recreated. Therefore. I need a way to force recomposition of the UI to update the resources… As I haven’t found a way of observing the AmbientConfiguration, I observe a state variable with the selected language. Currently I pass that variable to the composable function that is at the root of the UI to trigger recomposition. But it is not used, which feels wrong.

I noticed a lot of “removed

data class

from {list of types}” in alpha11 – what’s the reason for this purge? I know data classes are bad for library binary compatibility, is that it?

I've been trying, probably for too long, to use @cb Insets Accompanist library to show a

BottomNavigation

with a height that also includes the navigation bar height, so that the

BottomNavigation

paints all the way to the bottom of the screen. I have tried all sorts of things, and just end up with a space underneath the bottom nav. I sort of want this effect without having to resort to making a column with a spacer at the bottom. Here's the code I have so far within my

Scaffold

bottomBar = {
            Column(Modifier.background(MaterialTheme.colors.primary)) {
                BottomNavigation(
                    elevation = 0.dp,
                    backgroundColor = MaterialTheme.colors.primary,
                    contentColor = contentColorFor(MaterialTheme.colors.primary),
                ) {
                    bottomNavItems.forEach { screen ->
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentRoute =
                            navBackStackEntry?.arguments?.getString(KEY_ROUTE)
                                ?: Screen.Profile.route

                        BottomNavigationItem(
                            icon = { Icon(imageVector = screen.icon, contentDescription = null) },
                            label = { Text(stringResource(screen.resourceId)) },
                            selected = currentRoute == screen.route,
                            onClick = {
                                navController.navigate(screen.route) {
                                    popUpTo = navController.graph.startDestination
                                    launchSingleTop = true
                                }
                            }
                        )
                    }
                }
                Spacer(Modifier.navigationBarsHeight())
            }
        }

Hey all. So before the alpha 11 update, I was using a 

ScrollableColumn

 to display a list of a set number of items, i.e.:

ScrollableColumn(modifier.padding(bottom = 56.dp)) {
    collections.forEach {
        ProductCollection(collection = it)
    }
}

The 

ProductCollection

 essentially contains a composable that is a 

LazyRow

 for showing 

LazyPagingItems

@Composable
fun ProductItemListWithId(
        collectionId: Int,
        modifier: Modifier = Modifier,
        content: @Composable LazyItemScope.(ProductItem) -> Unit){
    val viewModel: ProductListViewModel = getViewModel()

    val products = viewModel.getPagingFlowForCollection(collectionId).collectAsLazyPagingItems()
    LazyRow{
        items(products){
            product -> product?.let { content(it) }
        }
    }
}

ScrollableColumn

has been deprecated now, but it's only the row items that I want lazy loaded. Trying to use a

LazyColumn

a la :

LazyColumn(
        modifier = modifier.padding(bottom = 56.dp)) {
        item {
            collections.forEach {
                ProductCollection(it)
            }
        }
    }

Results in the row items not always getting loaded since they are coming from a

Flow<PagingData>

that is fired lazily. What can I do to work around this, or to just simply make a normal

Column

scrollable again in Alpha 11?

I’m having trouble with Ripples on Alpha 11, with clickable no longer having an indication 😅 I read we are supposed to use the AmbientRippleTheme but I do not know how (thread)

My function has an argument

error: @Composable (() -> Unit)? = null

i.e. a rendering lambda of the error or a null. I want to animate that rendering, so I need to postpone "nulling" the error until the hide animation finishes. How can I remember the composable result?

Box(
    modifier = Modifier
        .alpha(errorAlpha.value)
) {
    if (error != null) {
        error()
    }
}

is there any way to run a function that will be executed only in the first composition . Compose A compose and prints a

Hello word

Compose A navigates to Component B Component B popsBack to Component A Component A should not print again “Hello word” since this was already on the stack

@Composable
fun ComponentA() {

    LaunchedEffect(Unit) {
        Log.e("=======", "I need to run only once and not when other Component PopsBack")
    }

    Button("Continue", onClick = {
        navController.navigate("ComponentB")
    })

}

hi, 👋 😀 why you avoided put a null default in the content description field of Icon, Image ... ? I think that if you want that a field was mandatory, at least it shouldn´t be nullable

fun Icon(
    imageVector: ImageVector,
    contentDescription: String? = null,
    modifier: Modifier = Modifier,
    tint: Color = AmbientContentColor.current.copy(alpha = AmbientContentAlpha.current)
) { ... }

do you guys have a scaffold with top bar, bottom bar and content for each screen? or do you have the same top/bottom bar with different states and the body content is modified for each screen?

What is the equivalent of

fitSystemWindows

in compose

How can i do hide/Show Composable instead of if (someCondition) { ComposableA() } else { ComposableB() } Because using if-else I'm getting flicker when changing screens, Which is what I want to avoid.

How do you use

TextDelegate

? There was a similar question before [1]. I want to render some text matching a particular width. I used code from [2], but can't make it work.

@Preview
@Composable
fun TextAutoSize() {
    class TestFontResourceLoader(val context: Context) : Font.ResourceLoader {
        override fun load(font: Font): android.graphics.Typeface {
            return when (font) {
                is ResourceFont -> ResourcesCompat.getFont(context, font.resId)!!
                else -> throw IllegalArgumentException("Unknown font type: $font")
            }
        }
    }

    val textDelegate = TextDelegate(
        text = AnnotatedString("Hello, World"),
        style = TextStyle.Default,
        maxLines = 1,
        density = Density(density = 1f),
        resourceLoader = TestFontResourceLoader(AmbientContext.current),
    )
    val layoutResult = textDelegate.layout(Constraints.fixedWidth(1000), LayoutDirection.Ltr)

    Canvas(Modifier.fillMaxWidth().height(50.dp)) { // CanvasScope
        drawIntoCanvas {
            TextDelegate.paint(canvas = it, layoutResult)
        }
    }
}

[1] https://kotlinlang.slack.com/archives/CJLTWPH7S/p1611055679272900 [2] https://github.com/androidx/androidx/blob/androidx-main/compose/foundation/foundation/src/androidAndroidTest/kotlin/androidx/compose/foundation/text/TextFieldDelegateIntegrationTest.kt

Does anyone have ready-made spline shape?

Hi! I'm trying to model a sort of directory explorer UI with compose. I think I've got the underlying data structure right - however I want to do certain actions based on the name of the file that was opened. But I'm not sure how to get the "state" from a composable (like what it's current text is if it's a button) from outside the composable. For example in the screenshot below (haven't figured out how to tab them properly yet 😅 ) I have

File

composables that are created as "children" of a

FilePane

composable. Which means I have to hoist the same

onClick

callback to all of them. But how would I get a name like

Hello.java

from the

onClick

function that is given to all the buttons in the image when the

Hello.java

button is clicked? I feel like I am modelling this wrong, since composables should largely be stateless, except for the top level composable

Thanks a lot for alpha11 release. It solved all my keyboard related issues 🥳🥳 Can’t wait to see what’s cooking up next. Just tried out this snippet to pre-focus a TextField on First load and it worked like charm. Let me know if anything is wrong doing it this way

val fieldFocus = remember { FocusRequester() }
LaunchedEffect(key1 = Unit) {
    addressFocus.requestFocus()
}