Good Saturday :)

hello, Marek!

how can I help you today?

I was building this layout for some kind of shop page

I already asked about it but to refresh

there is header image

some info about the shop

and what you can buy there

image url is from room

information is from one endpoint that is usually fast

and products take longer time to generate so they come last

the image is constrained to the height of the views below

so initally the image takes 80% of the screen

when info loads it's 70%

and products may push the image to minimum saize about 30%

and they scroll (view)

I use animateLayoutChanges

=true and I am pretty amazed this works

except the image resizing does not look so good

is centerCrop

because the way we send images is per device in theory (we give width of the device and server generates url)

so if the shop sells electronics, every device should get let's say a chip in the center

so my question is

can I do something about this image scaling

and if I did not know about the animateLayout changes, how I could write my own animation to animate that data appearing

how are you populating the ImageView? are you using Glide? Picasso? something else?

Glide

the room + glide is often the fastest

OK, and are you just having Glide load the image once? or are you telling it to reload the image after the resize operation?

no only once

that means Glide is probably initially scaling the image to the ImageView's original size, and ImageView is scaling it thereafter as the ImageView gets smaller

yes that's true

can you describe a bit about "does not look so good"? what sorts of effects are you seeing?

you could try telling Glide to re-populate the ImageView after a size change, which may improve the look of the image, but I can't guarantee it

ok

i am trying to revise it once again, what was the effect

one thing is that this image first shows vertically, you have the important element in the center

then you have it bit above

and the 3rd phase is at the top

but I guess that was the algorithm to keep it at the center

but this could be perhaps smoother

sorry, but I did not really understand any of that

animations are not the sort of thing that a text chat is well-suited to help debug :-)

yes

well if you have cropCenter

and you have that important element

is well at the center

if the image gets smaller height and is laid as a header

then this element appears somewhere higher

I infrequently use cropCenter, and I doubt I have ever dynamically changed the size of an ImageView using cropCenter

if you are saying that after the resize, it is no longer cropping at the center... other than having Glide update the ImageView again, I'm not certain what you can do

if you have Glide's caching enabled, this will not involve a second load of the image from your server

I mean that was our goal to show that element always in relation to that shop

so we cannot complain now is jumping like crazy

teh other thing was that we had visible blink(s) between those states

but I just recently moved animatedLayoutChanges to the style of root view

so I think all the viewgroups started scaling

and I don't see it anymore

this is much simpler version of what I have now

because layout got bit more complex so I think is laying out slowly

well, your image aspect ratio is changing, which is why the effects of cropCenter appear to be changing

rather, your ImageView aspect ratio is changing

unless you have the ImageView maintain its aspect ratio as you reduce its height, you will have that effect

if this is a ConstraintLayout, and if all of these images will have the same aspect ratio (e.g., 4:3), you could tell ConstraintLayout to keep the ImageView at that aspect ratio and let the height vary

however, that will give you white bars on the sides, as the ImageView reduces both width and height when the height changes

I should have take a picture with human

because this effect is more visibile

I mean if we don't do that cropCenter

it would stop showing a face of the person

that does not really change the nature of the problem, though

if you want the image to appear to stay steady and just reduce in size, you need to reduce the height and width evenly, keeping the ImageView aspect ratio the same

well certainly we don't want white bars anywhere

I think the problem is that it looks as it jumps to the states

then you will have to live with the fact that the portion of the image that you see will change, as the aspect ratio of the ImageView changes

the image gets smaller, the adding to the layout below is animated

but ImageView is not a viewgroup

so it just shrinks to next state and effect is that I have starting picture bigger and ending picture smaller

I think is visible in the video I made

the adding of thos text has some animation

but the ImageView just gets next state and resizes

so what I would like to achieve is to get smooother change from height of 80% to 50%

you could try using https://developer.android.com/training/transitions or https://developer.android.com/training/constrai... or animate a switch between ConstraintSets

ok, I just found something like this

the thing under the demo behaves nicely

I mean this what I am seeing in github, not that I tried it

but that would be effect we want to have

is bit small but the face of the actress is always in the center

I have never tried to animate a size change like this, and so I cannot tell you precisely how to do it

ok!

AFAIK, animateLayoutChanges applies a very simple approach to the animations, and it may not be designed for your specific scenario

but, there are plenty of animation solutions out there, including the ones that I listed earlier, plus your library and others

yes I found some, including those you posted above, they require some investigation

this animateLayout changes blowed my mind

is just one line of code and the effect is allright

yes, but you also encountered its limitations

MotionLayout is where Google is putting most of their animation efforts for View-based layouts

well this works for ViewGroups and ImageView is not

I will wrap it in the FrameLayout and see :D

well, your TextViews are not ViewGroups either

I assume, in that demo, that the ImageView and the TextViews are all in the same container

so, I do not know if the issue is that animateLayoutChanges does not animate size changes, or if the problem is in when/how ImageView adjusts its centerCrop effect, or what

CL, ImageView, NestedScrollView with LinearLayout (animateLayoutChanges), Buttons

ah, OK

so the textViews are added to LL and this is animated

you might try dumping the LinearLayout, then

actually, that won't help

because of the NestedScrollView

I thought NSV requires a single child

yep

I suppose you could try putting animateLayoutChanges on both the LinearLayout and the root ConstraintLayout

right now, your ImageView is not inside a container that uses animateLayoutChanges

no difference

ah, well, it was worth a try

but animateLayoutChanges animates changes in its own ViewGroup, not to widgets that happen to be elsewhere on the screen

yes I perhaps only when views are added

In my complex layout in real world I added only to the view that gets the products

it was ok-ish

but until I added it as a style to root view

it was ok-ish, and now is almost perfect

if it hadn't been for that image :)

at this point, I am out of ideas

thank you for your help

sorry I did not have better answers for you!

was nice to discuss

different question

this is called idiomatic kotlin

I would phrase this page as being a bunch of tips about Kotlin operations

here, "Idioms" != "Idiomatic"

ah right

IMHO, it is not a great name for the page

that being said, the particular tip that you linked to is a pretty common pattern, though whether you compare with true or false would depend on your situation

and if you are using null to indicate a third state, then you would probably use a when(value) {} to handle that

ah that's might be more readable

if (b ?: false) I would write this one

the example you linked to is for cases where you want to treat null as being equivalent to one of the other states

that should work as well, for cases where you want to treat null as false

we had if (string?.isBlank() == true) and I think that would be equivalent to if (!string.isNullOrBlank())

but that's negative if so two conditions to reverse

sorry if (string?.isNotBlank()) was the left

still I don't need to think about nullability of the string, is clearer to see to me

but I guess that might be personal for everyone

yeah, I'd have to play around with that in Klassbook or something to confirm the equivalency, but I agree that using isNullOrBlank() and functions that work on String? are easier to read

oh we reached the end of the chat!

thanks for your time

you're welcome!

have a pleasant day!