Images and Checkboxes with the Microsoft Band 2

Question

I am trying to create a tile on the Microsoft Band 2 using Android Studio. I was wondering if it is possible to add images to a button like I would be able to on an android phone. My other question is about checkboxes. Are there checkboxes on the band? If not is there another way to get similar functionality? I need users to be able to click multiple things for a single question. Any help would be greatly appreciated.

Answer 1

For the checkboxes I would do a layout where you have a small text button next to a larger text button within a layout. When the large text button gets clicked, call an update function from your receiver that changes the text of the smaller button (possibly an asterisk or some other character that looks like a bullet point and it seems to appear and disappear). For example, your update function could look like this (slight modification from the example tile code given in the SDK):

private final int bulletTextId = 12;
private final int textButtonId = 21;
private boolean isActiveBullet = false;

private void onButtonClicked(int clickedID) {
    switch (clickedID) {
        case textButtonId:
            String text = "";

            isActiveBullet = !isActiveBullet;
            if (isActiveBullet) text = "*";

            try {
                client.getTileManager().setPages(tileId,
                        new PageData(pageId1, 0)
                                .update(new TextBlockData(bulletTextId, text))
                                .update(new TextButtonData(textButtonId, "Text Button")));
            } catch (BandIOException e) {e.printStackTrace();}

            break;
        default:
            Log.e("", "Unknown button press received");
    }
}

For multiple buttons you might need a map of button to boolean and switch the corresponding ones. If you can't figure that out, comment and I'll follow up.

Originally I was thinking it would make sense to change the background color, but that doesn't seem to be supported by the sdk.

As for using an image for the background, I don't think that is currently supported, just from looking at the function definitions in the sdk source code, but I would actually love to know that for sure as well.

Edit: I found this shortly after posting. It appears you can use bitmaps as masks, but I am not sure how to do that. Hopefully someone will come along and tell us because I would like to know too :)

"8.5.1 Icons Used as FilledButton Masks By defining an Icon bitmap that acts as a mask and then superimposing that Icon over a FilledButton (see Negative Margins ) , you can create the effect of the Icon image becoming visible when the button is pressed. That is, the Icon bitmap is defined to have transparent pixels for the desired image, and opaque pixels els e where . When the user presses the FilledButton , the FilledButton color changes but shows through only the transparent portions of the Icon bitmap. "

And here is other relevant code if you want it:

private PageLayout createButtonLayout() {
    return new PageLayout(
            new ScrollFlowPanel(15, 0, 260, 105, FlowPanelOrientation.HORIZONTAL)
                    .addElements(new TextBlock(0, 0, 20, 45, TextBlockFont.MEDIUM)
                            .setMargins(5, 0, 0, 0)
                            .setId(bulletTextId))
                    .addElements(new TextButton(0, 0, 190, 45).setMargins(5, 0, 0, 0)
                            .setId(textButtonId).setPressedColor(Color.BLUE))
    );
}

private BroadcastReceiver messageReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        if (intent.getAction() == TileEvent.ACTION_TILE_OPENED) {
        } else if (intent.getAction() == TileEvent.ACTION_TILE_CLOSED) {
        } 

        /* ***** THIS IS THE ONLY EVENT WE ACTUALLY CARE ABOUT ***** */
        else if (intent.getAction() == TileEvent.ACTION_TILE_BUTTON_PRESSED) {
            TileButtonEvent buttonData = intent.getParcelableExtra(TileEvent.TILE_EVENT_DATA);
            appendToUI("button is " + isActiveBullet + " ");
            onButtonClicked(buttonData.getElementID());
        } 
    }
};