Forums:

How do I replace the default app title bar in Jetpack Compose for Desktop app ?

Greenhorn

Posts: 1

posted 9 months ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm trying to add a personalized title bar in Jetpack Compose for Desktop app that includes maximize, minimize, close buttons and others controls as I wish.

I've tried like

import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.background
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.window.WindowPlacement
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
import java.awt.Window
import java.sql.Connection
import java.sql.DriverManager
import androidx.compose.foundation.layout.Row
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

@Composable
fun TitleBar(
    modifier: Modifier =Modifier,
    onCloseClick: () -> Unit,
    onMinimizeClick: () -> Unit,
    onMaximizeClick: () -> Unit
) {
    Row(modifier) {
        Icon(Icons.Default.Minimize, contentDescription = "Minimize", onClick = onMinimizeClick)
        Icon(Icons.Default.Maximize, contentDescription = "Maximize", onClick = onMaximizeClick)
        Icon(Icons.Default.Close, contentDescription = "Close", onClick = onCloseClick)
    }
}

fun main() = application {
    Window(
        title = "My App",
        size = IntSize(800, 600),
        state = rememberWindowState(
            placement = WindowPlacement.Floating
        )
    ) {
        val windowState = rememberWindowState()
        val isMaximized = remember { mutableStateOf(false) }
        TitleBar(
            modifier = Modifier.background(Color.Gray),
            onCloseClick = { windowState.close() },
            onMinimizeClick = { windowState.minimize() },
            onMaximizeClick = {
                if (isMaximized.value) {
                    windowState.restore()
                } else {
                    windowState.maximize()
                }
                    isMaximized.value = !isMaximized.value
            }
        )

}
}

But I'm getting a lot of errors.

Also my build.gradle.kts file looks like this

import org.jetbrains.compose.desktop.application.dsl.TargetFormat

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

group = "com.example"
version = "1.0-SNAPSHOT"

repositories {
    google()
    mavenCentral()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

kotlin {
    jvm {
        jvmToolchain(11)
        withJava()
    }
    sourceSets {
        val jvmMain by getting {
            dependencies {
                implementation(compose.desktop.currentOs)
                implementation("org.apache.poi:poi:5.2.3")
                implementation("org.apache.poi:poi-ooxml:5.2.3")
                implementation ("org.apache.logging.log4j:log4j-core:2.20.0")
                implementation("org.jetbrains.exposed:exposed-core:0.42.0")
                implementation("org.jetbrains.exposed:exposed-dao:0.42.0")
                implementation("org.xerial:sqlite-jdbc:3.34.0")
                implementation(compose.materialIconsExtended)
            }
        }
        val jvmTest by getting
    }
}

compose.desktop {
    application {
        mainClass = "MainKt"
        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "FirstKoltlinApp"
            packageVersion = "1.0.0"
        }
    }
}

I'm completely new to Kotlin and Compose for Desktop. Can someone help?

Don't get me started about those stupid light bulbs.