kotlinlang #compose

Hey, apologies if this is a bit of a boring question. I’ve had a poke at the issue tracker to no avail, I was wondering what tickets / source files should I be watching to see if / when automatic scroll to view type functionality becomes available for lazy layouts? Creating a tv app at the moment (slightly early I know). Would be thinking similar behaviour to the non lazy layouts to allow me to go down the page between the lazy list items and have them scroll into view.

Tolriq

09/23/2021, 7:52 AM

I'm trying to understand recomposition and large state object and it seems that if I collect a StateFlow with :

val state by viewModel.state.collectAsState()

Then all the child of that component are recomposed if any child use any property of the state. What would be a proper way to collect a large state but only update sub component on some part of the state. For example the state contains a media item and a progress state. when only the progress change I only want to recompose the progress bar and not all components that display the media information.

Christoffer Niska

09/23/2021, 8:34 AM

Hello all, 👋🏻 My name is Christoffer and I am a fullstack developer from Helsinki, Finland. I am currently working on an Android app that uses Compose. I have worked with declarative UIs a lot in the past (mainly React/React Native) and I have loved it, Compose is no exception to this. During the past weeks I have worked my way through all of the Compose related material on https://developer.android.com/ and browsed through the sample apps, but I am still struggling to find a good solution for handling UI state changes in my composables. The best example that I have found so far is the Jetnews sample app that uses MutableStateFlow for its UI state. At the moment I am working on the Login screen in our app and I need to react to the following: • I want to hide the keyboard and show a loading state when the user submits the form • I want to show an error and focus the first field if an error occurred • I want to navigate to the overview page if authentication is successful Currently, I have a ViewModel with a MutableStateFlow that is exposed as a StateFlow to the composable. In the composable I consume the state with collectAsState. To detect changes I use remember to store the previous state and compare it to the current state, and execute logic when the state changes using an if and a when statement. I feel that there should be a better way to do this, e.g. subscribe to the UI state, filter out distinct changes to the state, and execute logic when the state changes. Does anyone have any good resources that I can read or view to learn how to properly handle state changes in composable? Thank you in advance. Link to Gist: https://gist.github.com/crisu83/3f3fb978f59ddbda7d74d7a329a4bd44

🧵 2

Napa Ram

09/23/2021, 9:08 AM

HI Team i am facing issue while creating a drop down menu. 1. i want to align text from right side as per below image 2. how to add scrollbar to the dropdown

theapache64

09/23/2021, 9:45 AM

❓ What’s the difference between

@Stable

and

@StableMarker

? 🤔🧵

Napa Ram

09/23/2021, 11:44 AM

Hi All is this good to keep all composable method inside class and let them override composable method if they want to by extending class

Vsevolod Kaganovych

09/23/2021, 2:15 PM

Do we have a way to inject parameters from arguments inside viewmodel from compose navigation with hilt? For example, I have parameter, that I pass and I have

val viewmodel: ViewModel = hiltViewModel()

How do I pass a parameter from arguments to constructor?

Diego Rodriguez

09/23/2021, 3:00 PM

Hi everyone! Sorry if this was already discussed, I'm new here. I have a custom android view and I'm using

AndroidView

to compose it. Now I need to access that view when the user presses a button to get its state. To simplify, I have an EditText and I need its content when the user presses 'Next'. How Can I access the state of that view? I know I could build it from scratch using compose, but I have a lot of custom views and plan to migrate them progressively.

Zoltan Demant

09/23/2021, 3:24 PM

If a

Column

contains two composables with varying height, how can I make sure the bottom one is always visible, despite the top one sometimes using

Modifier.fillMaxHeight

nglauber

09/23/2021, 3:56 PM

I have a

LazyColumn

with multiple `item`/`ìtems`. When I navigate to a “detail” screen, and then go back, the scroll position is lost. Is this the right bug to follow? https://issuetracker.google.com/issues/179397301

Napa Ram

09/23/2021, 4:35 PM

Hi Everyone, can anyone give me any example. how to create UI for Tablet specific in compose and What are the things i should keep in mind while creating UI for tablet

Ahmed Sellami

09/23/2021, 4:48 PM

How can I achieve something like Modifier.elevation(showShadow = false)? I am implementing drag to reorder feature in a list, and I want to make the item on top of others when it is dragged.

Tash

09/23/2021, 6:41 PM

Hi all! Curious if anyone has dealt with building a design system in Compose, where the design system specifies many tokens (in the 100s)… The Jetsnack approach for defining Colors, Type, etc as classes with

MutableState

fields might not be scalable for a system with a lot of tokens. Thinking about possible approaches, esp ones that minimize recompositions as much as possible, such as maintaining a

Map<Token, MutableState<Color>>

etc…Would love some suggestions on this 🙏🏼

Marko Novakovic

09/23/2021, 8:13 PM

