Hello, I have a question about view models. What should own them? Today, I’m initializing them with my composables, for example:

@Composable
fun ParkView(parkId: String, viewModel: ParkViewModel = ParkViewModel(context = LocalContext.current, parkId = parkId)) {}

But when there’s a change inside my composable, I think it gets recomposed and alongside it my view model is recreated. For example, I have a TabRow which updates the view model when its onClick lambda is triggered.

viewModel.tabIndex.value = index

This triggers an infinite loop, where my viewModel is recreated indefinitely. Where the view model should be instantiated or at least, how can I avoid this infinite loop? I’m providing an example of view and its viewModel in the replies. And of course, thank you very much for your answers 😌

Maybe

Modifier.height().wrapContentHeight(align = <http://Alignment.Top|Alignment.Top>)

I ' am tryng to use compose in a old project.. i ’ am using: Koltin 1.7.10

kotlinOptions.jvmTarget = "11"

buildFeatures {
    compose = true
}
composeOptions {
    kotlinCompilerExtensionVersion =  "1.3.0-rc01"
}

"androidx.compose.ui:ui:1.2.0"
"androidx.compose.material:material:1.2.0"
"androidx.compose.ui:ui-tooling-preview:1.2.0"
"androidx.activity:activity-compose"1.3.1"

here my actiivy

class MyActivityCompose : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }

 }

 @Composable
 fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

ad i have this error java.lang.NoSuchMethodError: No static method setContent$default(Landroidx/activity/ComponentActivity;Landroidx/compose/runtime/CompositionContext;Lkotlin/jvm/functions/Function0;ILjava/lang/Object;)V in class Landroidx/activity/compose/ComponentActivityKt; or its super classes (declaration of ‘androidx.activity.compose.ComponentActivityKt’ appears in /data/app/~~Ft9dSkXEHEzaK6HUxVW0Mw==/com.xxx.xxx.preprod-G6wAmGkpV4l7HVqxZrBhrg==/base.apk)

I was using

BottomAppBarDefaults.FloatingActionButton

which was added in

material3:1.0.0-alpha14

but it's gone in

alpha15

with no mentions in the changelog. Does anyone knows why?

Hello folks, I was reading the following code from the documentation (link): And my question is if inside a composable i want to be aware of bottomBarTabs changes, it should be observed as state? or should I use another mechanism?

Because Imagine if I have 5 variables like that and I want to observe them all, is there a direct way to do so?

hey guys is it possible to hide the BottomSheetScaffold bottom sheet? i mean there are only 2 states available: expanded and collapsed. while old good android views bottom sheet has 3 states: expanded, collapsed, hidden

Hey Guys, I'm new with the creation of tests.. on Compose. I followed this guide: https://dev.to/pchmielowski/automate-taking-screenshots-of-android-app-with-jetpack-compose-2950 I'm getting this error:

java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/test/platform/graphics/HardwareRendererCompat;
at androidx.compose.ui.test.android.WindowCapture_androidKt.withDrawingEnabled(WindowCapture.android.kt:55)
at androidx.compose.ui.test.android.WindowCapture_androidKt.captureRegionToImage(WindowCapture.android.kt:46)
at androidx.compose.ui.test.AndroidImageHelpers_androidKt.processSingleWindowScreenshot(AndroidImageHelpers.android.kt:138)
at androidx.compose.ui.test.AndroidImageHelpers_androidKt.captureToImage(AndroidImageHelpers.android.kt:75)
at androidx.compose.ui.test.AndroidImageHelpers_androidKt.captureToImage(AndroidImageHelpers.android.kt:50)

and...

Caused by: java.lang.ClassNotFoundException: Didn't find class "androidx.test.platform.graphics.HardwareRendererCompat" on path: DexPathList[[zip file "/system/framework/android.test.runner.jar", zip file "/system/framework/android.test.mock.jar", zip file "/system/framework/android.test.base.jar",

Everything that invokes the

captureToImage

crashes

fun SemanticsNodeInteraction.assertBackgroundColor2(color: Color) {
  val capturedName = captureToImage().colorSpace.name
  assertEquals(color.colorSpace.name, capturedName)
}

I'm using Kotlin 1.6.21 with the latest stable versions of the following libs

