kotlinlang #compose

Hi folks, I’m drawing an image at “wider than full screen width”, but then panning it to the left as the user swipes in a ViewPager. However, the image gets cut off on the right once the negative offset is applied. Is there a quick way to prevent this?

2 replies · 2 participants

ursus

10/26/2022, 8:57 PM

Hey, is there a know bug where the

onX

colors have some sort of weird tint when used implcitly? I have a parent surface whose color is set to

MaterialTheme.colors.primary

, and then just a simple

Text

where its inferred text color should be
onPrimary
and it some off-white, when it should be pure white If I have another

Text

on top of it which color explicitly set to

onPrimary

then it is white as it should. compose version 1.2.1

Snippet in the thread

19 replies · 3 participants

PHondogo

10/26/2022, 9:03 PM

Hello! How to propagate detectTapGestures events to parent elements?

1 reply · 2 participants

Ryan Smith

10/27/2022, 2:03 AM

Hi all, I'm x-posting this from #compose-desktop since it's relatively generic to get a little more exposure. Could anyone try to help me understand something with

Flow

and

Compose

? One of the predominant lessons I've been learning is "make your composables stateless by hoisting". I'm trying to adhere to this by exposing as much state as makes sense through properties on my view models. For example, my data layer has an in-memory Repository that exposes a collection of items through a

Flow

. My view model is meant to

collect

that flow as state, and expose that state to my

Table

composable to be displayed on the screen. But since

collectAsState

is marked as

@Composable

I can't call it from my view model. As I see it I could either pass the

Flow

directly through my view model to my

Table

composable or stick with

mutableStateOf

and collect the

Flow

internally to the view model and just expose the

MutableState

to my

Table

. More generally, though, it feels like the two ideas "state through the view model" and "collectAsState is Composable-only" are at odds here, which makes me think there's "the way" to do this sort of thing that I'm not seeing right now.

6 replies · 3 participants

10/27/2022, 3:18 AM

I have a LazyColumn in my UI that I want to become a LazyRow when the device is in landscape mode, the easy solution is just copy and paste the code but use LazyRow instead of LazyColumn, but there's probably a more optimized solution for this type of problem. Any ideas?

2 replies · 3 participants

10/27/2022, 3:23 AM

How can I make it so pressing the enter key produces the same behavior as pressing the IME action on the on-screen keyboard?

3 replies · 3 participants

Zoltan Demant

10/27/2022, 5:17 AM

When using downloadable fonts, theres a slight delay before the downloaded font shows up. This looks odd, but Ive managed to work around it by using

FontFamily.Resolver.preload(...)

and only showing my content after the call finishes. Is this a really bad idea? Considering cases where the user has no/bad connectivity, etc. Would I potentially be blocking them from accessing my app for a long time? And if thats the case, is there an alternative?

3 replies · 3 participants

dambakk

10/27/2022, 5:41 AM

I've made this component using SubcomposeLayout. How would I implement a good talkback experience for it? By default it iterates left to right on each row, but top to bottom on each column and then right would be better, and reading out a whole column at a time would be even better. I see that the semantics docs uses a calendar as example but does not give any further guidance on how to properly implement semantics for such complex composables.

2 replies · 2 participants

Hasan Nagizade

10/27/2022, 5:45 AM

how to clear backstack with navigation compose library?

5 replies · 4 participants

svenjacobs

10/27/2022, 7:29 AM

Hello, what is the best “Compose way” to repeat an animation just a specific number of times? For instance I want to highlight a specific item on my screen by shortly flashing the background. Would the following (pseudo) code be okay or are there any better solutions?

enum class BackgroundState { Normal, Highlighted }

@Composable
fun Item() {
    var backgroundState by remember { mutableStateOf(BackgroundState.Normal) }
    val backgroundColor by animateColorAsState(
        targetValue = when (backgroundState) {
            BackgroundState.Normal -> Color.Transparent
            BackgroundState.Highlighted -> Color.Yellow
        },
        animationSpec = tween(),
    )

    LaunchedEffect(Unit) {
        delay(250)
        backgroundState = BackgroundState.Highlighted
        delay(250)
        backgroundState = BackgroundState.Normal
        delay(250)
        backgroundState = BackgroundState.Highlighted
        delay(250)
        backgroundState = BackgroundState.Normal
    }

    Box(modifier = Modifier.background(backgroundColor)) {
        Text("Hello World")
    }
}

Thanks for your help!

13 replies · 5 participants

rcd27

10/27/2022, 9:36 AM

