Android: improve BottomNavigation (experimental feature)

[m1ga]

Work in progress

const winMain = Ti.UI.createWindow();
const btn1 = Ti.UI.createButton({title:"current way", top: 10});
const btn2 = Ti.UI.createButton({title:"new way", top: 80});
winMain.add([btn1, btn2]);
winMain.open();

btn1.addEventListener("click", function(){
	openTabs(false);
})
btn2.addEventListener("click", function(){
	openTabs(true);
})

function openTabs(experimental) {
	let win1 = Ti.UI.createWindow({backgroundColor:"red"});
	let win2 = Ti.UI.createWindow({backgroundColor:"red"});
	let tab1 = Ti.UI.createTab({ window: win1, title: 'Blue', icon: '/images/appicon.png'});
	let tab2 = Ti.UI.createTab({window: win2, title: 'Red', icon: '/images/appicon.png'});
	let btnClose = Ti.UI.createButton({title:"close", top: 10});
	let lbl1 = Ti.UI.createLabel({text:"Text 1", color: "#fff", bottom: 0});
	let lbl2 = Ti.UI.createLabel({text:"Text 2", color: "#fff", bottom: 0});
	win1.add([btnClose, lbl1]);
	win2.add(lbl2);
	win1.addEventListener("click", function(){
		tab1.badge = 20;
	});
	btnClose.addEventListener("click", function(){
		bottomNav.close();
	});
	let bottomNav = Ti.UI.createTabGroup({
		tabs: [tab1, tab2],
		theme: "Theme.Titanium.Material3.DayNight",
		experimental: experimental,
		style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
	});

	bottomNav.addEventListener("open", () => {console.log("open")});
	bottomNav.addEventListener("close", () => {console.log("close")});
	bottomNav.addEventListener("focus", () => {console.log("focus")});

	tab1.addEventListener("focus", () => {console.log("tab1 focus")});
	tab2.addEventListener("focus", () => {console.log("tab2 focus")});

	tab1.addEventListener("unselected", () => {console.log("tab1 unselected")});
	tab2.addEventListener("unselected", () => {console.log("tab2 unselected")});

	tab1.addEventListener("selected", () => {console.log("tab1 selected")});
	tab2.addEventListener("selected", () => {console.log("tab2 selected")});

	tab1.addEventListener("click", () => {console.log("tab1 click")});
	tab2.addEventListener("click", () => {console.log("tab2 click")});

	bottomNav.open();
}

Just a test for now.

Currently working:

• opening and adding menu / content
• badge
• automatic menu height (improvement over the current implementation)
• new property: indicatorColor that allows you to set the color of the M3 ItemActiveIndicatorColor

Bildschirmaufnahme_20241002_231752.webm

Current issues:

• when running LiveView and changing the theme M2 -> M3 -> M2 it will still show the M3 theme. Not sure why. Without liveview it works fine
• not all features of the old tabgroup are included

[hansemannn]

Can't you replace the old tab group API with the newer API internally? I do not see iOS implementing the same API as it already has, as it's the same. Ideally, this change would only swap the internal UI behind Ti.UI.TabGroup while retaining the API structure. Legacy things like the style property can be dropped and edge cases like changing themes at runtime as well.

[m1ga]

Pushed my current WIP where I use the old structure and you can use newLayout:true:

var bottomNav = Ti.UI.createTabGroup({
	tabs: [tab1, tab2],
	experimental:true, // <- new
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});

to use the new XML layout.

I'm working on it at the moment 😄

[m1ga]

Test a different app today and added more parts:

icon setter, shiftMode

[m1ga]

icon can now use Ti.App.Android.drawable.something and that can load animated icons too:

Bildschirmaufnahme_20241015_192941.mp4

(demo icon from https://shapeshifter.design/ )

[m1ga]

Floating version is back:

[m1ga]

New property iconFont so you can use icons from a font right away:

'#tabHome': {
	icon: "\ueac1",
	iconFamily: "tabler-icons"
}

and with tintColor/activteTintColor support

[m1ga]

Some updates:

• statusBarColor is available in the TabGroup too (like in the Window)
• you can use flags: Ti.Android.STATUS_BAR_LIGHT to set the Statusbar into light mode (dark text)
• fixed Tab backgroundColor
• some other bugfixes

simple test:

phone is in dark mode, all colors are set in the TSS file

[m1ga]

As I would love to get this out for people to use I've added some docs and examples how to use it.

Note:

As the swipeable functionality is gone and some people might use it I would like to use this whole new setup behind a flag experimental.
This way we can get this out in the next release without breaking anything for existing apps. If people want to use a Material3 theme or new features (like iconFamily) they can set experimental:true to opt-in to this layout.

We are doing this with cameraX already and it worked great. People don't see any changes in existing apps but can opt-in to use new camera features.

Once we are ready to ship a SDK with breaking changes AND we have gathered feedback by people who opt-in already and used the features we can switch them on by default.

Thoughts about this?

[hansemannn]

• I would call the property experimental which is more common for properties that can be tested already but have their hiccups
• The "iconFamily" property feels odd, as I would rather expect it to be handled in the icon directly, maybe similar to what we do for Vue apps, e.g. i-heroicons-chevron-right
• We need a lot of testing regarding activity handling especially posibble memory leaks / state management, back button handling possible changes for modules, e.g. ti.facebook, that use the tab group as the worker proxy

[m1ga]

I'll change the property to experimental. Sounds a lot better 👍

iconFamily is the same as fontFamily for the text. But since I want to drive the fontFamily of the icon I've named it iconFamily. It works the same way as when you use an icon font in a Ti.UI.Label: set the unicode value and the icon font.

[m1ga]

small event/example update:

• fixed the unselected event und added focus for the first tab when you open it
• extended the example so you can compare the current and new implementation right away
• duplicated the bottomnavigation tests to use experimental:true too (requires fix: make android mocha tests run again #14158 )
• fixed a null exception if title is empty