androidTestImplementation TestDependencies.composeTooling
  androidTestImplementation Compose.test
  androidTestImplementation Compose.uiTest
  androidTestImplementation TestDependencies.hamcrest
  androidTestImplementation TestDependencies.espressoCore
  androidTestImplementation TestDependencies.espressoContrib
  androidTestImplementation TestDependencies.archCore
  androidTestImplementation TestDependencies.coreTest
  androidTestImplementation TestDependencies.truth
  androidTestImplementation TestDependencies.androidJunit
  androidTestImplementation TestDependencies.androidJunitKtx
  androidTestImplementation TestDependencies.androidxTestOrchestrator

  androidTestImplementation TestDependencies.androidxTestRunner
  androidTestImplementation TestDependencies.androidxTestRules
  androidTestImplementation TestDependencies.androidxTestMonitor

  androidTestUtil TestDependencies.androidxTestOrchestrator

Maybe I missed something.. or not... any suggestions?

Hey folks, we're up to nearly 7k members of this channel, let's keep the code snippets longer than about 4 lines to threads please. Longer than that floods the channel for everyone else.

Curious how someone might implement something like this with a LazyColumn, where there’s a custom scaffold for toolbar, banner image, and content, and the content where the background decoration scrolls with the list 🤔

You can write your own

Arrangement

that would do what you need. It’s not hard. This looks like

justified

arrangement I wrote recently. It’s not perfect for RTL/LTR and maybe something else, but it could give you an idea

fun Arrangement.justified(minSpace: Dp): Arrangement.HorizontalOrVertical = object : Arrangement.HorizontalOrVertical {
    override val spacing: Dp
        get() = minSpace

    override fun Density.arrange(totalSize: Int, sizes: IntArray, layoutDirection: LayoutDirection, outPositions: IntArray) {
        if (sizes.isEmpty()) return
        val minSpacePx = minSpace.roundToPx()
        val measuredSize = sizes.sum()
        val spacePx = if (sizes.size > 1)
            kotlin.math.max((totalSize - measuredSize) / (sizes.size - 1), minSpacePx)
        else
            minSpacePx

        var occupied = 0
        var lastSpace = 0
        val reversed = layoutDirection == LayoutDirection.Rtl
        sizes.forEachIndexed(reversed) { index, it ->
            outPositions[index] = kotlin.math.min(occupied, totalSize - it)
            lastSpace = kotlin.math.min(spacePx, totalSize - outPositions[index] - it)
            occupied = outPositions[index] + it + lastSpace
        }
    }

    override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) =
        arrange(totalSize, sizes, LayoutDirection.Ltr, outPositions)

    override fun toString() = "Arrangement#justified($minSpace)"
}

What's the most recent release of compose? The latest version I can find is 1.1.1 but that can't be right as it still targets 1.6.10 rather than 1.7.10 I saw 1.2.0 mentioned on the android documentation, but gradle couldn't find the plugin for that version

I'm following the steps given at https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started but I'm getting this error:

> Task :jsBrowserDevelopmentRun FAILED
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function
    at Command.<anonymous> (/home/mart/git/bloks/build/js/node_modules/@webpack-cli/serve/lib/index.js:146:35)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/home/mart/git/bloks/build/js/node_modules/webpack-cli/lib/webpack-cli.js:1687:7)

Hello, how to use material symbols with compose

How are you guys dealing with auto sized text as it’s not supported by Compose yet? There’s some ideas about checking if the text is overflown in

onTextLayout

callback but it’s only for single text. What should I do to sync the reduced text size to all the elements in a

LazyColumn

if 1 of the elements has overflown text size?

Version 1.3.0-alpha02 (and some others) of compose was released ~2 days ago Interesting release notes according to... me • Added

drawText

extension function on

DrawScope

to provide a way to draw multi-styled text on composables and modifiers that operate on a

DrawScope

like

Canvas

and

drawBehind

. • Soft keyboard will now be hidden when a text field is disabled while focused. • When adding

InputEventChange

events to Velocity Tracker we will consider now deltas instead of positions, this will guarantee the velocity is correctly calculated for all cases even if the target element moves • When a scrollable has a focused child, it will now correctly scroll to keep the focused child in view when its size is decreased, even when the size is animated. • Fixed a crash where