Hello, guys. The idea is to implement some kind of interactive onboarding flow: to highlight different buttons/fields/etc right on the screen, making the background darker (for example). Any thoughts/examples about that? Can we get constraints of a particular Compose element (x,y,width,height) from the parent?

4 replies · 3 participants

Jasmin Fajkic

10/27/2022, 9:42 AM

I have scrollable tab row. Need to put loading indicator full width bellow it. Is this achievable?

10 replies · 2 participants

Hassaan

10/27/2022, 11:26 AM

my first day in compose, so bear with me. There are two ways to alter color or size of text, first by directly using Text parameters and second by using TextStyle parameters, how do they differ or what type should we use often to set color or textSize ? eg in the below given code snippet i have set fontsize twice:

Text(
    text = "Hello world!",
    fontSize = 44.sp, // ist time
    style = TextStyle(
        fontSize = 24.sp,  // ist time
        shadow = Shadow(
            color = Color.Magenta,
            offset = offset,
            blurRadius = 3f
        )
    )
)

6 replies · 5 participants

dambakk

10/27/2022, 1:11 PM

What do I use the SemanticsProperty indexForKey for? What effect does it have?

2 replies · 2 participants

andrew

10/27/2022, 2:20 PM

3 years ago!! w/ compose!

device-2019-10-27-191915.mp4

Pedro Alberto

10/27/2022, 2:29 PM

Is there a way to not resize the button content when we simply place a CirculerProgress inside ?

32 replies · 3 participants

Luis Daivid

10/27/2022, 2:51 PM

I’m trying to make a new app with maps. I’m even thinking about actual distribution. Is it ok to implement with 100% compose? In other apps being developed by the company, it has not been completely converted due to compose navigation.

5 replies · 4 participants

Jasmin Fajkic

10/27/2022, 3:36 PM

Hey guys do you use paging library if you have long list with load more or jetpack compose own implementation? I hit a little bit wall as i have quite simple task that starts to be hard with paging library. I create new post in app and need to add it on top of list. Very simple. And with paging lib it seems it is not easy at all

7 replies · 2 participants

10/27/2022, 5:01 PM

I wanna make my compose app more user friendly on android tv, is there a way to get my UI to layout slightly different, and be able to check in code if it's running on TV so I can show stuff thats not needed on mobile?

50 replies · 4 participants

efemoney

10/27/2022, 8:09 PM

How would I scroll to an item in a lazy list by key? I don’t have the item index unfortunately. My current (bad) idea I’m toying with is copying the entirety of

LazyListState.animateScrollToItem

and making _modifications_™️ but that method will take me a ‘minute’ to understand enough to update.

2 replies · 2 participants

chatterInDaSkull

10/27/2022, 10:41 PM

In compose testing, how does one assert for text color? This answer works but seems slightly old and can’t find somethign newer

1 reply · 2 participants

xxfast

10/27/2022, 11:50 PM

Hi all. Trying to use interop with a pre-written

RecyclerView

within a

@Composable

like this

@Composable
fun ComposeRecyclerView(items: Items) {
  
  val adapter: RecyclerView.Adapter by remember { mutableStateOf( RecyclerView.Adapter()) }

  AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context -> RecyclerView(context) },
    update = { recyclerView ->
      if (recyclerView.adapter == null) {
        recyclerView.adapter = adapter
        recyclerView.adapter?.stateRestorationPolicy =
          RecyclerView.Adapter.StateRestorationPolicy.PREVENT_WHEN_EMPTY
      }
  
      adapter.set(animatedState.items)
    }
  )
}

This doesn't seem to work. Is this the right way to use a legacy

RecyclerView

within Compose? Google is failing me because it keep showing me

LazyColumn

APIs which is not what I'm trying to achieve here 😅

11 replies · 3 participants

10/28/2022, 4:54 AM

Using a selection container is it possible at all to only allow selecting the complete text and block partial selection? I'm displaying a code to the user, so it needs to be copied completely

Kenneth Leong

10/28/2022, 9:12 AM

Are we supposed to use

remember

in a composable which observes a mutableState from a viewModel? e.g.

val state = remember { viewModel.someState }

2 replies · 3 participants

PHondogo

10/28/2022, 9:58 AM

Hello! Does Stable annotation apply also on subclasses/subinterfaces? Or I need to annotate each subclass manually?

1 reply · 2 participants

Daniele Segato

10/28/2022, 12:58 PM

I'm trying to create a modifier to "layout stuff vertically" EDIT: what I mean is: rotated 90 degree. But the composable take the space actually used (if you just rotate it takes the space as if you did not rotate it)

