Screen Resolution

Determining device screen resolution and adapting visual element sizes.

UJML provides several different ways to determine the device context for screen resolution. These are used to adapt visual element dimensions to the device screen sizes at run time. See Position and Size. The colors.ujml sample is a simple example of a UJML program which adapts to a wide range of device capabilities.

Screen width

You can determine the device screen width using the _getIntProperty() function with the &_PROPERTY_INT_SCREEN_WIDTH; device information entity. See _getIntProperty() function, Integer Device Information Entities.

Screen height

You can determine the device screen height using the _getIntProperty() function with the &_PROPERTY_INT_SCREEN_HEIGHT; device information entity. See _getIntProperty() function, Integer Device Information Entities.

Remarks

To avoid evaluating screen resolution values every time a containing element is executed, you should calculate the values once, store the result in variables, and use the variables instead. See Position and Size.

Example

The following example shows how to fill the screen with a black box. It is part of the colors.ujml sample.

Copy Code

<box>
    <!-- Draw the screen black. -->
    <width>
        <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval>
    </width>
    <height>
        <eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;)</eval>
    </height>
    <bg>&_COLOR_BLACK;</bg>
</box>

The following example shows how to precalculate variables based on the screen resolution. It is part of the helloworld4.ujml sample.

Copy Code

mPosX = (_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;) / 2) - (mWidth / 2);
mPosY = (_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;) / 2) - (mHeight / 2);