Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: new control Ti.UI.BottomNavigation #14126

Open
wants to merge 23 commits into
base: master
Choose a base branch
from
Open

Conversation

m1ga
Copy link
Contributor

@m1ga m1ga commented Sep 29, 2024

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",
	experimental: 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
Copy link
Collaborator

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

m1ga commented Oct 2, 2024

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

m1ga commented Oct 5, 2024

Test a different app today and added more parts:
Screenshot_20241005-174416
icon setter, shiftMode

@m1ga
Copy link
Contributor Author

m1ga commented Oct 15, 2024

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

m1ga commented Oct 17, 2024

Floating version is back:
Screenshot_20241017-131630

@m1ga
Copy link
Contributor Author

m1ga commented Oct 19, 2024

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

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

Screenshot_20241019-234001

and with tintColor/activteTintColor support

Screenshot_20241019-235342

@m1ga
Copy link
Contributor Author

m1ga commented Oct 20, 2024

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:
Screenshot_20241020-220819
phone is in dark mode, all colors are set in the TSS file

@m1ga m1ga marked this pull request as ready for review December 14, 2024 15:17
@m1ga
Copy link
Contributor Author

m1ga commented Dec 14, 2024

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
Copy link
Collaborator

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

m1ga commented Dec 15, 2024

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.

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.

2 participants