Where is <https://developer.android.com/reference/android/view/View#setTranslationZ(float)|translati...

# compose

[Anton Popov]

Where is translationZ in Compose? I want to animate it, but graphicsLayer has only shadowElevation (only for shadows), translationX, translationY

[steelahhh]

There is Modifier.zIndex

[Anton Popov]

Yes, there is. But it only controls

the drawing order for the children of the same layout parent

It does not visually elevate a composable above other composables in background 😔

[Anton Popov]

source

[Adam Powell]

what effect are you looking to achieve? from the initial description here it sounds like shadowElevation is what you're looking for

[Dominaezzz]

You working on a secret 3D phone?

[Anton Popov]

I would like for the "info outlined icon" to elevate on top of the green background with some animation interpolation. Possibly to vibrate. Is this possible with compose without using canvas api?

video.mp4

[Sergey Y.]

I saw something similar recently
Here is the code: https://github.com/prafullmishra/JetComposer

[Sergey Y.]

There is parallax/3d animation

[Anton Popov]

Very interesting example. It only uses

translationX = -getTranslation(angle.first, maxTranslation),
translationY = -getTranslation(angle.second, maxTranslation),

in graphicsLayer, but somehow manages to get clear separation between layers in z direction. How this happens?

[Anton Popov]

When replacing mentioned code snipped with

translationX = alternating,
translationY = alternating,

(just slowly alternating between 0 and maxTranslation)

var alternating by remember { mutableStateOf(0f) }
LaunchedEffect(key1 = Unit) {
    var round = true
    while (true) {
        if (round) alternating += 1 else alternating -= 1
        if (alternating == maxTranslation || alternating == 0f) round = !round
        delay(5)
    }
}

I get this. But front layer also moves diagonally in xy plane, which is unwanted.

video2.mp4