awtk/demos/assets/raw/ui/basic.xml

<window anim_hint="htranslate" move_focus_prev_key="up" move_focus_next_key="down" text="up/down to change focus">
  <app_bar x="0" y="0" w="100%" h="30" >
    <label x="0" y="0" w="100%" h="100%" text="Basic Controls" style:font_size="24" style:text_color="green"/>
  </app_bar>

  <row x="0" y="40" w="100%" h="30" children_layout="default(r=1,c=3,xm=2,s=10)">
    <button name="inc_value" text="Inc" focusable="true" focus="true"/>
    <button name="close" text="Close" focusable="true"/>
    <button name="dec_value" text="Dec" focusable="true" style:focused:text_color="red"/>
  </row>

  <row x="0" y="80" w="100%" h="30" children_layout="default(r=1,c=3,xm=2,s=10)">
    <label style="left" name="left" text="Left"/>
    <label style="center" name="center" text="Center"/>
    <label style="right" name="right" text="Right"/>
  </row>


  <slider name="slider" x="10" y="116" w="240" h="20" value="40" focusable="true"/>
  <progress_bar name="bar1" x="10" y="142" w="240" h="16" value="40" show_text="true"/>
  <progress_bar name="bar2" x="280" y="128" w="30" h="118" value="20" vertical="true"/>

  <column x="20" y="160" w="50%" h="90" children_layout="default(r=3,c=1,ym=2,s=10)" >
    <check_button name="r1" text="Book" focusable="true"/>
    <check_button name="r2" text="Food" focusable="true"/>
    <check_button name="r3" text="Pencil" value="true" focusable="true"/>
  </column>

  <column x="20" y="260" w="50%" h="90" children_layout="default(r=3,c=1,ym=2,s=10)" >
    <radio_button name="font_small" text="Small Font" focusable="true"/>
    <radio_button name="font_normal" text="Normal Font" focusable="true"/>
    <radio_button name="font_big" text="Big Font" focusable="true"/>
  </column>

  <row x="20" y="bottom:60" w="100" h="30" children_layout="default(r=1,c=4)">
    <radio_button style="left"/>
    <radio_button style="middle"/>
    <radio_button style="right"/>
    <check_button style="mute"/>
  </grid>
  
  <grid x="20" y="bottom:10" w="80%" h="40" children_layout="default(r=1,c=5,x=2,s=10)">
    <image draw_type="icon" image="earth" 
      animation="rotation(from=0, to=6.28, repeat_times=0, duration=2000, easing=linear)"/>
    <image draw_type="icon" image="rgba" />
    <image draw_type="icon" image="rgb" />
    <image draw_type="icon" image="message"/>
    <image draw_type="icon" image="red_btn_n"/>
  </grid>

</window>