https://kotlinlang.org logo
Join Slack
Powered by
Hey guys, have there been any news about liquid gl...
# compose-ios
e
Hey guys, have there been any news about liquid glass support on CMP?
z
What kind of Liquid Glass support are you expecting in CMP exactly?
e
I would actually not expect CMP to support Liquid Glass, but the reason I'm asking is because I saw this investigation ticket https://youtrack.jetbrains.com/issue/CMP-8920/Research-usage-of-Liquid-Glass-components-in-Compose I would like to have the option to use Liquid Glass components on iOS, if possible, though, as I think iOS users will get used to it, and see it as an advantage over apps not using it. Basically I'm considering migrating back to KMP and staying with native UI.
j
I think you can just write your own liquid glass components with expect/actual or you can make the use of libs like calf https://github.com/MohamedRejeb/Calf
👍 1
e
Calf doesn't provide that functionality yet, but I'll try experimenting with the expect/actual route
a
Hi! I did research to check if it's possible to use skiko shaders and implement visual appearance that is close to the liquid glass effect. You can check the project here as an inspiration to implement you own components: https://github.com/Kyant0/AndroidLiquidGlass
❤️ 4
a
I was looking into this today and it seems like ios does have some functionality for creating your own custom components using the liquid glass effect. However I haven't figured out how to use those new apis from kotlin yet. Is it possible? If yes, creating a nice wrapper so that it can be used from Compose should be trivial
I had a go at liquid glass yesterday. I was able to use it on Compose using a UIkitView. However given how the ios interop is done it is not really possible to use it. UikitViews are placed behind Compose. As a result you can not place anything with liquid glass above Compose elements, which defeats the purpose of liquid glass. PS: in the video i am overlaying an effect view over an ui kit image view, and that's how you get something to render
liquid.mp4
👀 1
j
I reached the same conclusion, but I managed to implement an expect/actual composable that draws liquid glass toolbar and tab view over composable content by drawing the content inside SwiftUI, you can read more here 🙂 https://medium.com/@jakubcovajulia/71b7a9ffc56d
kodee loving 2
👏 3
K 3
🚀 1
a
hard to imagine how the code for that looks like but I would imagine you use SwiftUI* as your main toolkit no?
so you can't do stuff like gestures and interactions in compose
j
The whole screen is in compose multiplatform used inside iOS via ComposeUIViewController, then my PlatformScaffold in in the compose screen and it is expect/actual and takes compose content as parameter and draws it inside SwiftUI (that is used as UIKitViewController inside compose)
Scrolling and interacting with the content is handled in compose, clicks on toolbar and tab view are passed into compose
a
And one more solution to add native components on top of Compose view: https://github.com/Infinite-Retry/Snizzors
a
@Andrei Salavei tried this but is not very helpful for what I tried. Even if you can indeed render a ui kit view, you cannot set modifiers to it (like dragging etc). this makes it very difficult the code to reason with
a
Even if you can indeed render a ui kit view, you cannot set modifiers to it (like dragging etc).
Why not? That's really depends. on you needs. Talking about "native view on top" solution - to make compose drag working, you can simply disable interaction for interop view - that will pass all touches to the Compose.
a
you can simply disable interaction for interop view
interesting. i'll try
a
Personally, I think the best long-term solution is to create a set of Liquid Glass components using pure Compose and Skia shaders. There is already one for Android, so I think it's only a matter of time before an iOS implementation appears. (Alternatively, it could be a great opportunity to start your own open-source library.)
a
Just tried. • UIKitView + disabling interactions = you can use modifiers to interact with it, but you can't have transparency • SnizzorsUIView + disabling interactions = you have transparency but it modifiers doesn't seem to work. I'll open an issue in the lib to see if it's possible to support this (done)
k
a
I believe everyone in this thread already knows about 3rd party solutions. I personally do not want to use liquid glass if the effect doesn't come from the system itself. The point is being consistent with the rest of the platform. A 3rd party cannot match that
👆 4
👍 2
f
+1 to that. "We have Liquid Glass at home" is just a workaround. Flutter tried that with other components and is still in the uncanny valley
k
Only included design system in Compose is Material design
f
I am not looking for out of the box experience. Just a way to implement it natively to have the "multiplatform" aspect of Kotlin
a
For me the ideal "liquid glass solution" is: • effect comes straight from the platform • it is applied to compose components OR if it works with interop, it must behave like a normal composable (can set any modifier to it) • I don't mind if I cannot use the native components in my app as long as I can apply the effect to my own composables (either modifier or a 
Surface
kind of composable)
f
Is that even possible if Apple doesn't expose the "raw" shader on the platform?
a
it should be. shader is an implementation detail. if we can get Uikit composables that use the native api to render the effect, and also sit on top of compose so that we get the transparency, and do not consume touch events (so we can handle interactivity on compose) that should do the trick
f
I am just not sure about the "_it must behave like a normal composable (can set any modifier to it)_" part but I agree with your idea
FYI, an interesting library was linked in another thread
7 Views
Open in Slack
PreviousNext
Powered by