kotlinlang #compose

I create the following UI on Compose: I use an Image with a small bitmap as a background for the whole screen. On the screen is a list of elements (LazyColumn). Each element uses an Image
with a vector image as a background. When scrolling through the list on a physical Pixel 3, strong lags are observed (everything is ok on emulators). Moreover, if I replace

Image

with

Canvas

and draw images manually through Canvas, then there are no lags when scrolling. Lags are observed in both debug and release versions. Tell me please how to fix the lags?

enighma

03/31/2022, 6:13 PM

I’ve been playing with

LazyVerticalGrid

and I want to have a fixed number of columns but I don’t want it to take all available vertical size. Is there a way to have it wrap on the width? I tried providing

modifier = Modifier.wrapContentWidth()

but it’s still taking all available width

enighma

03/31/2022, 11:36 PM

Re: Compose Navigation Is there any sane/preferred way to create the NavHostController outside of compose, but still be able to setup your navhost using it? In my use case I’m thinking of injecting a nav controller into my VMs, since they are responsible for taking actions on my navigation events (at least in my current arch).

Android75

04/01/2022, 3:34 AM

i don’ tr want use ConsrtrainsLayout but i have to develop a splashscreen with big log to cenrter and a little text (copyright) to bottom. what layout can use Box or two Box? I used two Box

Box(modifier = Modifier
    .fillMaxSize()
    .background(BlueDentPad), contentAlignment = Alignment.Center) {
    Image(
        painter = painterResource(id = R.drawable.logo), contentDescription = null,
        contentScale = ContentScale.FillWidth,
        modifier = Modifier
            .padding(10.dp)
    )
    
}

Box(modifier = Modifier
    .fillMaxSize().padding(10.dp), contentAlignment = Alignment.BottomCenter) {
    Text(text = "Company © 2022", color = Color.White, textAlign = TextAlign.Center)

}

ildar.i [Android]

04/01/2022, 6:44 AM

On some devices keyboard pops up where it shouldn’t. What should I look into to fix it? Also, keyboard sometimes stays after you enter something to TextField and navigate to other screen

wintersoldier

04/01/2022, 2:00 PM

Can someone suggest any good references for converting composable to android views, official documentation is pretty basic. I want to explore the best approaches to do the same .

@Composable
fun CustomTextViewCompose(
    customText: String
) {
    Text(text = customText)
}

--------------------------------

class CustomTextView(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0
) : AbstractComposeView(context, attrs, defStyle) {

    var textString by mutableStateOf("")

    @Composable
    override fun Content() {
        CustomTextViewCompose(customText = textString)
    }
}

This is a very pretty basic sample , when it comes to button and all you may have to update the text and do other things to , how to handle those scenarious?

julioromano

04/01/2022, 2:03 PM

When switching focus (by tapping) between 2 `BasicTextField`s (which both have

keyboardType = KeyboardType.Number

set) I can see the on screen keyboard briefly switching back to

KeyboardType.Text

and then re-switch to

KeyboardType.Number

. It doesn’t happens always. Please see video. Any idea on how to avoid this unnecessary keyboard “flickering”?

screen-20220401-125029_2.mp4

nuhkoca

04/01/2022, 8:12 PM

Hello, I replicate

TopBar

using a

Box

as I needed Scroll-To-Fade animation but icon click is not working as efficient as

TopBar

. In Compose’s

TopBar

, touch target area is working well for navigation and action items as long as you touch within the boundaries of the blue square. Therefore,

IconButton

successfully delegates click action to

Icon

component but in my custom

TopBar

, click behavior is not working as in Compose’s

TopBar

. if I only touch within the boundaries of the red square, I am seeing ripple. How do I fix that? Thank you.

karn

04/02/2022, 12:11 AM

Hey folks, has anyone run into the case with the LazyColumn where mutating the backing list causes each item in the list to be recomposed? Attached is a video example which uses the compose highlighter to track recompositions. You'll notice that when I tap the item it adds a new item to the list but the entire list recomposes. Minimal example is in the thread below:

device-2022-04-01-171108.mp4

Shakil Karim

04/02/2022, 8:02 AM

I am getting

java.lang.IllegalStateException: Already attached to lifecycleOwner

Crash when navigating back i am using navigation-compose:2.5.0-alpha02, is it a known issue?