is there a way to animate

FontWeight

and

FontSize

Akram Bensalem

09/23/2021, 8:58 PM

Hello! I have an issue that I want to switch to dark mode without using

AppCompatDelegate.setDefaultNightMode(true)

Because when I use that it's blank and I loose the state of some variables. But when using just Theme:

val autColors = if (isSystemInDarkTheme()) DarkColorPalette else LightColorPalette

It works great like I want just with one issue is when navigate from screen to another a white flash apears !!! this happen just with Dark mode. So anyone here was able to solve this issue ?

Eric Boggs

09/23/2021, 9:59 PM

Hey all - I've got an issue that I don't fully understand with MutableStateFlow not triggering a re-compose when a deeply nested value changes. Basically, radio buttons set their value based on their status in state. When one is pressed, it toggles its value in state. Ideally, this should trigger a recompose but it doesn't. Made a little repro here if someone has any thoughts. https://github.com/boggsey/stateflow-test

theapache64

09/24/2021, 3:58 AM

[✅ RESOLVED] Clarification: I was just going through the the official API guideline, and there are some areas I’d be like to get clarification. 🧵 cc @Adam Powell

rajesh

09/24/2021, 4:26 AM

Which (and how) animation api should be used to rotate a icon button (as shown below for camera flipping)

VID-20210924-WA0000.mp4

K Merle

09/24/2021, 5:30 AM

It seems that due to animation during orientation change (from portrait to landscape)

focusRequester.requestFocus()

does not open the keyboard. Adding a 300ms delay does solve the issue it seems. Anyone faces the same issue and were you able to solve it better? I'd like to avoid delay.

LaunchedEffect(Unit) {
    delay(300)
    focusRequester.requestFocus()
}

Erlan Amanatov

09/24/2021, 6:00 AM

How can I animate the height of a composable to 0.dp on some event, something like

shrinkVertically()

ExitTransition in

AnimatedVisibility

iamthevoid

09/24/2021, 7:23 AM

don’t you think that there needs something like firebase-bom for compose and accompanist?

👍 9

👍🏾 1

athos

09/24/2021, 10:18 AM

I am getting a fatal exception in

painterResource()

in a composable where the id for the resource is provided as an argument for the composable and ultimately got from a view model's

StateFlow

property. The id can be one of several dozen, and it always fails on the same one but only if it comes after another specific one, otherwise everything is fine, maybe I am misusing the API somehow? More details in the thread.

myanmarking

09/24/2021, 10:56 AM

if i want to retrieve a themed color in a composable, not coming from the theme, but with corresponding dark/light variant, is this the correct approach for colors:

val error: Color
    @Composable get() = if(isSystemInDarkTheme()) error else error2

Zoltan Demant

09/24/2021, 11:36 AM

Is it possible to make the label of a TextField float to the top even though the input is empty? 😒miling_face_with_tear:

Akram Bensalem

09/24/2021, 11:43 AM

How to delay SplashScreen Core API until we read some data from DataStore in Jetpack compose ?? in the official they use this How to implement the same thing with Jetpack compose ?

👀 3

escodro

09/24/2021, 12:09 PM

Hello, everyone! 👋 Is it possible to use

AlertDialog

with Jetpack Compose Navigation as a destination? When using

dialog()

, if i add a

AlertDialog

in the Composable, the user have to double click outside to dismiss both. And if I don’t use the

AlertDialog

then I will have to implement the title, text and buttons to have the same look and feel. Do you have any suggestions? Thanks a lot! ❤️

Mini

09/24/2021, 12:27 PM

With this code

class SomeClass{
    val list : SnapshotStateList<Int> = mutableStateListOf(5)
}
val someClass = SomeClass()
snapshotFlow { someClass.list }.onEach { println(it.toString()) }.collectIn(scope)

the onEach block is not executed despite mutating the list I must instead explicitly do

snapshotFlow { someClass.list.toList() }

I am kind of confused why this is the case, and I feel like this must be a pitfall Im likely to run into again. Is this the intended behaviour? Could someone explain why?

julioromano

09/24/2021, 1:15 PM

What’s the best API practice for having a composable with a default size but still allow it to be overridden via modifiers?

Title

julioromano

09/24/2021, 1:15 PM

What’s the best API practice for having a composable with a default size but still allow it to be overridden via modifiers?

I was thinking something like:

@Composable
fun SomethingNice(
  modifier: Modifier = Modifier,
) {
  Box(
    modifier = modifier.size(24.dp),
  ) {
    // Something more...
  }
}

It is working. But I was afraid the “default” 24dp modifier would be called after the one passed in via parameter therefore always overriding it. Turns out this is not true. But can’t understand why.

Zoltan Demant

09/24/2021, 1:28 PM

Have you seen this? I havent used it myself in practice, but Ive seen it used in the material library to seemingly do what youre looking for 🙂

