I would like to preview an

AnimatedVisibility

composable but the animation inspector does not appear. Is that intended behavior? What are the requirements so that animation inspector is available?

Given some type of container how would I draw only the bottom half of a piece of text within the given container? Such that the top of the half of text (aka the middle vertical point if the text was fully drawn) touches the top of the parent container and the bottom touches the bottom of the parent container?

Hi guys! I want to update the Arctic Fox build but was greeted with this error instead. Anyone encountered this?

Anyone Knows a good sample about implementing BottomSheet in Jetpack Compose

Let's say a composable is about to enter/added to the tree how can I animate it's enter transition ? Is there something similar to .transition modifier like swiftUI ?

Is it possible to opt a

LazyColumn

out of a nested scroll chain? The docs only explain how to opt in/configure the existing chain: https://developer.android.com/jetpack/compose/gestures#auto-nested-scrolling

How to implement on screen keyboard with Compose?

I trying to animate the changes between points which I have drawn in canvas, check output preview inside thread.

val points: List<Offset> = listOf(
    Offset(200f, 200f), Offset(400f, 200f),
    Offset(200f, 200f), Offset(200f, 400f),
    Offset(400f, 200f), Offset(400f, 400f),
    Offset(200f, 400f), Offset(400f, 400f),
    Offset(200f, 400f), Offset(200f, 600f),
    Offset(200f, 600f), Offset(400f, 600f),
    Offset(400f, 400f), Offset(400f, 600f),
)

Two offsets completes a line, this whole points makes -> 8 How I want is, lines must be drawn between those points at certain duration.

Canvas(
    modifier = Modifier.fillMaxSize()
) {
    drawPoints(
        points = points,
        pointMode = PointMode.Lines,
        color = Color.Gray,
        strokeWidth = 16f,
        cap = StrokeCap.Round,
        pathEffect = PathEffect.dashPathEffect(floatArrayOf(8f, 16f))
    )
}

How can I make text word to go to bottom if it overflows the container space, I see clip and ellipse options

Hello everyone. I want to use a dialog, for this I'm using AlertDialog from compose.material. I want to fill max width, but I couldn't find a way to do it. Do you know a way?

Hi folks, I am not sure who is the right person to consult regarding this. I am playing around with the code from the official documentation of

ModalBottomSheetLayout

and it seems like the scrim to dismiss the modal is being triggered when tapping an area within the sheet. Is this expected behaviour? Here is my code

Hi ! I am trying to launch a preview on my phone, but I am getting an error

androidx.compose.ui.tooling.preview.PreviewActivity is not an Activity subclass or alias

though I managed to launch it yesterday. This is my preview :

@Preview
@Composable
fun ChessBoardPreview() {
    ChessBoard(size = 60.dp)
}

where ChessBoard is a Composable component that I'm writing

Android Studio Arctic Fox | 2020.3.1 Canary 8
Build #AI-203.7148.57.2031.7165533, built on February 23, 2021
Runtime version: 11.0.8+0-b944-P17168821 amd64
VM: OpenJDK 64-Bit Server VM by N/A
Linux 5.10.19-200.fc33.x86_64
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 4
Registry: external.system.auto.import.disabled=true
Non-Bundled Plugins: org.intellij.plugins.markdown
Current Desktop: GNOME

Came across a curious situation with AndroidView this morning. I have composable that renders a list of

AndroidView

. The

View

used for

AndroidView

is provided by a generic provider that takes in some input and outputs a

View

type.

@Composable
fun BasketItemsList(
    modifier: Modifier,
    basketItems: List<ProductState>,
    provider: ProductCard,
    interactionListener: ProductCardView.InteractionListener
) {
    LazyColumn(modifier = modifier) {
        items(basketItems) { product ->
            AndroidView(factory = { provider.view }) {
                Timber.tag("BasketItemsList").v(product.toString())
                provider.setup(product, interactionListener)
            }
        }
    }
}

With this sample, any interaction with the ProductCard view’s doesn’t update the screen. Logging shows that the state gets updated but the catch is that it’s only updated once per button. For example, I have a favourites button. Clicking it once pushes a state update only once, any subsequent clicks doesn’t propagate. Also the card itself doesn’t updates. It’s as if it was never clicked. Now changing the block of

AndroidView.update

to cast from the

ProductCard

interface to a concrete view type works as expected. All clicks propagate correctly and the card view gets updated to reflect the state.

@Composable
fun BasketItemsList(
    modifier: Modifier,
    basketItems: List<ProductState>,
    provider: ProductCard,
    interactionListener: ProductCardView.InteractionListener
) {
    LazyColumn(modifier = modifier) {
        items(basketItems) { product ->
            AndroidView(factory = { provider.view }) {
                Timber.tag("BasketItemsList").v(product.toString())
//                provider.setup(product, interactionListener)
                (it as ProductCardView).setup(product, interactionListener)
            }
        }
    }
}

What am I missing here? why does using

ProductCard

type not working while casting the view to it’s type is working?

How can we store the state of the LazyColumn. I read something about rememberSaveableStateHolder(), will that help. ?

