I am reading Microsoft band SDK documents. It mentions custom icons in a page layout, but I couldn't figure out how to create one. And I didn't find it in SDK samples. Can someone help to give an example how to use icons in a page layout for Android? I am looking for something like in this Android app, MediaPlayer for Microsoft Band, which has three round icons on a page.
MediaPlayer for Microsoft Band has Icon Buttons, which is a slightly different thing, with icons being overlaid with buttons, but it is also what I do, as you can see in my following pieces of code:
private boolean addTile(BandClient client) throws BandIOException, InterruptedException, BandException {
/* Set the options */
Options opts = new Options();
opts.inPreferredConfig = Bitmap.Config.ARGB_8888;
opts.inScaled = false; /* Flag for no scalling */
Bitmap tileIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.play_pause_tile, opts);
Bitmap playPauseIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.play_pause, opts);
Bitmap nextIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.next, opts);
Bitmap previousIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.previous, opts);
Bitmap volumeUpIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.volume_up, opts);
Bitmap volumeDownIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.volume_down, opts);
Bitmap ringingPhoneIcon = BitmapFactory.decodeResource(getBaseContext()
.getResources(), R.raw.ringing_phone_large, opts);
int hardwareVersion = Integer.parseInt(client.getHardwareVersion().await());
PageLayout layout1 = createLayout1(hardwareVersion);
PageLayout layout2 = createLayout2(hardwareVersion);
BandTile tile = new BandTile.Builder(tileUUIDNew, "Media Control Tile", tileIcon)
.setPageLayouts(layout1, layout2)
.setPageIcons(playPauseIcon, nextIcon, previousIcon, volumeUpIcon, volumeDownIcon, ringingPhoneIcon).
setScreenTimeoutDisabled(true).build();
if (client.getTileManager().addTile(this, tile).await()) {
return true;
}
return false;
}
private PageLayout createLayout1(int hardwareVersion) {
FilledPanel panel;
if (hardwareVersion >= 20) {
panel = new FilledPanel(0, 0, 245, 128);
addLargeElements(panel, 4, 35, TileEventReceiver.PREVIOUS, ElementColorSource.BAND_HIGHLIGHT);
addLargeElements(panel, 68, 35, TileEventReceiver.PLAY_PAUSE, ElementColorSource.BAND_HIGHLIGHT);
addLargeElements(panel, 132, 35, TileEventReceiver.NEXT, ElementColorSource.BAND_HIGHLIGHT);
addElements(panel, 196, 14, TileEventReceiver.VOLUME_UP, ElementColorSource.BAND_HIGHLIGHT);
addElements(panel, 196, 72, TileEventReceiver.VOLUME_DOWN, ElementColorSource.BAND_HIGHLIGHT);
} else {
panel = new FilledPanel(0, 0, 245, 102);
addLargeElements(panel, 4, 22, TileEventReceiver.PREVIOUS, ElementColorSource.BAND_HIGHLIGHT);
addLargeElements(panel, 68, 22, TileEventReceiver.PLAY_PAUSE, ElementColorSource.BAND_HIGHLIGHT);
addLargeElements(panel, 132, 22, TileEventReceiver.NEXT, ElementColorSource.BAND_HIGHLIGHT);
addElements(panel, 196, 4, TileEventReceiver.VOLUME_UP, ElementColorSource.BAND_HIGHLIGHT);
addElements(panel, 196, 56, TileEventReceiver.VOLUME_DOWN, ElementColorSource.BAND_HIGHLIGHT);
}
return new PageLayout(panel);
}
private PageLayout createLayout2(int hardwareVersion) {
FilledPanel panel;
if (hardwareVersion >= 20) {
panel = new FilledPanel(0, 0, 245, 128);
addVeryLargeElements(panel, 69, 27, TileEventReceiver.FIND_PHONE, ElementColorSource.BAND_HIGHLIGHT);
} else {
panel = new FilledPanel(0, 0, 245, 102);
addVeryLargeElements(panel, 69, 14, TileEventReceiver.FIND_PHONE, ElementColorSource.BAND_HIGHLIGHT);
}
return new PageLayout(panel);
}
private void addElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
p.addElements(
new Icon(x, y, 46, 46)
.setId(iconIndex + 10)
.setColorSource(color),
new FilledButton(x, y, 46, 46)
.setId(iconIndex).setBackgroundColor(Color.BLACK));
}
private void addLargeElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
p.addElements(
new Icon(x, y, 60, 60)
.setId(iconIndex + 10)
.setColorSource(color),
new FilledButton(x, y, 60, 60)
.setId(iconIndex).setBackgroundColor(Color.BLACK));
}
private void addVeryLargeElements(FilledPanel p, int x, int y, int iconIndex, ElementColorSource color) {
p.addElements(
new Icon(x, y, 146, 76)
.setId(iconIndex + 10)
.setColorSource(color),
new FilledButton(x, y, 146, 76)
.setId(iconIndex).setBackgroundColor(Color.BLACK));
}
private String updatePages(BandClient client) throws BandIOException, InterruptedException, BandException {
PageData page1 = new PageData(UUID.randomUUID(), 0);
addDataElement(page1, TileEventReceiver.PREVIOUS);
addDataElement(page1, TileEventReceiver.PLAY_PAUSE);
addDataElement(page1, TileEventReceiver.NEXT);
addDataElement(page1, TileEventReceiver.VOLUME_UP);
addDataElement(page1, TileEventReceiver.VOLUME_DOWN);
PageData page2 = new PageData(UUID.randomUUID(), 1);
addLargeDataElement(page2, TileEventReceiver.FIND_PHONE);
client.getTileManager().setPages(tileUUIDNew, page2, page1).await();
return null;
}
private void addDataElement(PageData page, int iconIndex) {
page
.update(new FilledButtonData(iconIndex, Color.GRAY))
.update(new IconData(iconIndex + 10, iconIndex));
}
private void addLargeDataElement(PageData page, int iconIndex) {
page
.update(new FilledButtonData(iconIndex, Color.GRAY))
.update(new IconData(iconIndex + 10, iconIndex));
}
Hope this helps.
P.S. When you are making the images for icons, the Microsoft Band SDK currently only reads the image's alpha channel. This means your image needs to be based on transparency, not color, if you want it to show up on the Band.