Android: new control Ti.UI.BottomNavigation

[m1ga]

Work in progress

var win1 = Ti.UI.createWindow({backgroundColor:"red"});
var win2 = Ti.UI.createWindow({backgroundColor:"red"});
var tab1 = Ti.UI.createTab({ window: win1, title: 'Blue', icon: '/images/icon.png'});
var tab2 = Ti.UI.createTab({window: win2,   title: 'Red',   icon: '/images/starmask.png'});

var lbl1 = Ti.UI.createLabel({text:"Text 1", color: "#fff", bottom: 0});
var lbl2 = Ti.UI.createLabel({text:"Text 2", color: "#fff", bottom: 0});
win1.add(lbl1);
win2.add(lbl2);
win1.addEventListener("click", function(){
    tab1.badge = 20;
});

var bottomNav = Ti.UI.createTabGroup({
    tabs: [tab1, tab2],
    theme: "Theme.Titanium.Material3.DayNight",
    newLayout:true,
    style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});
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],
    newLayout:true, // <- new
    style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});

to use the new XML layout.

I'm working on it at the moment :smile:

[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:

https://github.com/user-attachments/assets/478c9fdc-5a9c-4a6d-a721-6d37694ab830

(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