Hi, How can we get the size of composable in a custom Modifier when using

composed

lambda? How to get size of composable in a custom Modifier?

Hi Everyone, can you please help me to fix the error, why coil not able to load it. its mimeType is video/mp4

val mediaPath = "<content://media/external/file/252819>"


AsyncImage(
            model = mediaPath,
            contentDescription = stringResource(id = R.string.thumbnail),
            placeholder = painterResource(id = R.drawable.ic_default_thumbnail),
            error = painterResource(id = R.drawable.ic_default_thumbnail),
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f),
            contentScale = ContentScale.Crop
        )

How it works on Glide but not on coil: mimeType is video/mp4

GlideImage(
    model = media.mediaPath, contentDescription = stringResource(id = R.string.thumbnail),
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f),
    contentScale = ContentScale.Crop,
)

AsyncImage(
    model = { media.mediaPath },
    contentDescription = stringResource(id = R.string.thumbnail),
    placeholder = painterResource(id = R.drawable.ic_default_thumbnail),
    error = painterResource(id = R.drawable.ic_default_thumbnail),
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f),
    contentScale = ContentScale.Crop
)

How can i improve the performance of loadings images by using GlideImage

GlideImage(
    model = media.mediaPath, contentDescription = stringResource(id = R.string.thumbnail),
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f),
    contentScale = ContentScale.Crop,
)

How to support 3 or more states in MotionLayout json. All examples am seeing

Transition

has a

default

name supporting from and to states. How to try multiple transition with 3 constraint sets like

start

,

mid

,

end

by controlling transition on clicking a button

can anyone please let me know how can improve my GlildeImage in sense of recomposition :

GlideImage(
    imageModel = { media.mediaPath },
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1f),
    requestOptions = {
        RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE)
    },
    imageOptions = ImageOptions(
        contentScale = ContentScale.Crop,
        contentDescription = stringResource(id = R.string.thumbnail)
    ),
    loading = {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f),
            painter = painterResource(id = R.drawable.ic_default_thumbnail),
            contentDescription = stringResource(
                id = R.string.thumbnail
            ),
            contentScale = ContentScale.Crop
        )
    },
    failure = {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f),
            painter = painterResource(id = R.drawable.ic_default_thumbnail),
            contentDescription = stringResource(
                id = R.string.thumbnail
            ),
            contentScale = ContentScale.Crop
        )
    },
)

Let say I have a Text Compose with maxLines is 10. How can I add a vertical scroll for it, in case the text message is so long?

How do people design pull to refresh with Material 3, where the top app bar is not elevated? There is nowhere for the pull to to refresh indicator to come from, normally it's pulled from "under" the top app bar, but that doesn't work visually on Material 3's flat top app bars.

What is the best way to deal with the circled bar at the bottom of the image? Right now I am doing this, but it feels wrong as I am adding 25 dp to the height. If I use fillMaxHeight then the pink bar goes behind the circled section.

val configuration = LocalConfiguration.current

