From 2640730e4a77e16a67f40fd5c82b0b7a60987d76 Mon Sep 17 00:00:00 2001 From: akurasov <86794754+akurasov@users.noreply.github.com> Date: Thu, 16 Dec 2021 14:19:59 +0300 Subject: [PATCH] Adding transparent windows information to the Window API tutorial (#1601) * Adding transparent windows information Also closes https://github.com/JetBrains/compose-jb/issues/1339 * Update README.md --- tutorials/Window_API_new/README.md | 43 ++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/tutorials/Window_API_new/README.md b/tutorials/Window_API_new/README.md index f25d122953..d5ea1d419d 100644 --- a/tutorials/Window_API_new/README.md +++ b/tutorials/Window_API_new/README.md @@ -605,3 +605,46 @@ private fun WindowScope.AppWindowTitleBar() = WindowDraggableArea { } ``` Draggable area + +## Transparent windows (e.g. allows to make windows of a custom form) +To create a transparent window it is enough to pass two parameners to the Window function: `transparent=true` and `undecorate=true` (it is not possible to decorate a transparent Window). Common scenario is to combine transparent window with a Surface of a custom form. Below is an example of a round-cornered Window. + +```kotlin +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Surface +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.Window +import androidx.compose.ui.window.application +import androidx.compose.material.Text +import androidx.compose.runtime.* + +fun main() = application { + var isOpen by remember { mutableStateOf(true) } + if (isOpen) { + Window( + onCloseRequest = { isOpen = false }, + title = "Transparent Window Example", + transparent = true, + undecorated = true, //transparent window must be undecorated + ) { + Surface( + modifier = Modifier.fillMaxSize().padding(5.dp).shadow(3.dp, RoundedCornerShape(20.dp)), + color = Color(55, 55, 55), + shape = RoundedCornerShape(20.dp) //window has round corners now + ) { + Text("Hello World!", color = Color.White) + } + } + } +} +``` + +_**Important note:** Window transparency is implemented based on JDK implementation, that contains **known issue on Linux** in case of moving a Window between two monitors with different density. So when you move an App, the Window stops being transparent. And it seems nothing can be done with this situation on Compose side. +[An issue about it](https://github.com/JetBrains/compose-jb/issues/1339)_