Hyperloop: add custom view to BottomNavigation

[m1ga]

With Hyperloop you can add a custom view to a BottomNavigation on Android like this:

<Alloy>
	<TabGroup style="Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION" onOpen="onOpenTabs" id="tabgroup">
		<Tab id="tab1" title="Home">
			<Window />
		</Tab>
		<Tab id="tab2" title="Chat" icon="icon_chat.png">
			<Window />
		</Tab>
		<Tab id="tab3" title="Friends" icon="icon_friends.png">
			<Window />
		</Tab>
		<Tab id="tab4" title="">
			<Window />
		</Tab>
	</TabGroup>
</Alloy>

const View = require('android.view.View');
const ViewGroup = require('android.view.ViewGroup');
const BottomNavigationView = require('com.google.android.material.bottomnavigation.BottomNavigationView');

function onOpenTabs(e) {
	// find BottomNavigation
	const abstractTabGroup = new View($.tabgroup);
	const rootWin = abstractTabGroup.getParent();
	const bottomNavView = ViewGroup.cast(rootWin).getChildAt(1);
	const bottomNav = BottomNavigationView.cast(bottomNavView);

	// create views (outer full with)
	var v_outer = Ti.UI.createView({
		touchEnabled: false
	});
	// actual content view
	var v = Ti.UI.createView({
		width: 40,
		height: 40,
		borderRadius: 20,
		backgroundImage: "/images/person1.jpg",
		right: 20
	});
	v_outer.add(v);

	// add it to the BottomNavigation
	bottomNav.addView(v_outer);
}

$.tabgroup.open();

In this example it will be placed above the last menu item/tab.

[m1ga]

For a module version check https://github.com/m1ga/ti.bottomNavView

[m1ga]

If you want to change the height of the menu of a normal TabGroup:

change this part:

function onOpenTabs(e) {
	const abstractTabGroup = new View($.tabgroup);
	const rootWin = abstractTabGroup.getParent();
	const topTabMenu = ViewGroup.cast(rootWin).getChildAt(0);
	const tabMenu = ViewGroup.cast(topTabMenu).getChildAt(0);
	var layout = tabMenu.getLayoutParams();
	layout.height = 40
	tabMenu.setLayoutParams(layout);
}