fun Modifier.layoutVertically() =
    rotate(-90f).layout { measurable, constraints ->
        val swappedConstraints = constraints.copy(
            minWidth = constraints.minHeight,
            maxWidth = constraints.maxHeight,
            minHeight = constraints.minWidth,
            maxHeight = constraints.maxWidth,
        )
        val placeable = measurable.measure(swappedConstraints)
        layout(placeable.height, placeable.width) {
            placeable.place(
                x = -(placeable.width / 2 - placeable.height / 2),
                y = -(placeable.height / 2 - placeable.width / 2)
            )
        }
    }

If I have a layout with this modifier inside I can't use Intrinsic sizing, I get this error:

java.lang.IllegalArgumentException: Can't represent a size of 2147483515 in Constraints

5 replies · 2 participants

Luis Daivid

10/28/2022, 2:40 PM

About the bottomBar, is there a way to avoid the view to recompose when switching between tabs ? Let’s say I have a BottomBar with Tab A being a list, and a Tab B being a mapView. In Tab A I scroll the list, then open Tab B and I move the map. Then switch to Tab A, I would like my list to have the position as it where before. Same if I go back to the mapView, I don’t want to lose the map moved by the user.

6 replies · 3 participants

orangy

10/28/2022, 2:57 PM

I wonder if there exists a list of videos and blogs that one should watch/read in order to understand Compose better? Preferably not very Android-centric, but rather how the whole Compose system works from snapshots and states, through groups to slot table, then to build LayoutNodes, and how to properly use it all. Not very deep, like compose compiler plugin, but also not very shallow.

14 replies · 7 participants

igor.wojda

10/28/2022, 6:25 PM

Hey I am struggling to apply

Material You Dynamic Colors

(Material You) across whole app. They are working for the

BottomNavBar

(in the Activity) but not for the Fragments content inside this Activity (see attached image) 🤔 I did:

DynamicColors.applyToActivitiesIfAvailable(this)

inside custom Application class

onCreate

method This is the Fragment code

class FavouriteFragment : BaseFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return ComposeView(requireContext()).apply {
            setContent {
                FavouriteScreen()
            }
        }
    }
}

Here is my android-showcase project demonstrating this issue. Any idea why this may be happening? What am I missing here?

1 reply · 2 participants

Rafs

10/28/2022, 7:13 PM

I am trying to create an icon that will fade into the screen for a few seconds and fade itself out. When the icon is replaced the previous one immediately disappears paving way for the new one to animate itself in and out. Here’s what I’ve come up with but I have a feeling there’s a better way of doing this. Code in 🧵

7 replies · 3 participants

Title

Rafs

10/28/2022, 7:13 PM

/**
 *  This icon fades in and out after a delay whenever [icon] is changed
 *  but disappears immediately [icon] is replaced in the middle of an animation
 */
@Composable
private fun DisappearingIcon(
    icon: ImageVector,
    modifier: Modifier = Modifier,
    contentDescription: String,
    delay: Long
) {
    val alpha = Animatable(0f)

    val animationSpec = tween<Float>(500)

    LaunchedEffect(icon) {
        alpha.animateTo(1f, animationSpec = animationSpec)
        delay(delay)
        alpha.animateTo(0f, animationSpec = animationSpec)
    }

    Icon(
        imageVector = icon,
        modifier = modifier
            .graphicsLayer {
                this.alpha = alpha.value
            },
        contentDescription = contentDescription
    )
}

Francesc

10/28/2022, 7:30 PM

looks like you could use

Crossfade

https://foso.github.io/Jetpack-Compose-Playground/animation/crossfade/

sorry, I sent to channel by mistake, didn't intend to

Rafs

10/28/2022, 7:39 PM

I don’t want to crossfade all the time. I want to preempt the currently running animation when a new icon arrives midway.

mattinger

10/29/2022, 2:56 AM

I don't see anything wrong with what you are doing here. I think i prefer to use the animate function instead:

var alpha by remember { mutableStateOf(0f) }

LaunchedEffect(icon) {
    animate(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = tween(500)
    ) { value: Float, _: Float ->
        alpha = value
    }

    delay(delay)

    animate(
        initialValue = 1f,
        targetValue = 0f,
        animationSpec = tween(500)
    ) { value: Float, _: Float ->
        alpha = value
    }

}

But if you're going to use Animatable, you should probably put it in a remember.

i don't know if there's an advantage of your approach over mine, but either way I think is reasonable.

Rafs

10/29/2022, 7:09 AM

Is the

animate

function new cos I’ve never seen it before. It looks very clean, I’ll try that out

View count: 12