0
# UI Tooling and Preview
1
2
Development-time tools for UI preview, testing capabilities, and developer experience enhancements in Compose Multiplatform Desktop.
3
4
## Preview Annotation
5
6
The Preview annotation enables IDE preview functionality for Composable functions.
7
8
### Preview Annotation API
9
10
```kotlin { .api }
11
@Target(AnnotationTarget.FUNCTION)
12
@Retention(AnnotationRetention.BINARY)
13
annotation class Preview(
14
val name: String = "",
15
val group: String = "",
16
val apiLevel: Int = -1,
17
val widthDp: Int = -1,
18
val heightDp: Int = -1,
19
val locale: String = "",
20
val fontScale: Float = 1f,
21
val showSystemUi: Boolean = false,
22
val showBackground: Boolean = false,
23
val backgroundColor: Long = 0,
24
val uiMode: Int = 0,
25
val device: String = Devices.DEFAULT
26
)
27
28
object Devices {
29
const val DEFAULT = ""
30
const val NEXUS_7 = "id:Nexus 7"
31
const val NEXUS_7_2013 = "id:Nexus 7 2013"
32
const val NEXUS_5 = "id:Nexus 5"
33
const val NEXUS_6 = "id:Nexus 6"
34
const val NEXUS_9 = "id:Nexus 9"
35
const val PIXEL_C = "id:pixel_c"
36
const val PIXEL = "id:pixel"
37
const val PIXEL_XL = "id:pixel_xl"
38
const val PIXEL_2 = "id:pixel_2"
39
const val PIXEL_2_XL = "id:pixel_2_xl"
40
}
41
```
42
43
### Preview Usage Examples
44
45
```kotlin
46
import androidx.compose.ui.tooling.preview.Preview
47
import androidx.compose.ui.tooling.preview.Devices
48
49
@Preview(name = "Light Theme")
50
@Composable
51
fun DefaultPreview() {
52
MyAppTheme {
53
MyComponent()
54
}
55
}
56
57
@Preview(
58
name = "Dark Theme",
59
uiMode = Configuration.UI_MODE_NIGHT_YES
60
)
61
@Composable
62
fun DarkPreview() {
63
MyAppTheme {
64
MyComponent()
65
}
66
}
67
68
@Preview(
69
name = "Large Font",
70
fontScale = 1.5f
71
)
72
@Composable
73
fun LargeFontPreview() {
74
MyAppTheme {
75
MyComponent()
76
}
77
}
78
79
@Preview(
80
name = "Custom Size",
81
widthDp = 320,
82
heightDp = 480,
83
showBackground = true
84
)
85
@Composable
86
fun CustomSizePreview() {
87
MyAppTheme {
88
MyComponent()
89
}
90
}
91
```
92
93
## Multi-Preview Annotations
94
95
Create custom preview annotations that combine multiple preview configurations.
96
97
### MultiPreview Example
98
99
```kotlin
100
@Preview(name = "Light Theme")
101
@Preview(
102
name = "Dark Theme",
103
uiMode = Configuration.UI_MODE_NIGHT_YES
104
)
105
@Preview(
106
name = "Large Font",
107
fontScale = 1.5f
108
)
109
annotation class ThemePreview
110
111
@ThemePreview
112
@Composable
113
fun MyComponentPreview() {
114
MyAppTheme {
115
MyComponent()
116
}
117
}
118
```
119
120
## UI Testing Support
121
122
Desktop-specific testing utilities and frameworks.
123
124
### UI Test JUnit4
125
126
```kotlin { .api }
127
interface ComposeUiTest {
128
fun onNode(matcher: SemanticsMatcher): SemanticsNodeInteraction
129
fun onAllNodes(matcher: SemanticsMatcher): SemanticsNodeInteractionCollection
130
fun onNodeWithText(text: String): SemanticsNodeInteraction
131
fun onNodeWithTag(testTag: String): SemanticsNodeInteraction
132
fun onNodeWithContentDescription(label: String): SemanticsNodeInteraction
133
}
134
135
@get:Rule
136
val composeTestRule = createComposeRule()
137
```
138
139
### Test Example
140
141
```kotlin
142
import androidx.compose.ui.test.*
143
import androidx.compose.ui.test.junit4.createComposeRule
144
import org.junit.Rule
145
import org.junit.Test
146
147
class MyComponentTest {
148
@get:Rule
149
val composeTestRule = createComposeRule()
150
151
@Test
152
fun myTest() {
153
composeTestRule.setContent {
154
MyComponent()
155
}
156
157
composeTestRule.onNodeWithText("Click me")
158
.assertIsDisplayed()
159
.performClick()
160
161
composeTestRule.onNodeWithText("Clicked!")
162
.assertIsDisplayed()
163
}
164
}
165
```
166
167
## Tooling Dependencies
168
169
Add UI tooling dependencies to your project:
170
171
```kotlin
172
dependencies {
173
// UI tooling for previews
174
implementation(compose.uiTooling)
175
176
// Preview runtime
177
implementation(compose.preview)
178
179
// UI tooling preview
180
implementation(compose.components.uiToolingPreview)
181
182
// Desktop UI testing
183
testImplementation(compose.desktop.uiTestJUnit4)
184
testImplementation(compose.uiTest)
185
}
186
```
187
188
## Development Features
189
190
Additional development-time features and utilities.
191
192
### Hot Reload Support
193
194
Compose Multiplatform Desktop supports hot reload during development:
195
196
```kotlin
197
// Enable hot reload in development builds
198
compose.desktop {
199
application {
200
// Development configuration
201
jvmArgs("-Dcompose.dev=true")
202
}
203
}
204
```
205
206
### Debugging Tools
207
208
Built-in debugging and inspection capabilities:
209
210
```kotlin
211
// Layout Inspector support
212
@Composable
213
fun DebugLayout() {
214
// Use layout bounds for debugging
215
Box(
216
modifier = Modifier
217
.background(Color.Red.copy(alpha = 0.1f))
218
.padding(8.dp)
219
) {
220
MyComponent()
221
}
222
}
223
```
224
225
### Semantic Tree Inspection
226
227
Access semantic information for testing and debugging:
228
229
```kotlin
230
@Composable
231
fun InspectableComponent() {
232
Text(
233
text = "Hello World",
234
modifier = Modifier
235
.testTag("greeting_text")
236
.semantics {
237
contentDescription = "Greeting message"
238
}
239
)
240
}
241
```
242
243
## Configuration
244
245
Configure UI tooling in your build script:
246
247
```kotlin
248
compose {
249
// Enable compose compiler metrics
250
kotlinCompilerPluginArgs.add("plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" +
251
project.buildDir.absolutePath + "/compose_metrics")
252
kotlinCompilerPluginArgs.add("plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" +
253
project.buildDir.absolutePath + "/compose_reports")
254
}
255
```