Alexander Maryanovsky

04/02/2022, 11:07 AM

What do you guys think about a non-inlined

forEach

for

@Composable

functions?

zalewski.se

04/02/2022, 2:30 PM

Is there a composable/modifier that would scale a composable to fit (or preferably fill) in the available space? (something like FittedBox from Flutter)

Tolriq

04/02/2022, 5:56 PM

Is there an easy / simple way to add some delay to:

val animatedColor by animateColorAsState(
  if (isPlaying) Color.Transparent else MaterialTheme.colorScheme.surface,
)

myanmarking

04/02/2022, 6:53 PM

How to show an emptyView with no items in compose paging. It seems impossible. We have to skip the condition for initial load (which the itemCount == 0). Also we cannot rely on endOfPaginationReached because the page can load from any position. Why is this api so hard ?

Icyrockton

04/03/2022, 4:57 AM

why AndroidView read a non-state value , but get recompose everytime, it's expected? code in thread

Android75

04/03/2022, 5:24 AM

I don’ t understand why i can’t have a card with image that filled all card.

Column(modifier = Modifier.fillMaxSize().padding(10.dp)) {
    WPToolBar("Grid", textColor = Color.Blue, showBack = true)
    Spacer16()
    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)) {
        Box(modifier = Modifier.weight(1f).fillMaxHeight()) {
            CardCell()
        }

        Box(modifier = Modifier.weight(1f).fillMaxHeight()) {
            CardCell()
        }
    }
    
    Row(
        modifier = Modifier.fillMaxWidth().weight(1f)) {
        Box(modifier = Modifier.weight(1f).fillMaxHeight()) {
            CardCell()
        }

        Box(modifier = Modifier.weight(1f).fillMaxHeight()) {
            CardCell()
        }
        
    }
}

@Composable
fun CardCell() {
    Card(elevation = 4.dp,  shape = RoundedCornerShape(20.dp) ,modifier = Modifier.fillMaxSize().padding(10.dp)) {
            Image(
                contentScale = ContentScale.Fit,
                contentDescription = null,
                painter = painterResource(id = R.drawable.preview2)

            )
        }
}

nuhkoca

04/03/2022, 6:34 AM

Hello, I have a

LoadingView

that should be centered on the screen but

BoxScope

is not working if I use

CrossFade

animation. It always appears on the left hand corner by default. However, if I do not wrap `Composable`s into

CrossFade

, it is working as expected. Somehow

LoadingView

is losing

BoxScope

. What should I do?

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(it)
        .verticalScroll(scrollState)
) {
    Crossfade(targetState = collectionState) { state ->
        when (state) {
            CollectionState.Loading -> LoadingView()
            ...
        }
    }
}

@Composable
private fun BoxScope.LoadingView() {
    Box(modifier = Modifier.align(Alignment.Center)) {
        TRCircularProgressIndicator()
    }
}

Omar

04/03/2022, 7:02 AM

Hi, how to make some delay in

PasswordVisualTransformation()

TextField

so that user can see what he writes for a while. Like in this video

Screen_Recording_20220403-145018_ShopBack_1.mp4

➕ 2

Gordon

04/03/2022, 8:20 AM

How can i start an animation from gesture detector? I have a custom widget with Canvas and detectDragGestures, when the user finishes drag, i want to complete the gesture if it's not finished. Like if user dragged more then half way, i want to animate the full path to completion.

val currentAnimValue = remember { Animatable(0f) }
//if i put this inside my dragEnd i get: Composable invocations can only happen from the context of a @Composable function
LaunchedEffect(value) {
        currentAnimValue.animateTo(value)
}

And if i do it, on function start, I can't set the current value, so the animation goes from initial value(0f in this case) not the current dragged value

✅ 1

Slackbot

04/03/2022, 9:22 AM

This message was deleted.

Mehdi Haghgoo

04/03/2022, 9:13 PM

Is this extension function from the docs correct?

Android75

04/04/2022, 2:37 AM

I have a strange problem. I use navigation

