Action Tiles

For iOS and Android development with Xamarin and Visual Studio

Available exclusively as part of the Action Component suite.

Action ComponentsSample App

About Action Tiles

Action Tiles provides a highly customizable, cross platform tile collection manager for both iOS and Android. Action Tiles allows you to organize several different types, sizes and styles of tiles into collections of groups that the user can scroll through and tap to interact with. For example:

In many cases the same code used to work with an Action Tiles on one platform can be used virtually unchanged on another which not only saves time, but improves code maintainability.

Style and Functionality

Action Tiles provide several different methods to easily adjust their look, feel and behavior. Using the Appearance properties of the Tiles, Tile Groups and the Tile Controller you has full control:

Scroll Direction

You can select either Horizontal or Vertical scrolling and the Action Tile Controller will reflow the tiles to fill the opposite direction and allow the user to scroll in the desired direction:

Tile Sizes

Each Tile Group supports multiple sizes of Tiles with several different built-in sizes. For example, a Quad Sized tile:

Tiles are laid out inside a virtual Cell Grid system that you have full control of using the Appearance property of the Action Tile Controller. Additionally, you can specify custom Tile sizes based oupon this grid. For example:

Several different sizes of Tiles can be mixed within any given Tile Group. When the scroll direction is changed or the device is rotated, the Tiles within given group will be reflowed and laid out like fitting pices into a puzzle:

Tile Types

Action Tile has several types of built-in Tile Styles:

  • Default – A ACTile with a large central icon and optional title on the bottom.
  • DescriptionBlock – A ACTile with a central block of text, and optional title and an optional title image.
  • CornerIcon – A ACTile with an icon 32 x 32 pixel icon in the lower left hand corner and an optional title.
  • TopTitle – A ACTile with a large central icon and optional title on the top line.
  • BigPicture – A ACTile with a large image and optional title on the bottom.
  • Scene – A ACTile with a large image and optional title. This style works best with a ACTileSize of DoubleHorizontal or greater.
  • Accessory – A ACTile with a large image in the upper left hand corner and optional title and subtitle at the bottom. This style works best with a ACTileSize of Quad.
  • CustomDraw – Allows the developer to custom draw the ACTile.

When the CustomDraw style is selected, you can easily take control of the drawing process using the RequestCustomDraw Tile event:

// Create a custom drawn tile in this group
var customTile = group1.AddTile(ACTileStyle.CustomDrawn, ACTileSize.Single, "Picture", "", "", "Polaroid");

// Respond to the draw event
customTile.RequestCustomDraw += (tile, rect) => {

    //Fill with an image
    UIImage image = UIImage.FromBundle("Arrow.jpg");
    image.Draw(rect);

    //Request a standard bottom title bar be drawn
    tile.DrawBottomTitleBar(rect, true);
};

Navigation Bar

The Action Tile Controller includes a built-in Navigation Bar that can optionally be displayed at the top of the controller. You have the option of including buttons (UIButton on iOS or Button on Android) on the left or right hand side of the Navigation Bar to provide added functionality:

Live Update Actions

The Action Tile Controller provides a built-it Live Update system where you can specify that a given Tile or Tile Group automatically updates its content or appearance based on a specified time interval. The following types of updates are provided:

  • Controller Chroma Key – Mutates the color of the given ACTile attached to this ACTileLiveUpdate with in the given brightness range for the given base color.
  • Tile Chroma Key – Mutates the color of the given ACTile attached to this ACTileLiveUpdate with in the given brightness range for the given base color.
  • Group Chroma Key – Causes a random color mutation within a given brightness range off the provided base color for every ACTile in the ACTileGroup attached to this ACTileLiveUpdate .
  • Update Group Color – Changes the background color of every ACTile in the ACTileGroup attached to this ACTileLiveUpdate action to one of the colors listed in sequence.
  • Update Group Color Random – Changes the background color of every ACTile in the ACTileGroup attached to this ACTileLiveUpdate action to one of the colors listed in a random order.
  • Update Tile Color – Changes the background color of the ACTile attached to this ACTileLiveUpdateaction to one of the colors listed in sequence.
  • Update Tile Image – Mutates the image of a selected ACTile by cycling through a list of provided images.
  • Update Tile Text – Changes the title, subtitle and description for the given ACTile.
  • Update Tile Sequence – Runs a sequence of ACTileLiveUpdate actions against the given ACTile.

