feat(android): global DrawerLayout for BottomNavigation

[m1ga]

⚠️ Work in progress

This PR will add a DrawerLayout around the new BottomNavigation so you don't need to add it in every window and it is in-front of everything.

Bildschirmaufnahme_20250519_195742.webm

const win1 = Ti.UI.createWindow({layout:"vertical"});
const win2 = Ti.UI.createWindow({layout:"vertical"});
const tab1 = Ti.UI.createTab({window: win1, title: 'Tab 1', icon: '/images/appicon.png'});
const tab2 = Ti.UI.createTab({window: win2,title: 'Tab 2',icon: '/images/appicon.png'});

var btn1_1 = Ti.UI.createButton({	title:"toggle left"});
btn1_1.addEventListener("click", function() {	bottomNav.toggleLeft();});
var btn1_2 = Ti.UI.createButton({title:"toggle right"});
btn1_2.addEventListener("click", function() {	bottomNav.toggleRight();});
var btn1_3 = Ti.UI.createButton({title:"change left view"});
btn1_3.addEventListener("click", function() {	bottomNav.leftView = Ti.UI.createView({backgroundColor:"yellow"});});
win1.add([btn1_1,btn1_2, btn1_3]);

var btn3 = Ti.UI.createButton({	title:"toggle left"});
btn3.addEventListener("click", function() {	bottomNav.toggleLeft();});
var btn4 = Ti.UI.createButton({title:"toggle right"});
btn4.addEventListener("click", function() {	bottomNav.toggleRight();});
win2.add([btn3,btn4]);

var leftView = Ti.UI.createView({backgroundColor:'red'});
var rightView = Ti.UI.createView({backgroundColor:'blue'});
const bottomNav = Ti.UI.createTabGroup({
	tabs: [tab1, tab2],
	theme: "Theme.Titanium.Material3.DayNight",
	experimental: true,
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION,
	leftView: leftView,
	rightView: rightView
});
bottomNav.addEventListener("change", function(e){
	console.log("State: " + e.state)
})
bottomNav.open();

Todo:

• Drawer icon
• toggle methods
• events
• docs

I'm copying the parts from the normal DrawerLayout code.

[m1ga]

The last bigger part "showing the icon" is not working 😞

I can add activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true); and it will be visible:

Bildschirmaufnahme_20250725_154737.mp4

but as soon as I click it it will be gone. Opening/closing it with code works and the button is also syncing the state. It just disappears as soon as you click it 🤷

[m1ga]

with the help of opencode.ai I was able to fix the disappearing icon 👍 not 100% happy with the code yet but I'm glad it works