fun NavigationComponent(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Destination.Splash.path
    ) {
        composable(Destination.Splash.path) {
            Log.i("test"," Splash screen" )
            SplashScreen(navController)
        }
        composable(Destination.Dashboard.path) {
            Log.i("test"," Dashboard screen" )
            DashboardScreen(navController)
        }
        composable(Destination.SectionPage.path+"/{type}") {backStackEntry ->
            Log.i("test"," Sectionpage  screen" )
            SectionPage(navController, backStackEntry.arguments?.getString("type"))

        }
    }
}

I send navController to page.

@Composable
fun SplashScreen(navController: NavHostController?) {

    val viewModel: SplashViewModel= viewModel()
   viewModel.setNavigationController(navController )

I save navController inside ViewModel so i can change page. it works but navigate call screen 2 o 3 time.. i have this log I: Splash screen I: Splash screen I: Splash screen I: Dashboard screen I: Dashboard screen

Android75

04/04/2022, 2:41 AM

i commented Splashscreen content but i have always two “Splash screen” log in

composable(Destination.Splash.path) {
            Log.i("test"," Splash screen" )
            SplashScreen(navController)
        }

:thread-please: 2

Can Korkmaz

04/04/2022, 7:45 AM

Hello, I've some questions regarding compose bottom navigation and navcontroller. I have my navController defined in navigation composable which has routes screen, and bottom navigation bar has 4 Screens. I need current navBackStackEntry and current destination in NavigationBar composable, so to get access to them should I pass navController to HomeScreenComposable and there down to BottomNavigaitonBar? I though it was bad practice to pass navController to composables for testing purposes. Also can i just re-instantiate a navController inside BottomNavigation, would I receive the same navController with the one in ~~main Navigation composable(just above NavHost)~~, I think not? I have enum class and list of tabs declared already by the way. correction: navController defined inside mainActivity inside setContent

abbic

04/04/2022, 8:55 AM

hi all, I'm trying to use a BottomSheetScaffold to achieve an appearance similar to Google maps (see attached pics). it's simple enough to add the bottom sheet content with rounded edges, but I am having trouble replicating the shadow effect that you see in the screens provided. Will provide code samples in reply

thanh

04/04/2022, 11:10 AM

Do we have new compose version for Kotlin

1.6.20

? I see this error with Kotlin

1.6.20

and

kotlinCompilerExtensionVersion '1.1.1'

java.lang.NoSuchMethodError: 'org.jetbrains.kotlin.ir.expressions.impl.IrSetFieldImpl org.jetbrains.kotlin.ir.builders.ExpressionHelpersKt.irSetField(org.jetbrains.kotlin.ir.builders.IrBuilderWithScope, org.jetbrains.kotlin.ir.expressions.IrExpression, org.jetbrains.kotlin.ir.declarations.IrField, org.jetbrains.kotlin.ir.expressions.IrExpression)'
        at androidx.compose.compiler.plugins.kotlin.lower.LiveLiteralTransformer.irLiveLiteralGetter(LiveLiteralTransformer.kt:318)
        at androidx.compose.compiler.plugins.kotlin.lower.LiveLiteralTransformer.visitConst(LiveLiteralTransformer.kt:439)

Vsevolod Kaganovych

04/04/2022, 11:20 AM

Is there a better way to delay the

AnimatedVisibility

execution? Code in thread.

esdrasdl

04/04/2022, 1:09 PM

I’m studying animation with compose and we have in our design system a custom view with a loading animation and I want to migrate it into composable. The behavior: when the view is clicked, it shows an animation. The animation is basically to rotate and move some drawables in a cyclic way. This custom view has a

fun stop(lambda)

. The animation continues until someone call stop(). When it happens, the animation continues until it reaches the initial drawable positions and then it executes the lambda function. In my opinion, the issue is how to continue the animation after a recomposition when the composable state changes. I tried to follow the chart in the docs but I’m no sure which API should I use.

Scott Peterson

04/04/2022, 1:49 PM

What is everyone using as a date picker in Compose land?

dimsuz

04/04/2022, 3:19 PM

When doing custom

Layout

in compose, is it OK to measure a measurable and then not

.place

it? (for example if no space) Or is it better to place it but with 0 height?

Title

dimsuz

04/04/2022, 3:19 PM

When doing custom

Layout

in compose, is it OK to measure a measurable and then not

.place

it? (for example if no space) Or is it better to place it but with 0 height?

Albert Chang

04/04/2022, 3:24 PM

It's ok to not place it.

🙏 2

View count: 5