Skip to content

Example Layouts

On this page, you can see some example layouts to get an idea about how to implement your own.

One cell layout with heading

One Cell Layout

NimmstaLayout {
    name = "One Cell Layout with Heading"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {}
                    cell {
                        name = "mycell"
                        x = 3.0
                        horizontalAlignment = Alignment.CENTER
                        fontSize = 17.pt
                        value = "mycell"
                    }
                    horizontalLine {
                        y = 50.0
                    }
                    cell {
                        name = "text"
                        x = 3.0
                        horizontalAlignment = Alignment.CENTER
                        fontSize = 26.pt
                        wrapMode = WrapMode.WRAP
                        maxLines = 0
                        value = "SOME TEXT WITH WORD WRAP"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="One Cell Layout with Heading">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <statusbar />
                <cell x="3" horizontalAlignment="center" fontSize="17pt" name="heading">HEADING</cell>
                <horizontalLine y="50"></horizontalLine>
                <cell x="3" horizontalAlignment="center" fontSize="26pt" wrapMode="wrap" maxLines="0" name="text">SOME TEXT WITH WORD WRAP</cell>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Two cell layout with headings

Two Cell Layout

NimmstaLayout {
    name = "Two Cell Layout with Heading"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {  }
                    cell {
                        name = "title_lagerort"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = 11.pt
                        value = "STORAGE"
                    }
                    cell {
                        name = "lagerorttest"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        value = "01.00.08"
                    }
                    horizontalLine {
                        y = 110.0
                    }
                    cell {
                        name = "title_artikel"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = 11.pt
                        value = "ARTICLE"
                    }
                    cell {
                        name = "artikeldesc"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        value = "Example Article"
                    }
                    cell {
                        name = "artikeltest"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        wrapMode = WrapMode.WRAP
                        maxLines = 0
                        value = "0123456789"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Two Cell Layout with Heading">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <statusbar />
                <cell x="3" horizontalAlignment="left" fontSize="11pt" name="title_lagerort">STORAGE</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" name="lagerorttest">01.00.08</cell>
                <horizontalLine y="110"></horizontalLine>
                <cell x="3" horizontalAlignment="left" fontSize="11pt" name="title_artikel">ARTICLE</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" name="artikeldesc">Example Article</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" wrapMode="wrap" maxLines="0" name="artikeltest">0123456789</cell>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Three cell layout with headings

Three Cell Layout

NimmstaLayout {
    name = "Three Cell Layout with Heading"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {  }
                    cell {
                        name = "title_bestellung"
                        x = 3.0
                        y = 5.0
                        horizontalAlignment = Alignment.START
                        fontSize = 11.pt
                        value = "ORDER"
                    }
                    cell {
                        name = "bestellungtest"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        value = "#1"
                    }
                    horizontalLine {
                        y = 65.0
                    }
                    cell {
                        name = "title_lagerort"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = 11.pt
                        value = "STORAGE"
                    }
                    cell {
                        name = "lagerorttest"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        value = "01.00.08"
                    }
                    horizontalLine {
                        y = 130.0
                    }
                    cell {
                        name = "title_artikel"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = 11.pt
                        value = "ARTICLE"
                    }
                    cell {
                        name = "artikeltest"
                        x = 3.0
                        horizontalAlignment = Alignment.START
                        fontSize = Size.AUTO
                        wrapMode = WrapMode.WRAP
                        maxLines = 0
                        value = "0123456789"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Success Layout">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <cell x="3" y="5" horizontalAlignment="left" fontSize="11pt" name="title_bestellung">ORDER</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" name="bestellungtest">#1</cell>
                <horizontalLine y="65"></horizontalLine>
                <cell x="3" horizontalAlignment="left" fontSize="11pt" name="title_lagerort">STORAGE</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" name="lagerorttest">01.00.08</cell>
                <horizontalLine y="130"></horizontalLine>
                <cell x="3" horizontalAlignment="left" fontSize="11pt" name="title_artikel">ARTICLE</cell>
                <cell x="3" horizontalAlignment="left" fontSize="auto" wrapMode="wrap"  maxLines="0" name="artikeltest">0123456789</cell>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Counter layout

Counter Layout

NimmstaLayout {
    name = "Counter layout"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {  }
                    cell {
                        x = 15.0
                        y = 40.0
                        horizontalAlignment = Alignment.START
                        fontSize = 34.pt
                        value = "ANZ:"
                    }
                    cell {
                        name = "anzahl"
                        x = 100.0
                        y = 40.0
                        width = 70.0
                        horizontalAlignment = Alignment.END
                        fontSize = 34.pt
                        value = "0"
                    }
                    button {
                        name = "increment1"
                        x = 0.0
                        y = 100.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "+ 1"
                    }
                    button {
                        name = "increment5"
                        x = 67.0
                        y = 100.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "+ 5"
                    }
                    button {
                        name = "increment10"
                        x = 134.0
                        y = 100.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "+ 10"
                    }
                    button {
                        name = "decrement1"
                        x = 0.0
                        y = 150.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "- 1"
                    }
                    button {
                        name = "decrement5"
                        x = 67.0
                        y = 150.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "- 5"
                    }
                    button {
                        name = "decrement10"
                        x = 134.0
                        y = 150.0
                        buttonType = ButtonType.PLAIN
                        horizontalAlignment = Alignment.CENTER
                        width = 65.0
                        height = 50.0
                        value = "- 10"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Counter Layout">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <statusbar />
                <cell x="15" y="40" horizontalAlignment="left" fontSize="34pt">ANZ:</cell>
                <cell x="100" y="40" width="70" horizontalAlignment="right" fontSize="34pt" name="anzahl">0</cell>
                <button x="0" y="100" type="plain" horizontalAlignment="center" width="65" height="50" name="increment1">+ 1</button>
                <button x="67" y="100" type="plain" horizontalAlignment="center" width="65" height="50" name="increment5">+ 5</button>
                <button x="134" y="100" type="plain" horizontalAlignment="center" width="65" height="50" name="increment10">+ 10</button>
                <button x="0" y="150" type="plain" horizontalAlignment="center" width="65" height="50" name="decrement1">- 1</button>
                <button x="67" y="150" type="plain" horizontalAlignment="center" width="65" height="50" name="decrement5">- 5</button>
                <button x="134" y="150" type="plain" horizontalAlignment="center" width="65" height="50" name="decrement10">- 10</button>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Numpad layout

Numpad Layout

NimmstaLayout {
    name = "Counter layout"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    button {
                        x = 5.0
                        y = 5.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "7"
                        value = "7"
                    }
                    button {
                        x = 69.0
                        y = 5.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 62.0
                        height = 45.0
                        name = "8"
                        value = "8"
                    }
                    button {
                        x = 134.0
                        y = 5.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "9"
                        value = "9"
                    }
                    button {
                        x = 5.0
                        y = 53.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "4"
                        value = "4"
                    }
                    button {
                        x = 69.0
                        y = 53.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 62.0
                        height = 45.0
                        name = "5"
                        value = "5"
                    }
                    button {
                        x = 134.0
                        y = 53.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "6"
                        value = "6"
                    }
                    button {
                        x = 5.0
                        y = 101.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "1"
                        value = "1"
                    }
                    button {
                        x = 69.0
                        y = 101.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 62.0
                        height = 45.0
                        name = "2"
                        value = "2"
                    }
                    button {
                        x = 134.0
                        y = 101.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "3"
                        value = "3"
                    }
                    button {
                        x = 5.0
                        y = 149.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 61.0
                        height = 45.0
                        name = "0"
                        value = "0"
                    }
                    button {
                        x = 69.0
                        y = 149.0
                        buttonType = ButtonType.INVERTED_ROUNDED
                        horizontalAlignment = Alignment.CENTER
                        width = 126.0
                        height = 45.0
                        name = "enter"
                        value = "ENTER"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Numpad Layout">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <button x="5" y="5" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="7">7</button>
                <button x="69" y="5" type="inverted_rounded" horizontalAlignment="center" width="62" height="45" name="8">8</button>
                <button x="134" y="5" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="9">9</button>
                <button x="5" y="53" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="4">4</button>
                <button x="69" y="53" type="inverted_rounded" horizontalAlignment="center" width="62" height="45" name="5">5</button>
                <button x="134" y="53" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="6">6</button>
                <button x="5" y="101" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="1">1</button>
                <button x="69" y="101" type="inverted_rounded" horizontalAlignment="center" width="62" height="45" name="2">2</button>
                <button x="134" y="101" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="3">3</button>
                <button x="5" y="149" type="inverted_rounded" horizontalAlignment="center" width="61" height="45" name="0">0</button>
                <button x="69" y="149" type="inverted_rounded" horizontalAlignment="center" width="126" height="45" name="enter">ENTER</button>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Success layout

Success Layout

NimmstaLayout {
    name = "Counter layout"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {  }
                    icon {
                        horizontalAlignment = Alignment.CENTER
                        y = 50.0
                        name = "success_tick"
                        verticalAlignment = Alignment.CENTER
                    }
                    cell {
                        horizontalAlignment = Alignment.CENTER
                        fontSize = 17.pt
                        wrapMode = WrapMode.WRAP
                        maxLines = 0
                        name = "text"
                        value = "Example text with some text and even more text"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Success Layout">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <statusbar/>
                <icon horizontalAlignment="center" y="50" name="success_tick" align="c" />
                <cell horizontalAlignment="center" fontSize="17" wrapMode="wrap" maxLines="0" name="text">Example text with some text and even more text</cell>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>

Error layout

Error Layout

NimmstaLayout {
    name = "Counter layout"
    deviceLayouts {
        deviceLayout {
            screen {
                name = "default"
                isDefaultScreen = true
                staticElements {
                    statusBar {  }
                    icon {
                        horizontalAlignment = Alignment.CENTER
                        y = 50.0
                        name = "error_cross"
                        verticalAlignment = Alignment.CENTER
                    }
                    cell {
                        horizontalAlignment = Alignment.CENTER
                        fontSize = 17.pt
                        wrapMode = WrapMode.WRAP
                        maxLines = 0
                        name = "text"
                        value = "Example text with some text and even more text"
                    }
                }
            }
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<NimmstaLayout name="Error Layout">
    <device width="1.54" height="1.54" pxx="200" pxy="200">
        <screen default="true" name="default">
            <staticElements>
                <statusbar/>
                <icon horizontalAlignment="center" y="50" name="error_cross" align="c" />
                <cell horizontalAlignment="center" fontSize="17" wrapMode="wrap" maxLines="0" name="text">Example text with some text and even more text</cell>
            </staticElements>
        </screen>
    </device>
</NimmstaLayout>