Toolset enhances UI alignment through grids, guidelines, and rulers, primarily for visual debugging in preview composables and screenshot tests. Offers customization for layout structuring.
A set of tools for Compose to help you align objects: layouts, grids and rulers.
It is intended to be used only with @Preview Composables, in screenshot tests or in custom debug drawers.
The latest release is available on [Maven Central].
repositories {
mavenCentral()
}
Add the dependency:
dependencies {
implementation("at.released.debuglayout:core:0.3.0")
}
Snapshot versions may be published to a self-hosted public repository:
pluginManagement {
repositories {
maven {
url = uri("https://maven.pixnews.ru")
mavenContent {
includeGroup("at.released.debuglayout")
}
}
}
}
Build debuglayout {} modifier with the set of tools you need. For example:
(these examples uses layouts from Now in Android App)
@Preview
@Composable
fun SimpleComposablePreview() {
Box(
modifier = Modifier
.debugLayout {
rowsFromTop(
rows = 1.asRowColumnCount,
height = 56.dp,
color = DebugLayoutDefaults.colorSecondary,
)
rowsFromBottom(
rows = 1.asRowColumnCount,
height = 56.dp,
color = DebugLayoutDefaults.colorTertiary,
)
columnsStretch(
columns = ,
margin = dp,
gutter = dp,
color = DebugLayoutDefaults.colorPrimary,
)
verticalRuler()
}
) {
…
}
}
This library has grids, guidelines, rows columns and rules.
grid() draws a simple grid of a specified size.
fun grid(size: Dp, color: Color, strokeWidth: Dp)
Example:
@Preview
@Composable
private fun SearchToolbarPreview() {
Box(
modifier = Modifier
.debugLayout {
grid(size = 8.dp)
}
) { … }
}
guideline() draws horizontal and vertical guidelines. Position of the guideline can be specified from top, bottom,
right, left, or center, with an optional offset in dp or percents.
fun guideline(
position: DebugGuidelinePosition,
color: Color,
strokeWidth: Dp,
)
Example:
@Preview
@Composable
fun EmptySearchResultColumnPreview() {
Box(
modifier = Modifier
.debugLayout {
guideline(
position = Top(offset = 28.dp.asGuidelineOffset),
color = Color.Blue,
)
guideline(
position = Bottom(dp.asGuidelineOffset),
color = Color.Blue,
)
guideline(
position = Start(dp.asGuidelineOffset),
)
guideline(
position = End(dp.asGuidelineOffset),
)
guideline(
position = CenterHorizontal(),
color = Color.LightGray,
)
guideline(
position = CenterVertical(),
color = Color.LightGray,
)
guideline(
position = Top(offset = (/).asGuidelineOffsetPercent),
color = Color.Yellow,
)
},
) {
…
}
}
There are also a number of auxiliary extensions:
DebugLayout.guidelineFromStart()
DebugLayout.guidelineFromEnd()
DebugLayout.guidelineFromTop()
DebugLayout.guidelineFromBottom()
DebugLayout.guidelineCenterHorizontal()
DebugLayout.guidelineCenterVertical()
Allows you to draw rows of a specified width and columns of a specified height with customized margins and gutters.
fun columns(
// DebugColumnsArrangement: Top | Bottom | Center | Stretch
arrangement: DebugColumnsArrangement,
columns: RowsColumnsCount,
color: Color,
)
fun rows(
// DebugRowsArrangement: Left | Right | Center | Stretch
arrangement: DebugRowsArrangement,
rows: RowsColumnsCount,
color: Color,
)
Example rows from top and bottom:
@Preview
@Composable
{
Box(
modifier = Modifier
.debugLayout {
rows(
arrangement = DebugRowsArrangement.Top(
height = dp,
offset = dp,
gutter = dp
),
rows = asRowColumnCount,
color = DebugLayoutDefaults.colorPrimary,
)
rows(
arrangement = DebugRowsArrangement.Bottom(
height = dp,
offset = dp,
gutter = dp
),
rows = asRowColumnCount,
color = DebugLayoutDefaults.colorSecondary,
)
rows(
arrangement = DebugRowsArrangement.Center(
height = dp,
gutter = dp
),
rows = asRowColumnCount,
color = DebugLayoutDefaults.colorTertiary,
)
},
) {
…
}
}
Columns:
@Preview
@Composable
fun EmptySearchResultColumnPreview() {
Box(
modifier = Modifier
.debugLayout {
columns(
arrangement = Stretch(
gutter = 24.dp,
margin = 82.dp,
),
columns = 3.asRowColumnCount,
color = DebugLayoutDefaults.colorSecondary,
)
columns(
arrangement = DebugColumnsArrangement.Right(
gutter = dp,
width = dp,
offset = dp
),
columns = Auto,
color = DebugLayoutDefaults.colorTertiary,
)
},
) {
…
}
}
Auxiliary extensions:
DebugLayout.columnsFromLeft()
DebugLayout.columnsFromRight()
DebugLayout.columnsFromCenter()
DebugLayout.columnsStretch()
DebugLayout.rowsFromTop()
DebugLayout.rowsFromBottom()
DebugLayout.rowsFromCenter()
DebugLayout.rowsStretch()
horizontalRuler() and verticalRuler() are designed to draw a horizontal or vertical ruler along the edge of
the frame.
You can set the value of the ticks on the ruler: dp, pixels, millimeters or inches and the frequency. You can also adjust the zero position: from top, center or bottom with a defined offset.
fun horizontalRuler(
step: DebugRulerMeasureUnit,
zeroOffset: DebugRulerHorizontalZeroPoint,
)
fun verticalRuler(
step: DebugRulerMeasureUnit = DebugLayoutDefaults.Ruler.step,
zeroOffset: DebugRulerVerticalZeroPoint = DebugRulerVerticalZeroPoint.ZERO,
)
Example of a vertical ruler with 16 dp ticks and a zero position at 16 dp from top:
@Preview
@Composable
fun EmptySearchResultColumnPreview() {
Box(
modifier = Modifier
.debugLayout {
verticalRuler(
step = 16.rulerDp,
zeroOffset = DebugRulerVerticalZeroPoint(
alignment = TOP,
offset = 56.rulerDp
),
)
},
) { … }
}
Example of a horizontal ruler with a step of 10mm and a zero position at 10 mm to the left of center:
@Preview
@Composable
fun EmptySearchResultColumnPreview() {
Box(
modifier = Modifier
.debugLayout {
horizontalRuler(
step = 10.rulerMm,
zeroOffset = DebugRulerHorizontalZeroPoint(
alignment = CENTER,
offset = (-10).rulerMm
),
)
},
) { … }
}
You can also check out this set of predefined layouts as example: Material3DebugLayouts.kt
Any type of contributions are welcome. Please see the contribution guide.
These services are licensed under Apache 2.0 License. Authors and contributors are listed in the Authors file.
Copyright 2024 compose-debuglayout project authors and contributors.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use except compliance the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Surfaced from shared tags and platforms — no rankings paid for.