Skip to content

Commit

Permalink
Adding transparent windows information to the Window API tutorial (#1601
Browse files Browse the repository at this point in the history
)

* Adding transparent windows information

Also closes #1339

* Update README.md
  • Loading branch information
akurasov authored Dec 16, 2021
1 parent b2213e3 commit 2640730
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions tutorials/Window_API_new/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)_

0 comments on commit 2640730

Please sign in to comment.