Programmatically add Label to existing ActionBar

android

#1

I am developing a sidedrawer component which should add burger menu button dynamically to the action bar which is created by the component. I am able to it successfully using image with the code that i have got

private setActionBarIcon(page: Page) {
    if (isAndroid) {
        page.actionBar.navigationButton = this.getNavigationButton();
    }

    if (isIOS) {
        page.actionBar.actionItems.addItem(this.getNavigationButton());
    }
}

private getNavigationButton() {
    let navActionItem = new ActionItem();
    navActionItem.icon = 'res://ic_menu_white';
    if (navActionItem.ios) {
        navActionItem.ios.position = 'left';
    }
    navActionItem.on('tap', this.toggleDrawer.bind(this));
    return navActionItem;
}

I want to achieve this functionality using a Label instead of image so that i can change the style of menu button/add any other styling that is required.

Can someone guide me on how can i achieve it?

I tried doing it by

    const label = new Label();
    label.className = "mdi icon-menu";
    label.text = String.fromCharCode(0xe5d2);

    navActionItem._addView(label,0);

However i was not able to get the functionality working. Can someone guide me on what’s that i am doing wrongly? How do i add a Label control as ActionItem at runtime?


#2

Set the label to actionView of ActionItem and add the action item as in your previous example.


#3

Added below code. But does not help.

private setActionBarIcon(page: Page) {
		// if (isAndroid) {
		// 	page.actionBar.navigationButton = this.getNavigationButton();
		// }

		// if (isIOS) {
		// 	page.actionBar.actionItems.addItem(this.getNavigationButton());
		// }

		page.actionBar.actionItems.addItem(this.getNavigationButton());
	}

	private getNavigationButton() {
		let navActionItem = new ActionItem();
		//navActionItem.icon = 'res://ic_menu_white';

		const stackLayout = new StackLayout();

		const label = new Label();
		label.className = "mdi icon-menu";
		label.text = String.fromCharCode(0xf1e0);
		stackLayout._addView(label);

		navActionItem.actionView = stackLayout;

		//navActionItem.text = String.fromCharCode(0xe5d2);
		// navActionItem.className = "mdi"
		if (navActionItem.ios) {
			navActionItem.ios.position = 'left';
		}
		navActionItem.on('tap', this.toggleDrawer.bind(this));
		return navActionItem;
	}

#4

I’m not sure why you have to call _addView in first place. Refer the docs and use the right methods, you suppose to use addchild here.