val screenHeight = configuration.screenHeightDp.dp
MyApplicationTheme {
    Surface(
        modifier = Modifier
            .height(screenHeight + 25.dp),

For Compose Navigation, the docs say you should create a

NavGraphBuilder

extension for each screen: https://developer.android.com/guide/navigation/design/type-safety#split-navigation But in the JetNews sample, they instead create

Route

composables like this: https://github.com/android/compose-samples/blob/main/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsRoute.kt Which one is the actual recommendation?

is there any way to make my kcp plugin run before default compose compiler plugin

Hi all. Is there a way to mask one shape with another with Compose Shapes?

I'm working on a settings screen and a common occurance I run into is: 1. Show Dialog with a TextField with current string of SettingA 2. Allow user to edit TextField, but don't actually modify SettingA until the save button is hit I'm currently doing this by essentially having

@Composable
fun MySettingDialog(visible: Boolean, seedValue: String, saveEvent: () -> Unit){
var tempValue by remember { mutableStateOf(seedValue) }
if (visible){
    //DialogWithTextField...
    // use tempValue in textField, and onTextUpdate, update tempValue
  }
}

this works fine the first time... but messes up every subsequent time because if the user types something in... it will be remembered, and then when you comes back to the dialog it will have the only remembered value even though the user didn't hit save. It seems like an easy way to do this is for the seedValue to replace tempValue in a LaunchedEffect, but maybe kinda seems hacky. Am I missing something simple here?

Hello. We bumped Compose from

1.3

to

1.4.3

but our obfuscated app crashes with

Fatal Exception: java.lang.NullPointerException

Attempt to invoke virtual method 'kotlin.jvm.functions.Function1 androidx.compose.ui.platform.n0$a.getOnViewCreatedCallback()' on a null object reference

Is this a known thing?

Trying to add a shadow to one item, but I notice that in every way I’ve tried so far, the shadow is interfering with the color of the item itself, instead of only showing around (so behind) the item itself. More in thread 🧵

In Material3, why

TextFieldColors

is not a

data class

? They seem to be implementing the

equals

method by hand.

SnapshotStateList is great to use when state doesn't need to be hoisted outside the composable. In particular, remove() and removeRange() are extremely useful.

remember { mutableStateListOf("item 1", "item 2", "item 3") }

However - what is the best practice when you would like to store the list items in a view model? In my case, I'm trying to keep track of a list of things a user enters into a form and eventually uploading it to a server.

So, I have a weird need. I have a set of libraries, that gets put together to build an app. Say, app A uses featureA and featureB, setting up navigation on its own, etc, while app B uses featureB and featureC. And now, I have app C. App C is just like app A, except there's one crucial change: some UI components are visually different. Not massively different, but different enough that it cannot be done with just theming a MaterialButton. I have this idea of having a CompositionLocalProvider that provides common UI elements. The default implementation of LocalComponents.Button() would just be a MaterialButton behind the scenes, but app C could override it to be CustomButtonThatIsWildly different. If you've read this, you're probably horrified at the idea. So am I. But as it stands, I cannot figure a better way to provide different UI elements (with a common interface). Any idea how this could be done otherwise ?

Hi i have a vertical scrollable compose column as follows:-

Column(

modifier = Modifier

._fillMaxSize_()

._verticalScroll_(rememberScrollState())

) *{...}*

and i would like to add

PullRefreshIndicator(isRefreshing, pullRefreshState, Modifier._align_(Alignment.TopCenter))

Ive tried this, however it doesnt work 😞,

👋 Curious if anyone has run into having a Scaffold with a drawer && a screen that also needs horizontal scrolling. If so, how did you make it so they are both respected? Currently the main screen is getting priority and the drawer can not be opened.

Why is it possible to call a

@Composable

function from a

.map{}

but not

.flatMap{}

?

Looking for a platform-independent compose way to migrate from Android’s Activity ActionMode (contextual actions on lists of items)

Is there a way to blur screen below Android 12 in Jetpack Compose, without bitmap?

Again a question about

@Immutable

. This is the quote from Chris Banes' article:

An object that is immutable means that ‘all publicly accessible properties and fields will not change after the instance is constructed’. This characteristic means that Compose can detect ‘changes’ between two instances very easily.

But how exactly does compose "detect changes"? If function parameter is immutable, what compose will do with it? referentially compare prev/next values? run

prev.equals(next)

? I can't seem to find any info about this in docs, most places say that "this enables some optimizations".

Hello everyone I am just learning the ropes of kotlin and compose so I'm not sure where this question fits in but I have a mutableState<long> parameter that I want to use as a color-indicator, but when I do "Color(exampleClass.longVar.value)", it does not give me a a working color. Any ideas on why this is happening?

Does anyone know if there are any standards or conventions in how to deal with font zoom in terms of the TopAppBar control. Some of our titles look good in normal zoom, but when the user goes to 150%, they get too big to fit. And because we center our titles, we can’t get whatever default handling there is in TopAppBar

Hello everyone! I've created a sample app in KMM using compose multiplatform, but I'm seeing a weird button placement for iOS. I'm pretty new to mobile development in general, as well as KMM. Does anyone know why this might be happening or how I can debug this issue?

What's the right way of recreating opening images in full screen from Telegram? (upd: added an example in the replies) It looks like this: 1. there is an image somewhere on the screen, it may be partially hidden by the screen edges 2. the user clicks the image 3. the image fills the entire screen, either by width or by height, the rest of the screen is black 4. transition between steps 1 and 3 is animated (the image moves smoothly) 5. when the user swipes the image away / goes back, the animation is reverted

Has anyone here worked with adding compose multiplatform to an existing kotlin multiplatform app? I'm starting with the People in Space template and trying to add common compose code. When I try to add in elements of the project structure here: https://github.com/JetBrains/compose-multiplatform-template/tree/main gradle gets mad at me. Curious if this is even possible.

How can I determine what the most visible item is in a lazy column is? I'm trying to make a list of items and sometimes there's videos. They should only play if they're reasonably visible. If like > 50% of the item is obscured then it should be ignored and another item should take precedence. What horrors must I do to achieve this?