Setting up the menu view

This tutorial will guide you through building simple Color Application using UIMenuView.

First of all: Create your app using InAir Blank App Template.

Creating the Main Layout XML File:

Create a menuview_layout.xml in res/layout directory and set up a UIViewGroup that contains our UIMenuView with some specific attributes as below:

<?xml version="1.0" encoding="utf-8"?>
<UIViewGroup
    xmlns:ui="http://schemas.android.com/apk/res-auto"
    ui:positionX="430"
    ui:width="250"
    ui:height="1080"
    ui:boundToContentSize="false">

    <UIMenuView>

    </UIMenuView>
</UIViewGroup>

Then define some attributes for our UIMenuView

<UIMenuView
    ui:height="1080"
    ui:width="500"
    ui:highlightColor="@color/transparent"
    ui:id="@+id/listColor"
    ui:separatorHeight="20"
    ui:themeColor="@color/transparent"
    ui:useDefaultAnimation="false"
    >
</UIMenuView>

Define data template

Create new menuview_item_layout.xml in res/layout. It has a color name next to the correspond color rectangle. This is our UIMenuView item layout.

Complete menuview_item_layout.xml file:

<?xml version="1.0" encoding="utf-8"?>
<UIViewGroup
    xmlns:ui="http://schemas.android.com/apk/res-auto">

    <UIRectView
        ui:height="100"
        ui:width="100"
        ui:color="#ffffffff" />

    <UITextView
        ui:width="250"
        ui:positionX="105"
        ui:positionY="20"
        ui:text="color"
        ui:fontSize="40" />
</UIViewGroup>

Now, just like in UIListView tutorial, we insert <template> element with <DataTemplate> to define the item layout which UIMenuView will display.

UIMenuView
    ui:height="1080"
    ui:highlightColor="@color/transparent"
    ui:id="@+id/listColor"
    ui:separatorHeight="20"
    ui:themeColor="@color/transparent"
    ui:width="500"
    >

    <template>
        <DataTemplate
            ui:templateId="@layout/colorcell_layout"
            ui:templateTag="word"/>
    </template>
</UIMenuView>

Your application is nearly completed. Proceed to the next tutorial to see how you can use Binding to complete the application and some Animations to make your app more visually.

Creating the Main Layout XML File:

Define data template