User Interaction

Resonding to user interaction events couldn’t be easier with Action Tiles. You have the option of responding to TileTouched events for an individual Tile, a Tile Group or the Tile Controller. Additionally, you can use any combination of the above interactions. For example, here is an Action Tile Controller added to an Android app’s Main.xaml file:

using ActionComponents;
using UIKit;
...

// Configure tiles
var tileController = FindViewById(Resource.Id.tileController);
tileController.title = "Home Controller";
tileController.navigationBar.ShowNavigationBar(true);
tileController.scrollDirection = ACTileControllerScrollDirection.Vertical;

// Stop the tile controller from updating while we populate it
tileController.suspendUpdates = true;

// Display as HomeKit style
tileController.appearance.backgroundImage = UIImage.FromResources(Resources, Resource.Drawable.Agreement);

// Style tiles
var sceneSize = 4;
tileController.appearance.cellSize = 50f;
tileController.tileAppearance.titleSize = 14f;
tileController.tileAppearance.subtitleColor = ACColor.FromRGB(100, 100, 100);
tileController.tileAppearance.subtitleSize = 12f;

// Add new group
var scenes = tileController.AddGroup(ACTileGroupType.ExpandingGroup, "Favorite Scenes", "");

scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Evening", "", "", Resources, Resource.Drawable.House);
scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Go to Bed", "", "", Resources, Resource.Drawable.House);
scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Night", "", "", Resources, Resource.Drawable.House);
scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Start Work", "", "", Resources, Resource.Drawable.House);
scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Sunset", "", "", Resources, Resource.Drawable.House);
scenes.AddCustomSizedTile(1, sceneSize, ACTileStyle.Scene, "Wake Up", "", "", Resources, Resource.Drawable.House);

// Add new group
var accessories = tileController.AddGroup(ACTileGroupType.ExpandingGroup, "Favorite Accessories", "");

accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Kitchen Eve Door", "No Response", "", Resources, Resource.Drawable.House);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Patio Eve Humidity", "No Response", "", Resources, Resource.Drawable.House);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Patio Eve Temp", "No Response", "", Resources, Resource.Drawable.House);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Bedroom", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Dining Room Left", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Dining Room Right", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Bloom", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Iris", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Lightstrip", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Table Lamp", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Wicker Bottom", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Living Wicker Top", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Office Desk", "Off", "", Resources, Resource.Drawable.LightOff);
accessories.AddTile(ACTileStyle.Accessory, ACTileSize.Quad, "Office Side Table", "Off", "", Resources, Resource.Drawable.LightOff);

// Wire-up accessories events
accessories.TileTouched += (group, tile) => {
    switch (tile.subtitle)
    {
        case "Off":
            tile.subtitle = "On";
            if (tile.title == "Bedroom")
            {
                // Simulate a light color
                tile.ChromaKeyTile(ACColor.Purple, 50, 250);
            }
            else
            {
                // Just set to white
                tile.appearance.background = ACColor.White;
            }
            tile.icon = UIImage.FromResources(Resources, Resource.Drawable.LightOn);
            break;
        case "On":
            tile.subtitle = "Off";
            tile.appearance.background = ACColor.FromRGBA(213, 213, 213, 240);
            tile.icon = UIImage.FromResources(Resources, Resource.Drawable.LightOff);
            break;
    }
};

// Allow update and automatically refresh the screen
tileController.suspendUpdates = false;

// Display touched tile
tileController.TileTouched += (group, tile) => {
    Console.WriteLine("Touched tile {0} in group {1}", tile.title, group.title);
};

In the above example, the accessories group handles the user tapping a Tile within the Tile Group. Additionally, the tileController handles the user touching any Tile in any Tile Group.

Empower You User Interfaces Today

Download the trial version of Action Components today and empower your iOS and Android apps with powerful new User Interface features.