stickers below editfield hide/show blackberry

Question

i am new blackberry 7 development. I am doing a chat application which will have stickers and i have stickers in res folder and now i want add them to chat screen below editfield with hide/show option and i dont know how to do this.please help me out. I have done searching a lot but didnt get answers.

you can see the image with editfield beside that i want to have button with hide/show and below editfield i have show list of stickers. Please help me out.

Answer 1

After so many days I am checking out chat UI now. I got it as I've done hide and show for stickers using managers.

Code as follows :

VerticalFieldManager emojiiVerticalScroll = new VerticalFieldManager(USE_ALL_WIDTH);
VerticalFieldManager stickerhorizontalScroll = new VerticalFieldManager(USE_ALL_WIDTH | VERTICAL_SCROLL | VERTICAL_SCROLLBAR) {

    protected void sublayout(int maxWidth, int maxHeight) {
        setExtent(maxWidth, 250);
        super.sublayout(maxWidth, 250);
    }
};

emojiiBitmapField2 = new BitmapField(emojii1, Field.FIELD_HCENTER | Field.FOCUSABLE) {

    protected void drawFocus(Graphics graphics, boolean on) {
        graphics.setBackgroundColor(0xc4c4c4);
        super.drawFocus(graphics, on);
    };

    protected boolean navigationClick(int status, int time) {
        fieldChangeNotify(1);
        return true;
    };
}; 

Bitmap stickers = Bitmap.getBitmapResource("img/s0010.png");
stickers = bestFit(stickers, Display.getWidth() / 3 - 60, Display.getHeight() / 3, 0);
stikersField = new BitmapField(stickers, Field.FOCUSABLE | DrawStyle.RIGHT) {

    protected void layout(int width, int height) {
        setExtent(60, 60);
        super.layout(60, 60);
    }

    protected void drawFocus(Graphics graphics, boolean on) {
        graphics.setBackgroundColor(0xc4c4c4);
        super.drawFocus(graphics, on);
    }

    protected boolean navigationClick(int status, int time) {
        fieldChangeNotify(1);
        return true;
    }
};

Get all stickers from local store and add to manager.

stickerhorizontalScroll.add(emojiiBitmapField2);
    emojiiBitmapField2.setChangeListener(new FieldChangeListener() {

        Row r;

        public void fieldChanged(Field field, int context) {
            openDatabse();
            int i = field.getIndex() + 1;
            try {
                // 1. create a SQLite DB
                // 3 insert a record
                // 4 query the record
                Statement st3 = db.createStatement("SELECT Name,ImageName FROM Smilies where id=" + i);
                try {
                    st3.prepare();
                } catch (Exception e) {
                    Dialog.alert("Exception" + e.getMessage());
                }
                Cursor c = st3.getCursor();
                while (c.next()) {
                    r = c.getRow();
                    stickerImageName = r.getString(1);
                }
                st3.close();
                closeDatabase();
            } catch (Exception e) {
                System.out.println(e.getMessage());
                e.printStackTrace();
            }
        }
    });
}

Take a boolean variable to show and hide bottom manager.

stikersField.setChangeListener(new FieldChangeListener() {

    public void fieldChanged(Field field, int context) {
        if (!option_sticker) {
            try {
                scrollToBottom();
                ef.setFocus();
                emojiiVerticalScroll.add(stickerhorizontalScroll);
            } catch (Exception e) {
                System.out.println(e.getMessage());
            }
            option_sticker = true;
            setStatus(emojiiVerticalScroll);
        } else {
            option_sticker = false;
            emojiiVerticalScroll.delete(stickerhorizontalScroll);
            // setStatus(stickerVerticalScroll);
            setStatus(emojiiVerticalScroll);
        }
    }
});