<?xml version="1.0" encoding="UTF-8"?>
<stkgui>
    <div x="2%" y="2%" width="96%" height="96%" layout="vertical-row" >

        <box width="100%" height="75%" padding="10" layout="vertical-row">
            <header width="100%" text="Select a type of control that you prefer" align="center" text_align="center" word_wrap="true"/>

            <spacer height="7%" width="10"/>

            <ribbon id="control_type" proportion="1" width="100%" align="center">
                <icon-button id="accelerometer" width="128" height="128"
                        icon="gui/icons/android/accelerator_icon.png" I18N="Control type" text="Accelerometer"/>
                <icon-button id="gyroscope" width="128" height="128"
                        icon="gui/icons/android/gyroscope_icon.png" I18N="Control type" text="Gyroscope"/>
                <icon-button id="steering_wheel" width="128" height="128" 
                        icon="gui/icons/android/steering_wheel.png" I18N="Control type" text="Steering wheel"/>
            </ribbon>

            <spacer height="6%" width="10"/>

            <div width="100%" height="16%" align="center" layout="horizontal-row">
                <label align="center" text_align="left" text="Auto acceleration"/>
                <spacer width="10"/>
                <checkbox width="7%" height="100%" id="auto_acceleration"/>
            </div>

            <label width="100%" text="You can change it later in touch device settings." text_align="left" word_wrap="true"/>

        </box>

        <spacer height="6%" width="10"/>

        <button id="close" text="Apply" align="center"/>
 
    </div>
</stkgui>

