@nativescript-community/ui-appbar 1.0.3 → 1.1.0

package/index.android.js

@@ -1,11 +1,15 @@
-import { ActionBar, Application, Color, Page, Utils } from '@nativescript/core';
+import { ActionBar, Application, Color, ContentView, FormattedString, ImageSource, Page, TextField, Utils } from '@nativescript/core';
 import { createNativeFormattedText } from '@nativescript-community/ui-core/formatted-text';
-import { getNativeIcon } from '@nativescript-community/ui-menu';
-import { AppBarBase, AppBarItem, AppPageOverlay, AppPageSearchContent, notifyBottomItemTap } from './index-common';
-export { AppBarItem, AppPageOverlay, AppPageSearchContent };
+import { getNativeIcon, showMenu } from '@nativescript-community/ui-menu';
+import { AppBarBase, AppBarBottomView, AppBarItem, AppBarSearchField, AppPageOverlay, AppPageSearchContent, notifyBottomItemTap } from './index-common';
+export { AppBarBottomView, AppBarItem, AppBarSearchField, AppPageOverlay, AppPageSearchContent };
 const MATCH_PARENT = -1;
 const WRAP_CONTENT = -2;
 const COLLAPSE_MODE_PIN = 1;
+const MATERIAL_NAVIGATION_ICONS = {
+    ic_menu_back: 'abc_ic_ab_back_material',
+    ic_menu_close_clear_cancel: 'abc_ic_clear_material'
+};
 function getActionBarSize(context) {
     const value = new android.util.TypedValue();
     if (context.getTheme().resolveAttribute(16843499 /* android.R.attr.actionBarSize */, value, true)) {
@@ -18,7 +22,35 @@ function getMaterialAttr(name) {
 }
 /** a color of the Material theme (colorSurface, colorOnSurface...) */
 function getThemeColor(view, name, fallback) {
-    return com.google.android.material.color.MaterialColors.getColor(view, getMaterialAttr(name), fallback);
+    // the theme of a view context is a copy made when the view was created: with dynamic colors it keeps the day/night colors of that time.
+    // The theme of the activity is the one that is applied again when the mode changes
+    const activity = Application.android.foregroundActivity || Application.android.startActivity;
+    return com.google.android.material.color.MaterialColors.getColor(activity || view.getContext(), getMaterialAttr(name), fallback);
+}
+let noShadowOutline;
+/** a view that only takes part in the stacking order (elevation) casts no shadow */
+function getNoShadowOutline() {
+    if (!noShadowOutline) {
+        // @ts-ignore abstract class: extended through the runtime
+        const NoShadowOutline = android.view.ViewOutlineProvider.extend({ getOutline: (_view, outline) => outline.setEmpty() });
+        noShadowOutline = new NoShadowOutline();
+    }
+    return noShadowOutline;
+}
+/** the SearchBar draws its fill in a MaterialShapeDrawable under a ripple / focus ring layer */
+function findShapeDrawable(drawable) {
+    if (drawable instanceof com.google.android.material.shape.MaterialShapeDrawable) {
+        return drawable;
+    }
+    if (drawable instanceof android.graphics.drawable.LayerDrawable) {
+        for (let index = 0; index < drawable.getNumberOfLayers(); index++) {
+            const found = findShapeDrawable(drawable.getDrawable(index));
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
 }
 function toNativeColor(value) {
     if (!value) {
@@ -106,20 +138,33 @@ export class AppBar extends AppBarBase {
             toolbar.setOverflowIcon(wrapped);
         }
     }
-    // the back arrow of the core is the old holo one: use the Material arrow
+    // the back arrow and the close icon of the core are the old holo ones: use the Material (appcompat) ones
     _updateNavigationButton() {
         // @ts-ignore
         super._updateNavigationButton();
         const nav = this.navigationButton;
         const toolbar = this.nativeViewProtected;
-        if (nav && nav.visibility === 'visible' && nav.android?.systemIcon === 'ic_menu_back') {
+        const drawableName = nav?.visibility === 'visible' ? MATERIAL_NAVIGATION_ICONS[nav.android?.systemIcon] : undefined;
+        if (drawableName) {
             const context = this._context;
-            const id = context.getResources().getIdentifier('abc_ic_ab_back_material', 'drawable', context.getPackageName());
+            const id = context.getResources().getIdentifier(drawableName, 'drawable', context.getPackageName());
             if (id) {
                 toolbar.setNavigationIcon(androidx.core.content.ContextCompat.getDrawable(context, id));
             }
         }
     }
+    _addViewToNativeVisualTree(child, atIndex) {
+        // the page places them (search field, floating toolbar), not the toolbar
+        return child === this.searchField || child === this.bottomView || super._addViewToNativeVisualTree(child, atIndex);
+    }
+    _removeViewFromNativeVisualTree(child) {
+        if (child === this.searchField || child === this.bottomView) {
+            const nativeChild = child.nativeViewProtected;
+            nativeChild?.getParent()?.removeView(nativeChild);
+            return;
+        }
+        super._removeViewFromNativeVisualTree(child);
+    }
     onAppBarPropertyChanged() {
         super.onAppBarPropertyChanged();
         const page = this.page;
@@ -127,6 +172,15 @@ export class AppBar extends AppBarBase {
             page.syncAppBar();
         }
     }
+    // @ts-ignore
+    _onTitlePropertyChanged() {
+        // @ts-ignore
+        super._onTitlePropertyChanged();
+        const page = this.page;
+        if (page instanceof AppPage) {
+            page.syncAppBar();
+        }
+    }
     update() {
         super.update();
         const page = this.page;
@@ -134,15 +188,44 @@ export class AppBar extends AppBarBase {
             page.syncAppBar();
         }
     }
+    /** the toolbar is hidden while the SearchBar hosts the actions: the menu opens under the SearchBar */
+    getMenuAnchor() {
+        const page = this.page;
+        const searchBar = page instanceof AppPage ? page.hostingSearchBar : null;
+        return searchBar ? { nativeViewProtected: searchBar } : this;
+    }
+    closeSearch() {
+        const page = this.page;
+        return page instanceof AppPage ? page.closeInlineSearch() : false;
+    }
+    focusSearch() {
+        const page = this.page;
+        return page instanceof AppPage ? page.openInlineSearch() : false;
+    }
     _addActionItems() {
         // @ts-ignore
         super._addActionItems();
+        this.applyItemIcons();
         this.syncBadges();
-        if (this.searchable && this.searchMode !== 'bar') {
+        if (this.searchable && this.searchMode === 'collapsible') {
             this.addSearchItem();
         }
         this.applyTints();
     }
+    /** core only loads string icons: an ImageSource or a FormattedString (font icon) is converted here */
+    applyItemIcons() {
+        const menu = this.nativeViewProtected.getMenu();
+        const items = (this.actionItems?.getVisibleItems() ?? []);
+        items.forEach((item) => {
+            const icon = item.icon;
+            if (icon instanceof ImageSource || icon instanceof FormattedString) {
+                const drawable = getNativeIcon(icon);
+                if (drawable) {
+                    menu.findItem(item._getItemId())?.setIcon(drawable);
+                }
+            }
+        });
+    }
     /** the badges of the actions (a number, a text or a dot): attached once the action views exist */
     syncBadges() {
         const toolbar = this.nativeViewProtected;
@@ -243,7 +326,24 @@ export class AppPage extends Page {
     constructor() {
         super(...arguments);
         this._scrollBehavior = 'none';
+        // the activity handles `uiMode` itself (no recreate): the theme resolves the new colors right away, but the views keep the ones they were created with
+        this._appearanceListener = () => {
+            const bar = this.hasActionBar ? this.actionBar : null;
+            if (bar instanceof AppBar) {
+                bar.update();
+            }
+            else {
+                this.syncAppBar();
+            }
+            this.syncStatusBarIcons();
+        };
         this._searchBarSetup = false;
+        // the native view of a hosted view of the bar is created after the bar is added to the page
+        this._syncOnLoaded = (args) => {
+            args.object.off('loaded', this._syncOnLoaded);
+            this.syncAppBar();
+        };
+        this._inlineOpen = false;
         this._bottomBadges = [];
     }
     /** the CollapsingToolbarLayout of a medium / large bar */
@@ -281,6 +381,10 @@ export class AppPage extends Page {
         else if (value instanceof AppPageSearchContent) {
             this.searchContent = value;
         }
+        else if (value instanceof AppBarBase) {
+            // core only matches the constructor name 'ActionBar' (@akylas/nativescript)
+            this.actionBar = value;
+        }
         else {
             super._addChildFromBuilder(name, value);
         }
@@ -337,6 +441,7 @@ export class AppPage extends Page {
         coordinator.addView(scrim, new CoordinatorLayout.LayoutParams(MATCH_PARENT, 0));
         // the AppBarLayout is elevated (lift on scroll): a sibling is drawn below it unless it is elevated more
         scrim.setElevation(Math.round(12 * Utils.layout.getDisplayDensity()));
+        scrim.setOutlineProvider(getNoShadowOutline());
         this._statusScrim = scrim;
         // the full screen search of the M3 SearchBar: on top of everything, hidden until the bar is tapped
         const searchView = new com.google.android.material.search.SearchView(context);
@@ -359,8 +464,21 @@ export class AppPage extends Page {
             activity.getWindow().setSoftInputMode(this._softInputMode);
         }
         this._softInputMode = undefined;
+        Application.off(Application.systemAppearanceChangedEvent, this._appearanceListener);
         super.onUnloaded();
     }
+    /** the icons of the status bar follow the luminance of the bar drawn under it: the style of the page is not applied again by a live dark / light switch */
+    syncStatusBarIcons() {
+        const window = (Application.android.foregroundActivity || Application.android.startActivity)?.getWindow();
+        if (!window) {
+            return;
+        }
+        // without an AppBar (actionBarHidden) the status bar is over the background of the page
+        const bar = this.hasActionBar ? this.actionBar : null;
+        const color = bar instanceof AppBar ? bar.getBarColor() : (toNativeColor(this.backgroundColor) ?? getThemeColor(this.nativeViewProtected, 'colorSurface', android.graphics.Color.WHITE));
+        const light = androidx.core.graphics.ColorUtils.calculateLuminance(color) > 0.5;
+        androidx.core.view.WindowCompat.getInsetsController(window, window.getDecorView()).setAppearanceLightStatusBars(light);
+    }
     onLoaded() {
         super.onLoaded();
         // The root of the page pads itself with the keyboard (edge to edge): when the window also resizes for the keyboard (adjustResize)
@@ -371,6 +489,7 @@ export class AppPage extends Page {
             this._softInputMode = window.getAttributes().softInputMode;
             window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING | (this._softInputMode & 0x0f));
         }
+        Application.on(Application.systemAppearanceChangedEvent, this._appearanceListener);
         // the bar draws under the status bar: the AppBarLayout pads itself with the inset
         this.androidOverflowEdge = 'top';
         // the root does not pad itself with the status bar inset anymore: the AppBarLayout (and its background) does
@@ -387,6 +506,8 @@ export class AppPage extends Page {
         this._coordinator = null;
         this._appBarLayout = null;
         this._nativeContent = null;
+        this._liftTarget = null;
+        this._liftContentListener = null;
         this._nativeOverlay = null;
         this._bottomBar = null;
         this._statusScrim = null;
@@ -458,7 +579,8 @@ export class AppPage extends Page {
         const child = this._collapsing || toolbar;
         const params = child.getLayoutParams();
         // `hide` with a scroll target: the bar follows the scroll of the list itself (see syncHide), the AppBarLayout does not scroll
-        const scrollTargetNative = appBar?.scrollTarget?.nativeViewProtected;
+        const scrollTargetView = appBar?.getScrollTarget();
+        const scrollTargetNative = scrollTargetView?.nativeViewProtected;
         const customHide = behavior === 'hide' && !!scrollTargetNative;
         let flags = 0;
         if (behavior === 'hide' && !customHide) {
@@ -497,10 +619,7 @@ export class AppPage extends Page {
         background.setFillColor(android.content.res.ColorStateList.valueOf(barColor));
         appBarLayout.setLiftOnScrollColor(android.content.res.ColorStateList.valueOf(liftedColor));
         appBarLayout.setLiftOnScroll(behavior === 'lift');
-        const scrollTarget = appBar?.scrollTarget?.nativeViewProtected;
-        if (behavior === 'lift' && scrollTarget) {
-            appBarLayout.setLiftOnScrollTargetView(scrollTarget);
-        }
+        this.syncLiftTarget(appBar, behavior);
         this.setStatusScrimColor(appBarLayout.isLifted() && behavior === 'lift' ? liftedColor : barColor);
         if (!this._liftListener) {
             // the status bar area follows the color of the bar while it lifts
@@ -514,6 +633,7 @@ export class AppPage extends Page {
             this._collapsing.setContentScrimColor(behavior === 'lift' ? liftedColor : barColor);
             this._collapsing.setStatusBarScrimColor(behavior === 'lift' ? liftedColor : barColor);
         }
+        toolbar.setTitleTextColor(onBarColor);
         toolbar.setSubtitleTextColor(onBarColor);
         if (this._collapsing) {
             this._collapsing.setCollapsedTitleTextColor(onBarColor);
@@ -538,7 +658,7 @@ export class AppPage extends Page {
             }
         }
         this.syncTranslucentInset(appBar, overlayContent);
-        this.syncHide(customHide ? appBar.scrollTarget : null);
+        this.syncHide(customHide ? scrollTargetView : null);
         this.syncBottomBar(appBar, behavior);
         this.syncSearchBar(appBar);
     }
@@ -601,17 +721,66 @@ export class AppPage extends Page {
             view.off('scroll', listener);
         };
     }
+    /** the first vertically scrolling view under `view`: the lift state must follow one view, else several nested scroll events disagree and the bar blinks */
+    findScrollingView(view) {
+        if (view instanceof androidx.recyclerview.widget.RecyclerView || view instanceof androidx.core.widget.NestedScrollView || view instanceof android.widget.ScrollView) {
+            return view;
+        }
+        if (view instanceof android.view.ViewGroup) {
+            for (let index = 0; index < view.getChildCount(); index++) {
+                const found = this.findScrollingView(view.getChildAt(index));
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    /** `lift` follows `scrollTarget` / `scrollTargetId`, by default the first scrolling view of the content (searched again when the content is laid out) */
+    syncLiftTarget(appBar, behavior) {
+        const content = this._nativeContent;
+        if (behavior !== 'lift') {
+            return;
+        }
+        const explicit = appBar?.getScrollTarget()?.nativeViewProtected;
+        const target = explicit ?? this.findScrollingView(content);
+        if (target && target !== this._liftTarget) {
+            this._liftTarget = target;
+            this._appBarLayout.setLiftOnScrollTargetView(target);
+        }
+        if (!explicit && !this._liftContentListener) {
+            this._liftContentListener = new android.view.View.OnLayoutChangeListener({
+                onLayoutChange: () => {
+                    if (!this._liftTarget || !this._liftTarget.isAttachedToWindow()) {
+                        this._liftTarget = null;
+                        const bar = this.hasActionBar ? this.actionBar : null;
+                        this.syncLiftTarget(bar instanceof AppBar ? bar : null, behavior);
+                    }
+                }
+            });
+            content.addOnLayoutChangeListener(this._liftContentListener);
+        }
+    }
     setStatusScrimColor(color) {
         this._statusScrim?.setBackgroundColor(color);
     }
+    /** the SearchBar when it hosts the navigation icon and the actions of the bar (the toolbar is hidden) */
+    get hostingSearchBar() {
+        const toolbar = this.actionBar?.nativeViewProtected;
+        return this._searchBar?.getVisibility() === android.view.View.VISIBLE && toolbar?.getVisibility() === android.view.View.GONE ? this._searchBar : null;
+    }
     /** `searchMode="bar"`: a Material 3 SearchBar under the toolbar that opens the full screen SearchView */
     syncSearchBar(appBar) {
         const appBarLayout = this._appBarLayout;
-        const wanted = !!appBar?.searchable && appBar.searchMode === 'bar';
+        const wanted = !!appBar?.searchable && (appBar.searchMode === 'bar' || appBar.searchMode === 'inline');
         if (!wanted) {
             if (this._searchBar) {
                 this._searchBar.setVisibility(android.view.View.GONE);
+                // the toolbar was hidden while the SearchBar hosted its content
+                appBar?.nativeViewProtected?.setVisibility(android.view.View.VISIBLE);
             }
+            this._inlineOpen = false;
+            this._inlineField?.setVisibility(android.view.View.GONE);
             return;
         }
         const AppBarLayoutParams = com.google.android.material.appbar.AppBarLayout.LayoutParams;
@@ -633,6 +802,12 @@ export class AppPage extends Page {
             appBarLayout.addView(searchBar);
         }
         searchBar.setHint(appBar.searchHint ?? null);
+        this.syncSearchBarHost(appBar, searchBar);
+        this.syncSearchBarColors(searchBar);
+        if (appBar.searchMode === 'inline') {
+            this.syncInlineSearch(appBar, searchBar);
+            return;
+        }
         const searchView = this._searchView;
         searchView.setHint(appBar.searchHint ?? null);
         if (!this._searchBarSetup) {
@@ -671,15 +846,262 @@ export class AppPage extends Page {
             }));
         }
     }
+    syncWhenLoaded(view) {
+        view.off('loaded', this._syncOnLoaded);
+        view.on('loaded', this._syncOnLoaded);
+    }
+    getAppCompatDrawable(name) {
+        const context = this._context;
+        const id = context.getResources().getIdentifier(name, 'drawable', context.getPackageName());
+        return id ? androidx.core.content.ContextCompat.getDrawable(context, id) : null;
+    }
+    createInlineButton(drawableName, onClick) {
+        const density = Utils.layout.getDisplayDensity();
+        const button = new android.widget.ImageView(this._context);
+        button.setImageDrawable(this.getAppCompatDrawable(drawableName));
+        button.setScaleType(android.widget.ImageView.ScaleType.CENTER);
+        button.setLayoutParams(new android.widget.LinearLayout.LayoutParams(Math.round(48 * density), Math.round(48 * density)));
+        button.setOnClickListener(new android.view.View.OnClickListener({ onClick }));
+        return button;
+    }
+    notifySearchChange(text) {
+        const bar = this._inlineOwner?.get();
+        if (bar && this._inlineOpen && bar.searchText !== text) {
+            bar.searchText = text;
+            bar.notify({ eventName: AppBarBase.searchChangeEvent, object: bar, text });
+        }
+    }
+    notifySearchSubmit(text) {
+        const bar = this._inlineOwner?.get();
+        bar?.notify({ eventName: AppBarBase.searchSubmitEvent, object: bar, text });
+    }
+    getInlineText() {
+        return this._inlineTextField ? (this._inlineTextField.text ?? '') : this._inlineEdit.getText().toString();
+    }
+    clearInlineText() {
+        if (this._inlineTextField) {
+            this._inlineTextField.text = '';
+        }
+        else {
+            this._inlineEdit.setText('');
+        }
+    }
+    dismissInlineKeyboard() {
+        if (this._inlineTextField) {
+            this._inlineTextField.dismissSoftInput();
+        }
+        else {
+            Utils.dismissSoftInput(this._inlineEdit);
+        }
+    }
+    /** the field of the search: the `searchField` of the bar when it holds a TextField, else the built-in EditText */
+    bindInlineTextField(appBar) {
+        const host = appBar.searchField;
+        if (host && !host.nativeViewProtected) {
+            this.syncWhenLoaded(host);
+            return;
+        }
+        const textField = host instanceof TextField ? host : host instanceof ContentView && host.content instanceof TextField ? host.content : null;
+        if (textField === this._inlineTextField) {
+            return;
+        }
+        this._inlineTextFieldDetach?.();
+        this._inlineTextFieldDetach = null;
+        this._inlineTextField = textField;
+        const field = this._inlineField;
+        const input = textField ? host.nativeViewProtected : this._inlineEdit;
+        input.getParent()?.removeView(input);
+        field.removeViewAt(1);
+        field.addView(input, 1, new android.widget.LinearLayout.LayoutParams(0, WRAP_CONTENT, 1));
+        if (textField) {
+            const onTextChange = () => this.notifySearchChange(this.getInlineText());
+            const onReturnPress = () => {
+                this.notifySearchSubmit(this.getInlineText());
+                textField.dismissSoftInput();
+            };
+            textField.on('textChange', onTextChange);
+            textField.on('returnPress', onReturnPress);
+            this._inlineTextFieldDetach = () => {
+                textField.off('textChange', onTextChange);
+                textField.off('returnPress', onReturnPress);
+            };
+        }
+    }
+    /** `searchMode="inline"`: the SearchBar turns into an editable field in place, the app filters its own content from `searchChange` */
+    syncInlineSearch(appBar, searchBar) {
+        this._inlineOwner = new WeakRef(appBar);
+        searchBar.setOnClickListener(new android.view.View.OnClickListener({ onClick: () => this.openInlineSearch() }));
+        if (!this._inlineField) {
+            const context = this._context;
+            const field = new android.widget.LinearLayout(context);
+            field.setOrientation(android.widget.LinearLayout.HORIZONTAL);
+            field.setGravity(android.view.Gravity.CENTER_VERTICAL);
+            field.setBackground(searchBar.getBackground()?.getConstantState()?.newDrawable()?.mutate() ?? null);
+            const edit = new android.widget.EditText(context);
+            edit.setBackground(null);
+            edit.setSingleLine(true);
+            edit.setTextSize(16);
+            edit.setPadding(0, 0, 0, 0);
+            edit.setImeOptions(android.view.inputmethod.EditorInfo.IME_ACTION_SEARCH);
+            edit.addTextChangedListener(new android.text.TextWatcher({
+                beforeTextChanged: () => null,
+                onTextChanged: () => null,
+                afterTextChanged: (editable) => this.notifySearchChange(editable.toString())
+            }));
+            edit.setOnEditorActionListener(new android.widget.TextView.OnEditorActionListener({
+                onEditorAction: () => {
+                    this.notifySearchSubmit(edit.getText().toString());
+                    Utils.dismissSoftInput(edit);
+                    return true;
+                }
+            }));
+            this._inlineBack = this.createInlineButton('abc_ic_ab_back_material', () => this.closeInlineSearch());
+            this._inlineClear = this.createInlineButton('abc_ic_clear_material', () => (this.getInlineText().length ? this.clearInlineText() : this.closeInlineSearch()));
+            field.addView(this._inlineBack);
+            field.addView(edit, new android.widget.LinearLayout.LayoutParams(0, WRAP_CONTENT, 1));
+            field.addView(this._inlineClear);
+            const appBarLayout = this._appBarLayout;
+            field.setVisibility(android.view.View.GONE);
+            appBarLayout.addView(field, searchBar.getLayoutParams());
+            this._inlineField = field;
+            this._inlineEdit = edit;
+        }
+        this.bindInlineTextField(appBar);
+        this.syncInlineColors(appBar);
+        this._inlineEdit.setHint(appBar.searchHint ?? null);
+        searchBar.setVisibility(this._inlineOpen ? android.view.View.GONE : android.view.View.VISIBLE);
+        this._inlineField.setVisibility(this._inlineOpen ? android.view.View.VISIBLE : android.view.View.GONE);
+    }
+    /** the colors of the theme are read again at each sync (dark / light switch): the field follows the bar */
+    syncInlineColors(appBar) {
+        const onBar = appBar.getOnBarColor();
+        findShapeDrawable(this._inlineField.getBackground())?.setFillColor(android.content.res.ColorStateList.valueOf(this.getSearchBarColor()));
+        this._inlineEdit.setTextColor(onBar);
+        this._inlineEdit.setHintTextColor(androidx.core.graphics.ColorUtils.setAlphaComponent(onBar, 153));
+        this._inlineBack.setColorFilter(onBar);
+        this._inlineClear.setColorFilter(onBar);
+    }
+    getSearchBarColor() {
+        return getThemeColor(this._searchBar, 'colorSurfaceContainerHigh', getThemeColor(this._searchBar, 'colorSurface', android.graphics.Color.WHITE));
+    }
+    /** cross fades the search bar and the editable field (same size and position) */
+    morphSearch(from, to) {
+        const fade = new android.transition.Fade();
+        fade.setDuration(250);
+        fade.setInterpolator(new android.view.animation.PathInterpolator(0.4, 0, 0.2, 1));
+        android.transition.TransitionManager.beginDelayedTransition(this._appBarLayout, fade);
+        from.setVisibility(android.view.View.GONE);
+        to.setVisibility(android.view.View.VISIBLE);
+    }
+    openInlineSearch() {
+        if (this._inlineOpen || !this._inlineField) {
+            return !!this._inlineOpen;
+        }
+        this._inlineOpen = true;
+        const height = this._searchBar.getHeight();
+        if (height > 0) {
+            this._inlineField.setMinimumHeight(height);
+        }
+        this.morphSearch(this._searchBar, this._inlineField);
+        if (this._inlineTextField) {
+            this._inlineTextField.focus();
+            Utils.android.showSoftInput(this._inlineTextField.nativeViewProtected);
+        }
+        else {
+            this._inlineEdit.requestFocus();
+            Utils.android.showSoftInput(this._inlineEdit);
+        }
+        return true;
+    }
+    /** returns true when an inline search was open */
+    closeInlineSearch() {
+        if (!this._inlineOpen) {
+            return false;
+        }
+        this._inlineOpen = false;
+        this.dismissInlineKeyboard();
+        this.clearInlineText();
+        this.morphSearch(this._inlineField, this._searchBar);
+        const bar = this._inlineOwner?.get();
+        if (bar) {
+            bar.searchText = '';
+            bar.notify({ eventName: AppBarBase.searchCancelEvent, object: bar, text: '' });
+        }
+        return true;
+    }
+    /** the SearchBar reads the colors of the theme when it is created: they are applied again at each sync */
+    syncSearchBarColors(searchBar) {
+        findShapeDrawable(searchBar.getBackground())?.setFillColor(android.content.res.ColorStateList.valueOf(this.getSearchBarColor()));
+        const onVariant = getThemeColor(searchBar, 'colorOnSurfaceVariant', android.graphics.Color.BLACK);
+        searchBar.getTextView().setTextColor(onVariant);
+        searchBar.getTextView().setHintTextColor(onVariant);
+        searchBar.getNavigationIcon()?.mutate().setTint(onVariant);
+    }
+    /** without a title the SearchBar is the whole bar (M3 "search app bar"): it takes the navigation icon and the actions of the toolbar */
+    syncSearchBarHost(appBar, searchBar) {
+        const toolbar = appBar.nativeViewProtected;
+        if (this._defaultSearchBarIcon === undefined) {
+            this._defaultSearchBarIcon = searchBar.getNavigationIcon();
+        }
+        const hosted = !appBar.title && !appBar.subtitle && appBar.size === 'small';
+        const menu = searchBar.getMenu();
+        menu.clear();
+        toolbar.setVisibility(hosted ? android.view.View.GONE : android.view.View.VISIBLE);
+        if (!hosted) {
+            searchBar.setNavigationIcon(this._defaultSearchBarIcon);
+            return;
+        }
+        const owner = new WeakRef(appBar);
+        searchBar.setNavigationIcon(toolbar.getNavigationIcon() ?? this._defaultSearchBarIcon);
+        searchBar.setNavigationOnClickListener(new android.view.View.OnClickListener({
+            onClick: () => owner.get()?.navigationButton?._raiseTap()
+        }));
+        const tint = android.content.res.ColorStateList.valueOf(appBar.getOnBarColor());
+        const source = toolbar.getMenu();
+        for (let index = 0; index < source.size(); index++) {
+            const item = source.getItem(index);
+            const copy = menu.add(item.getGroupId(), item.getItemId(), item.getOrder(), item.getTitle());
+            copy.setIcon(item.getIcon());
+            copy.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS);
+            androidx.core.view.MenuItemCompat.setIconTintList(copy, tint);
+        }
+        searchBar.setOnMenuItemClickListener(new androidx.appcompat.widget.Toolbar.OnMenuItemClickListener({
+            onMenuItemClick: (menuItem) => {
+                const items = (owner.get()?.actionItems?.getVisibleItems() ?? []);
+                items.find((item) => item._getItemId() === menuItem.getItemId())?._raiseTap();
+                return true;
+            }
+        }));
+    }
     /** `bottomItems`: a Material BottomAppBar, over the content, below the overlay */
     syncBottomBar(appBar, behavior) {
-        const items = (appBar?.bottomItems || []).filter((item) => !item.spacer);
+        const items = (appBar?.bottomItems || []).filter((item) => !item.spacer && !item.search);
         const coordinator = this._coordinator;
-        if (!items.length) {
+        const floating = appBar?.bottomBarStyle !== 'bottomAppBar';
+        // a bottomView only fits the floating toolbar: the BottomAppBar is a Toolbar with a menu
+        if (floating && appBar?.bottomView && !appBar.bottomView.nativeViewProtected) {
+            this.syncWhenLoaded(appBar.bottomView);
+        }
+        const hasContent = items.length > 0 || (floating && !!appBar?.bottomView?.nativeViewProtected);
+        if (!hasContent || floating) {
             if (this._bottomBar) {
                 this._bottomBar.setVisibility(android.view.View.GONE);
-                this.syncBottomInset(appBar, false);
+                if (!floating) {
+                    this.syncBottomInset(appBar, false, this._bottomBar);
+                }
             }
+        }
+        if (!hasContent || !floating) {
+            if (this._floatingBar) {
+                this._floatingBar.setVisibility(android.view.View.GONE);
+                this.syncBottomInset(appBar, false, this._floatingBar);
+            }
+        }
+        if (!hasContent) {
+            return;
+        }
+        if (floating) {
+            this.syncFloatingBar(appBar, items, behavior);
             return;
         }
         const BottomAppBar = com.google.android.material.bottomappbar.BottomAppBar;
@@ -698,12 +1120,14 @@ export class AppPage extends Page {
         const menu = bar.getMenu();
         menu.clear();
         const owner = new WeakRef(appBar);
+        const onBarList = android.content.res.ColorStateList.valueOf(appBar.getOnBarColor());
         items.forEach((item, index) => {
             const menuItem = menu.add(0, index, index, item.text || '');
             const icon = item.icon ? getNativeIcon(item.icon) : null;
             if (icon) {
                 menuItem.setIcon(icon);
             }
+            androidx.core.view.MenuItemCompat.setIconTintList(menuItem, onBarList);
             menuItem.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS);
         });
         attachBadges(bar, this._bottomBadges, items
@@ -712,20 +1136,92 @@ export class AppPage extends Page {
         bar.setOnMenuItemClickListener(new androidx.appcompat.widget.Toolbar.OnMenuItemClickListener({
             onMenuItemClick: (menuItem) => {
                 const target = owner.get();
-                if (target) {
-                    notifyBottomItemTap(target, items[menuItem.getItemId()]);
+                const item = items[menuItem.getItemId()];
+                if (target && item?.menu?.length) {
+                    showMenu({ anchor: { nativeViewProtected: bar }, items: item.menu, placement: { horizontal: 'end', vertical: 'above' } });
+                }
+                else if (target) {
+                    notifyBottomItemTap(target, item);
                 }
                 return true;
             }
         }));
-        this.syncBottomInset(appBar, true);
+        this.syncBottomInset(appBar, true, bar);
+    }
+    /** `bottomBarStyle="floating"`: a Material 3 Expressive FloatingToolbarLayout (a pill over the content, centered above the gesture bar) holding icon buttons, or the `bottomView` of the bar */
+    syncFloatingBar(appBar, items, behavior) {
+        const coordinator = this._coordinator;
+        const context = this._context;
+        const density = Utils.layout.getDisplayDensity();
+        const CoordinatorLayout = androidx.coordinatorlayout.widget.CoordinatorLayout;
+        if (!this._floatingBar) {
+            // the typings of the Material version of the plugin do not have the floating toolbar yet
+            const FloatingToolbarLayout = com.google.android.material.floatingtoolbar.FloatingToolbarLayout;
+            const bar = new FloatingToolbarLayout(context);
+            const params = new CoordinatorLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
+            params.gravity = android.view.Gravity.BOTTOM | android.view.Gravity.CENTER_HORIZONTAL;
+            const margin = Math.round(16 * density);
+            params.setMargins(margin, margin, margin, margin);
+            // below the overlay (a FAB, a panel)
+            coordinator.addView(bar, coordinator.indexOfChild(this._nativeOverlay), params);
+            const holder = new android.widget.LinearLayout(context);
+            holder.setOrientation(android.widget.LinearLayout.HORIZONTAL);
+            holder.setGravity(android.view.Gravity.CENTER_VERTICAL);
+            bar.addView(holder, new android.widget.FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT));
+            this._floatingBar = bar;
+            this._floatingHolder = holder;
+        }
+        const bar = this._floatingBar;
+        const holder = this._floatingHolder;
+        const params = bar.getLayoutParams();
+        params.setBehavior(behavior === 'hide' ? new com.google.android.material.behavior.HideBottomViewOnScrollBehavior() : null);
+        bar.setVisibility(android.view.View.VISIBLE);
+        const background = bar.getBackground();
+        if (background instanceof com.google.android.material.shape.MaterialShapeDrawable) {
+            background.setFillColor(android.content.res.ColorStateList.valueOf(getThemeColor(bar, 'colorSurfaceContainer', getThemeColor(bar, 'colorSurface', android.graphics.Color.WHITE))));
+        }
+        holder.removeAllViews();
+        const customView = appBar.bottomView?.nativeViewProtected;
+        if (customView) {
+            customView.getParent()?.removeView(customView);
+            holder.addView(customView, new android.widget.LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT));
+            this.syncBottomInset(appBar, true, bar);
+            return;
+        }
+        const owner = new WeakRef(appBar);
+        const ripple = new android.util.TypedValue();
+        context.getTheme().resolveAttribute(16843868 /* android.R.attr.selectableItemBackgroundBorderless */, ripple, true);
+        const size = Math.round(48 * density);
+        const onBarList = android.content.res.ColorStateList.valueOf(appBar.getOnBarColor());
+        items.forEach((item) => {
+            const button = new android.widget.ImageButton(context);
+            const icon = item.icon ? getNativeIcon(item.icon) : null;
+            if (icon) {
+                button.setImageDrawable(icon);
+            }
+            button.setImageTintList(onBarList);
+            button.setContentDescription(item.text || '');
+            button.setBackground(androidx.core.content.ContextCompat.getDrawable(context, ripple.resourceId));
+            button.setOnClickListener(new android.view.View.OnClickListener({
+                onClick: () => {
+                    const target = owner.get();
+                    if (target && item.menu?.length) {
+                        showMenu({ anchor: { nativeViewProtected: button }, items: item.menu, placement: { horizontal: 'end', vertical: 'above' } });
+                    }
+                    else if (target) {
+                        notifyBottomItemTap(target, item);
+                    }
+                }
+            }));
+            holder.addView(button, new android.widget.LinearLayout.LayoutParams(size, size));
+        });
+        this.syncBottomInset(appBar, true, bar);
     }
     /** the last items of the scrolling view must not stay under the bottom bar */
-    syncBottomInset(appBar, visible) {
-        const bar = this._bottomBar;
-        const target = appBar?.scrollTarget?.nativeViewProtected;
+    syncBottomInset(appBar, visible, bar) {
+        const target = appBar?.getScrollTarget()?.nativeViewProtected ?? this._liftTarget;
         if (this._bottomInsetListener) {
-            bar.removeOnLayoutChangeListener(this._bottomInsetListener);
+            this._bottomInsetView?.removeOnLayoutChangeListener(this._bottomInsetListener);
             this._bottomInsetListener = null;
         }
         if (!target) {
@@ -738,6 +1234,8 @@ export class AppPage extends Page {
             }
             return;
         }
+        // a floating bar also has margins around it
+        const occupied = () => bar.getHeight() + (bar.getLayoutParams()?.bottomMargin ?? 0);
         const apply = () => {
             if (target['__appBarBottomPadding'] === undefined) {
                 target['__appBarBottomPadding'] = target.getPaddingBottom();
@@ -745,22 +1243,23 @@ export class AppPage extends Page {
             if (target instanceof android.view.ViewGroup) {
                 target.setClipToPadding(false);
             }
-            target.setPadding(target.getPaddingLeft(), target.getPaddingTop(), target.getPaddingRight(), bar.getHeight());
+            target.setPadding(target.getPaddingLeft(), target.getPaddingTop(), target.getPaddingRight(), occupied());
         };
         this._bottomInsetListener = new android.view.View.OnLayoutChangeListener({
             onLayoutChange: () => {
-                if (target.getPaddingBottom() !== bar.getHeight() && this._bottomInsetListener) {
+                if (target.getPaddingBottom() !== occupied() && this._bottomInsetListener) {
                     apply();
                 }
             }
         });
+        this._bottomInsetView = bar;
         bar.addOnLayoutChangeListener(this._bottomInsetListener);
         apply();
     }
     /** translucent: the first items of the scrolling view must start below the bar: its top padding follows the height of the bar */
     syncTranslucentInset(appBar, translucent) {
         const appBarLayout = this._appBarLayout;
-        const target = appBar?.scrollTarget?.nativeViewProtected;
+        const target = appBar?.getScrollTarget()?.nativeViewProtected;
         if (this._insetListener) {
             appBarLayout.removeOnLayoutChangeListener(this._insetListener);
             this._insetListener = null;