TextField

is cleared and refilled while selection is active. • Fix

AnimatedVisibility

issue with

FloatingActionButton

in Scaffold • Re-added

ComposerKt.traceEventStart(Int, String)

for backwards compatibility (I wonder if this is related to the compose roadmap item "Composition Tracing") • Added a new property

PointerInputChange#pressure

to retrieve the pressure. • Added

rememberTextMeasurer

to easily create and remember

TextMeasurer

instances in composition. • Added

drawText

extension function on

DrawScope

to provide a way to draw multi-styled text on composables and modifiers that operate on a

DrawScope

like

Canvas

and

drawBehind

. • Introduce a new experimental API called

TextMeasurer

that enables arbitrary text layout computation that creates identical results to

BasicText

, independent from Compose runtime. • Add

mapTree

to

SlotTree.kt

. This allows tools to inspect the

SlotTree

without making an in memory copy first like asTree does. For the Layout Inspector this gives a performance improvement of about a factor 10. • Changed Compose Preview to be stored in binary output files, in order to allow developers to write and reuse

MultiPreview

annotations from libraries. • Bunch of M3 stuff https://developer.android.com/jetpack/androidx/releases/compose-material3#1.0.0-alpha15

Hello everyone, I'm trying to implement Accompanist-SwipeRefresh layout, and the swiping location isn't the upper most part of the screen, I use an outer LazyColumn, Inside a lazyrow, below one item, below 2 more item (box), and at the bottom there is an items function call to display pagingItems. Explanation with code is in the thread.

A library that takes compose Previews and creates a "Design System Screen" that can be attached to a non-production app version. So that designers can see how the app compares to the design in a single place. Do you know of sth like this?

Hi everyone! I would very much like to hear ideas regarding he best practices of showing a snackbar when clicking a sub-composable. I have a pretty deep hierarchy of composables, and it feels weird to pass a ScaffoldStates all the way “down” to the required element, just to invoke a simple method…

This message was deleted.

Is there a way to observe the state of

MutableState

in the

init

function of

ViewModel

?

I have a list item in my LazyRow that is rounded and clickable. The click goes outside of the bounds of the rounded background. The solution is "easy". Just apply a clip as well. This works great EXCEPT that my list item has a design element that is supposed to stick out the bounds of the list item. When I apply the clip to refine the click bounds ripple it also chops off this design asset. Is there a way to clip only the touch ripple?

Hi everyone! How can we give margin between items in compose

Column(
    modifier = Modifier
        .fillMaxSize(),
) {
    val options = getOptions()
    options.forEachIndexed { _, optionText ->
        Card(
            shape = RoundedCornerShape(4.dp),
        ) {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OffWhite)
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = Slate
            )
        }
    }
}

Another question, when I am trying to click on single item, it's clicking on whole another items as well instead of single and color is not changing as well.

Android 13 introduces better word wrapping for Japanese texts. This does not apply to compose, does it? https://developer.android.com/about/versions/13/features#japanese-wrapping.

This message was deleted.

Im facing this scenario using lazyList or BasicInputText. *Already tried to add

android:windowSoftInputMode="adjustResize"

But the result is worst… Keyboard breaks the list.

i am trying to render a composable Preview within AS . I noticed that a render problem occurs because (** are to hide names):

File /Users/**/.gradle/caches/transforms-3/2572c187839b7a83427c4c26c6426e28/transformed/jetified-**-5.4.0/res/font-v26/**.xml does not exist (or is not a file)

This is a depdendency resource file, using the cache. but it actually does exist. is this some file access limitation in AS for Mac?

Hi All, I am currently facing the below issue with compose compiler version 1.2.0 and google decided not to fix it for now. One of the comments in there says setting the floatingActionButton to null would fix the issue. Can someone help me with how to set it to null? I have a lambda inside which I have an if condition based on which I want to show FloatingActionButton and in the other cases I want to set it to null. Thanks! https://issuetracker.google.com/issues/235588730

floatingActionButton =
{
    if (!viewModel.isReadOnly()....) {
                FloatingActionButton(viewModel = viewModel, ...)
        }
}