tidev / titanium-sdk

🚀 Native iOS and Android Apps with JavaScript
https://titaniumsdk.com/
Other
2.76k stars 1.21k forks source link

fix(android): fix Material3 BottomNavigation height #14110

Closed m1ga closed 1 week ago

m1ga commented 2 months ago

New PR:

I've only add the note in the docs as I've started a rewrite of the BottomNavigation in another PR.

Old PR (just as a reference):

SO issue in native land: https://stackoverflow.com/questions/72062902/how-do-i-get-the-bottom-navigation-bar-height-for-material-design-3 and some screenshots.

Currently we use design_bottom_navigation_height for the height of the bottom navigation (56dp). It looks like Material 3 is using m3_bottom_nav_min_height (80dp).

We need to check if the app is using a Material3 theme and then use the new dimens value.

Test

var win1 = Ti.UI.createWindow({});
var tf = Ti.UI.createTextField({ bottom: 0, width: Ti.UI.FILL, borderWidth: 1, borderColor: "yellow"})
var win2 = Ti.UI.createWindow({});
win1.add(tf);

var tab1 = Ti.UI.createTab({ window: win1, title: 'Blue' }),
    tab2 = Ti.UI.createTab({ window: win2, title: 'Red'}),
    tabGroup = Ti.UI.createTabGroup({ tabs: [tab1, tab2],
        theme: "Theme.Titanium.Material3.DayNight",                              // <- remove for Material 2
        style: Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
    });
tabGroup.open();

Yellow text field should be fully visible in the tab.

Questions: Can we use activity.getTheme().toString().indexOf("Material3") to check for Material3 theme?

Workaround If you use M3 in your app you can add /app/platform/android/res/values/dimens.xml with

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="design_bottom_navigation_height">80dp</dimen>
</resources>

to override the current value.

m1ga commented 1 month ago

This will just add a note to the docs now. As many people still use the old M2 themes and I've started a rewrite of the BottomNavigation in a different PR it should be enough for now. If you use a M3 theme you have to add the XML file with the height yourself

hansemannn commented 1 month ago

It can only be seen as a workaround, as we definitely need the "clean" solution from the other PR