Modifier.defaultMinSize()

Adam Powell

09/24/2021, 1:59 PM

Layout sizing modifiers alter the measurement constraints of their element more or less as (pseudocode)

min = max = myRequestedSize.coerceIn(parentSuppliedMin, parentSuppliedMax)

If the incoming constraint range doesn't include the requested size then it will try to get as close as it can

But only the

requiredSize

modifiers override parent constraints

julioromano

09/24/2021, 2:04 PM

Not sure I’m following. What I meant was: If I draw this:

SomethingNice()

It gets drawn at 24dp as expected. And if I draw this:

SomethingNice(modifier = Modifier.size(64.dp))

It gets drawn at 64dp. But it is strange to me as in the code it will happen something like:

@Composable
fun SomethingNice() {
  Box(
    modifier = Modifier.size(64.dp).size(24.dp),
  ) {
    // Something more...
  }
}

Shouldn’t the second call to

.size(24.dp)

override the first call to

.size(64.dp)

Adam Powell

09/24/2021, 2:28 PM

24.coerceIn(64, 64) = 64

24 is out of range of the constraints given by

size(64.dp)

so it's coerced into the constraints of the upstream parent

julioromano

09/24/2021, 2:31 PM

But it works even the other way around (e.g. if I pass in

Modifier.size(12.dp)

) In this case we’d have:

24.coerceIn(12, 12) = ?

But nevertheless

SomethingNice

it is displayed with 12dp size

Wait a sec… so by “the upstream parent” you mean “the upstream modifier” OR the “enclosing (i.e. outer) composable”?

Gosh I’m confused. So there’s no way to create a composable that would size itself to a default value while at the same time offering the (opt-in) possibility of sizing it to any other value?

In the end swapping

modifier = modifier.size(24.dp)

with

modifier = Modifier.size(24.dp).then(modifier)

Solve any issues with sizing I had 🤷

Scott Kruse

09/24/2021, 3:52 PM

Maybe I’m not understanding the question, but can’t you can solve this with default argument for modifier?

julioromano

09/24/2021, 3:53 PM

Nope, because a user may wish to add any modifier other than the size one while still keeping the default size

Adam Powell

09/24/2021, 6:51 PM

You should never need to invert the modifier order that way, you can still change the size externally with the component expressing its own default using the standard ordering.

"upstream parent" means the modifier that comes before it if there is one, or the parent layout composable if there are no more modifiers before it

👍 1

the layout process is one where each parent (and modifier) tells the next link in the chain, "you must be between

min

and

max

size; how big are you?"

Modifier.size

narrows those min and max constraints to be as close to the requested value as possible, within the constraints of how it was measured by its immediate parent (whether that parent is another layout modifier or a layout composable)

so if I write:

@Composable fun DefaultSizeBox(
  modifier: Modifier = Modifier,
  content: @Composable BoxScope.() -> Unit
) = Box(modifier.size(24.dp), content = content)

and then call it like this:

DefaultSizeBox(Modifier.size(64.dp)) {
  Text("Hello, world")
}

then the final modifier for the

Box

created by

DefaultSizeBox

Modifier.size(64.dp).size(24.dp)

. Measurement then proceeds; let's say the parent of the

DefaultSizeBox

measures it with the constraints

(min = 0, max = 500)

(simplified to only one dimension here for the sake of this discussion; both width and height each have a min and max)

👍 1

That measurement operation reaches the first

.size(64.dp)

. 64 is between 0 and 500, so now the measurement proceeds, but with

(min = 64, max = 64)

next, measurement reaches

.size(24.dp)

. 24 is not between 64 and 64; in order to be within that range the constraints are "changed" to

(min = 64, max = 64)

. The final box is measured with those constraints, and reports that it is size 64. The "outer" modifier passed to the

DefaultSizeBox

call thereby overrode the requested default defined in `DefaultSizeBox`'s implementation.

julioromano

09/27/2021, 9:23 AM

Thanks for the thorough explanation Adam, it took a while but I eventually digested all of this 🙂

👍 1

Rafiul Islam

09/28/2021, 11:49 AM

Hey , I goy this far. next, measurement reaches

.size(24.dp)

. 24 is not between 64 and 64; in order to be within that range the constraints are "changed" to

(min = 64, max = 64)

But what happened in this case? 24.coerceIn(12, 12) = ?

julioromano

09/28/2021, 11:53 AM

= 12

https://github.com/JetBrains/kotlin/blob/34e57a45f2d4283be572137b4b497414b8833ee7/libraries/stdlib/common/src/generated/_Ranges.kt#L1189

Rafiul Islam

09/28/2021, 11:56 AM

Ops. I know what coerceIn function does actually It was a stupid question As I see you mentioned you were getting 12. Anyway thanks

View count: 2