can we use mutableState from ViewModel or we must need to use LiveData and use livedata.observeAsState()

Reading https://developer.android.com/jetpack/compose/gestures#dragging, and https://developer.android.com/reference/kotlin/androidx/compose/ui/input/pointer/PointerInputScope: I 'm looking for a way to handle mouse release, but I did not manage : which function can help me handle mouse release ?

How to properly chain animate*AsState? Animations down the "chain" don't get triggered as easily. I have the following code:

val ballSpacing = remember { Offset(0f, 48f * density) }
var ball1 by remember { mutableStateOf(Offset.Zero) }
val ball2 by animateOffsetAsState(ball1 + ballSpacing)
val ball3 by animateOffsetAsState(ball2 + ballSpacing)

I move ball1 with gestures and I want the other balls to follow. I must move the ball really slowly to trigger the animations but when it starts working it's smooth so long as I don't stop moving them (GIF in thread)

I have a scenario I'm not sure how to progress with. I have a composable that either animates on every "tick" or is scrollable by the user. I'm using the

translationY

value for both the scrolling and the tick. Right now, when I toggle between scrolling mode or ticking animation mode the composable kind of swaps between the two different translationY values. I'd like to remember the old translationY and increment from there but I'm not sure how to make that happen...I've added the relevant code to this thread.

I have made a slidable composable whicht sits under the top app bar but unfortunately the composable does not slide under the top app bar but instead over it. Here the code:

Scaffold(
    topBar = {
		Column {
			TopAppBar(
				...
			)
			AnimatedVisibility(
				visible = (connectionState == BluetoothConnectionState.Disconnected),
				enter = slideInVertically(),
				exit = slideOutVertically(targetOffsetY = { value -> -value }),
				content = { ConnectionStatusBannerComponent(onAction = { }) }
			)
		}
	},
)

Does someone have an idea?

Why isn't there a

cutoutShape

for

BottomNavigation

?

hmmm ... I have a somewhat weird issue ... I have setup the manifest for my app to handle orientation changes myself:

android:configChanges="orientation|screenSize"

When I run my app, everything works as expected ... when I rotate the device the activity does not get re-created, and my main

setContent

composable gets recomposed. But ... if I rotate the device "upside down", the composable does NOT get recomposed? What am I missing? To be clear .. the device (a phone) starts in a "normal" portrait orientation ... i rotate it 90 degrees to a landscape orientatin and my root composable gets recomposed. Great. I rotate 90 degrees again to portrait (but now upside down, with the earpiece at the bottom and the mic at the top), and my root composable does NOT get recomposed and the display is now "sideways"?

Why does the inner column not fill the whole screen? Code below results in whole screen being blue, but only a little bit red (height of the text). I would expect the inner column to fill the whole screen (and thus make the whole screen red).

Column(modifier = Modifier.fillMaxHeight().background(Color.Blue)) {
    Column(modifier = Modififer.fillMaxHeight().background(Color.Red)) {
        Text("Hi")
    }
}

With animations. Is there a way to combine

updateTransition

with

keyframes

or something similar to have more control over one value? To exmplain: I want an animation that will fluidly animate rotation simply done with transition.animateFloat. But I want the color to be White from 0-50% of the animation and then immediately change to Red at 50% and stay like that for 50-100% of the animation. Any ideas?

I’m looking at SideEffect explanation on the https://developer.android.com/jetpack/compose/lifecycle but I don’t really understand why and when should I use it. Can somebody explain me what is the difference between the following:

val backCallback = remember { /* ... */ }
SideEffect {
    backCallback.isEnabled = enabled
}

and

val backCallback = remember { /* ... */ }
backCallback.isEnabled = enabled

I've seen there's no API for reading for example a Modifier's size, what's the reason behind that? Let's say I need to read it because some other value depends on it.

I have a

Red

composable and

Blue

composable that I want to overlap by 35%. The three ways I've thought about doing this is: 1. Have these two in a

Box

, but apply a padding to the top of blue composable that I calculate somehow to be 35% of bottom of red 2. Have these two in a Column, and someone apply a negative padding to a value that I calculate somehow to be 35% of the bottom of red 3. Write a custom layout? (seems scary even though this is supposed to be a lot easier in compose) Anyone have other ideas or an idea of how I would go about this? Right now I just hard coded the padding and it works, but the height of the red square will change and so the hard coded padding idea will fall apart. Edit: Wish there was a way to shrink the preview size in slack. Sorry

Hello Everyone .How to add blur effect ?

Does material compose provide toggle buttons I can use? I'm building a text editor and being able to do center, left, right with something like this component in material guidelines makes a lot of sense. https://material.io/components/buttons#toggle-button I looked here and didn't see them mentioned: https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#icontogglebutton

Building this in the old view system was NOT fun, and involved writing a custom LayoutManager for the main recycler view, and using some wild stuff to link 3 recycler views together (main view, one for the row header, and one for the column header) and keep their scrolls/flings in sync. I haven't tried it yet, but I wonder how much easier this will be in Compose?