Skip to content

Conversation

m1ga
Copy link
Contributor

@m1ga m1ga commented May 19, 2025

⚠️ 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
Copy link
Contributor Author

m1ga commented Jul 25, 2025

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 🤷

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant