Browse Source

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
pull/1614/head
akurasov 3 years ago committed by GitHub
parent
commit
2640730e4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 43
      tutorials/Window_API_new/README.md

43
tutorials/Window_API_new/README.md

@ -605,3 +605,46 @@ private fun WindowScope.AppWindowTitleBar() = WindowDraggableArea {
}
```
<img alt="Draggable area" src="draggable_area.gif" height="239" />
## 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)_

Loading…
Cancel
Save