UiElements

This documentation is for 1.8.x or above. For 1.3.x, see here. For 1.4.x to 1.7.x, see here

UI elements

All ui elements extend the UiElement class. The following UI elements are currently supported by the framework:

• AnimatedImage
• Button
• Checkbox
• CustomUiElement
• Image
• Label
• ProgressBar
• RadioButton
• ScrollBox
• Select
• Slider
• TabView
• Tab
• TextBox

There are also two utility classes for working with Buttons that contain a Label or Image:

• ImageButton
• TextButton

On top of these elements, there is a layout element for structuring the UI.

• Div
• FlexRow

Finally, to add your elements to the UiContainer, you must use a Container:

• Container

Loading UIs through XML

To simplify creating your UIs, all elements can be loaded and saved using Mdx.xml. The following example shows an AlignedModal which contains two Rows that have a TextButton each.

Note: the root element must always be called data.

<?xml version="1.0"?>
<data id="startGameModal" x="0" y="0" width="320" height="280">
    <visibility>VISIBLE</visibility>
    <children length="2">
    	<value class="org.mini2Dx.ui.element.FlexRow" id="newGameRow">
            <visibility>VISIBLE</visibility>
            <children length="1">
                <value class="org.mini2Dx.ui.element.TextButton" id="newGameButton">
            	    <visibility>VISIBLE</visibility>
            	    <flexLayout>flex-column:xs-12c</flexLayout>
                    <children length="1">
                        <value class="org.mini2Dx.ui.element.Label">
                            <visibility>VISIBLE</visibility>
                            <text>New Game</text>
                            <horizontalAlignment>CENTER</horizontalAlignment>
                        </value>
                    </children>
            	</value>
            </children>
        </value>
    	<value class="org.mini2Dx.ui.element.FlexRow" id="quitGameRow">
            <visibility>VISIBLE</visibility>
            <children length="1">
                <value class="org.mini2Dx.ui.element.TextButton" id="quitGameButton">
            	    <visibility>VISIBLE</visibility>
            	    <flexLayout>flex-column:xs-12c</flexLayout>
                    <children length="1">
                        <value class="org.mini2Dx.ui.element.Label">
                            <visibility>VISIBLE</visibility>
                            <text>Quit Game</text>
                            <horizontalAlignment>CENTER</horizontalAlignment>
                        </value>
                    </children>
            	</value>
            </children>
        </value>
    </children>
</data>

This can then be loaded using standard Mdx.xml calls.

Container container = Mdx.xml.fromXml(Gdx.files.internal("startgamemodal.xml").reader(), Container.class);
uiContainer.add(container);

If you want to call methods on the UI elements, you look look them up by their ID.

TextButton newGameButton = (TextButton) modal.getElementById("newGameButton");

Information on what XML fields are supported by different UiElements can be found on the UiElements XML wiki page.