@nativescript-community/ui-appbar 0.0.0-stage → 1.0.0

package/index.android.js

@@ -0,0 +1,825 @@
+import { ActionBar, Application, Color, Page, 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 };
+const MATCH_PARENT = -1;
+const WRAP_CONTENT = -2;
+const COLLAPSE_MODE_PIN = 1;
+function getActionBarSize(context) {
+    const value = new android.util.TypedValue();
+    if (context.getTheme().resolveAttribute(16843499 /* android.R.attr.actionBarSize */, value, true)) {
+        return android.util.TypedValue.complexToDimensionPixelSize(value.data, context.getResources().getDisplayMetrics());
+    }
+    return Math.round(56 * Utils.layout.getDisplayDensity());
+}
+function getMaterialAttr(name) {
+    return +java.lang.Class.forName('com.google.android.material.R$attr').getDeclaredField(name).get(null);
+}
+/** 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);
+}
+function toNativeColor(value) {
+    if (!value) {
+        return null;
+    }
+    return (value instanceof Color ? value : new Color(value)).android;
+}
+/**
+ * Badges (a number, a text, or a dot) on the actions of a toolbar. The previous ones are detached. The action views must exist: attached after the layout.
+ */
+function attachBadges(toolbar, previous, wanted) {
+    const BadgeDrawable = com.google.android.material.badge.BadgeDrawable;
+    const BadgeUtils = com.google.android.material.badge.BadgeUtils;
+    previous.splice(0).forEach((badge) => BadgeUtils.detachBadgeDrawable(badge, toolbar, badge.__itemId));
+    if (!wanted.length) {
+        return;
+    }
+    toolbar.post(new java.lang.Runnable({
+        run: () => {
+            wanted.forEach(({ badge, id }) => {
+                const drawable = BadgeDrawable.create(toolbar.getContext());
+                if (typeof badge === 'number') {
+                    drawable.setNumber(badge);
+                }
+                else if (typeof badge === 'string') {
+                    drawable.setText(badge);
+                }
+                // `true`: the dot (no number, no text)
+                drawable.__itemId = id;
+                BadgeUtils.attachBadgeDrawable(drawable, toolbar, id);
+                previous.push(drawable);
+            });
+        }
+    }));
+}
+/**
+ * Android: a Material Toolbar. In an `AppPage` it lives in an `AppBarLayout`: `size` medium / large use a M3 `CollapsingToolbarLayout`,
+ * `scrollBehavior` the scroll flags / lift on scroll of the AppBarLayout.
+ */
+export class AppBar extends AppBarBase {
+    constructor() {
+        super(...arguments);
+        this._badges = [];
+    }
+    // a Material 3 toolbar: tinted navigation icon, centered title...
+    createNativeView() {
+        return new com.google.android.material.appbar.MaterialToolbar(this._context);
+    }
+    // in an AppPage the surface of the bar is the AppBarLayout (lift, translucent, collapsing area): the toolbar is transparent
+    // @ts-ignore
+    _redrawNativeBackground(value) {
+        if (this.page instanceof AppPage) {
+            return;
+        }
+        // @ts-ignore
+        super._redrawNativeBackground(value);
+    }
+    /** the color of the bar: the css `background-color`, else the surface color of the theme */
+    getBarColor() {
+        const toolbar = this.nativeViewProtected;
+        return toNativeColor(this.backgroundColor) ?? getThemeColor(toolbar, 'colorSurface', android.graphics.Color.WHITE);
+    }
+    /** the color of the title and the icons: the css `color`, else the on surface color of the theme */
+    getOnBarColor() {
+        const toolbar = this.nativeViewProtected;
+        return toNativeColor(this.color) ?? getThemeColor(toolbar, 'colorOnSurface', android.graphics.Color.BLACK);
+    }
+    /** tints the navigation icon, the actions and the overflow icon with the color of the content of the bar */
+    applyTints() {
+        const toolbar = this.nativeViewProtected;
+        if (!toolbar) {
+            return;
+        }
+        const tint = this.getOnBarColor();
+        toolbar.setNavigationIconTint(tint);
+        const list = android.content.res.ColorStateList.valueOf(tint);
+        const menu = toolbar.getMenu();
+        for (let i = 0; i < menu.size(); i++) {
+            androidx.core.view.MenuItemCompat.setIconTintList(menu.getItem(i), list);
+        }
+        const overflow = toolbar.getOverflowIcon();
+        if (overflow) {
+            const wrapped = androidx.core.graphics.drawable.DrawableCompat.wrap(overflow.mutate());
+            androidx.core.graphics.drawable.DrawableCompat.setTint(wrapped, tint);
+            toolbar.setOverflowIcon(wrapped);
+        }
+    }
+    // the back arrow of the core is the old holo one: use the Material arrow
+    _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 context = this._context;
+            const id = context.getResources().getIdentifier('abc_ic_ab_back_material', 'drawable', context.getPackageName());
+            if (id) {
+                toolbar.setNavigationIcon(androidx.core.content.ContextCompat.getDrawable(context, id));
+            }
+        }
+    }
+    onAppBarPropertyChanged() {
+        super.onAppBarPropertyChanged();
+        const page = this.page;
+        if (page instanceof AppPage) {
+            page.syncAppBar();
+        }
+    }
+    update() {
+        super.update();
+        const page = this.page;
+        if (page instanceof AppPage) {
+            page.syncAppBar();
+        }
+    }
+    _addActionItems() {
+        // @ts-ignore
+        super._addActionItems();
+        this.syncBadges();
+        if (this.searchable && this.searchMode !== 'bar') {
+            this.addSearchItem();
+        }
+        this.applyTints();
+    }
+    /** the badges of the actions (a number, a text or a dot): attached once the action views exist */
+    syncBadges() {
+        const toolbar = this.nativeViewProtected;
+        const items = (this.actionItems?.getVisibleItems() ?? []);
+        const wanted = items.filter((item) => item instanceof AppBarItem && item.badge !== undefined && item.badge !== null && item.badge !== false && item.badge !== '');
+        attachBadges(toolbar, this._badges, wanted.map((item) => ({ id: item._getItemId(), badge: item.badge })));
+    }
+    /** a collapsible SearchView as the first action */
+    addSearchItem() {
+        const toolbar = this.nativeViewProtected;
+        const menu = toolbar.getMenu();
+        const item = menu.add(0, 0x7f0a5ea1, 0, this.searchHint || 'Search');
+        const context = toolbar.getContext();
+        const iconId = context.getResources().getIdentifier('abc_ic_search_api_material', 'drawable', context.getPackageName());
+        item.setIcon(iconId ? androidx.core.content.ContextCompat.getDrawable(context, iconId) : null);
+        const onBar = this.getOnBarColor();
+        item.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS | android.view.MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);
+        const searchView = new androidx.appcompat.widget.SearchView(context);
+        searchView.setQueryHint(this.searchHint ?? null);
+        searchView.setMaxWidth(java.lang.Integer.MAX_VALUE);
+        const owner = new WeakRef(this);
+        searchView.setOnQueryTextListener(new androidx.appcompat.widget.SearchView.OnQueryTextListener({
+            onQueryTextChange: (text) => {
+                const bar = owner.get();
+                if (bar) {
+                    bar.searchText = text;
+                    bar.notify({ eventName: AppBarBase.searchChangeEvent, object: bar, text });
+                }
+                return true;
+            },
+            onQueryTextSubmit: (text) => {
+                const bar = owner.get();
+                bar?.notify({ eventName: AppBarBase.searchSubmitEvent, object: bar, text });
+                return false;
+            }
+        }));
+        item.setOnActionExpandListener(new android.view.MenuItem.OnActionExpandListener({
+            onMenuItemActionExpand: () => true,
+            onMenuItemActionCollapse: () => {
+                const bar = owner.get();
+                if (bar) {
+                    bar.searchText = '';
+                    bar.notify({ eventName: AppBarBase.searchCancelEvent, object: bar, text: '' });
+                }
+                return true;
+            }
+        }));
+        {
+            // the SearchView follows the colors of the bar
+            const R = androidx.appcompat.R.id;
+            const edit = searchView.findViewById(R.search_src_text);
+            edit?.setTextColor(onBar);
+            edit?.setHintTextColor(androidx.core.graphics.ColorUtils.setAlphaComponent(onBar, 150));
+            for (const id of [R.search_close_btn, R.search_mag_icon, R.search_button, R.search_go_btn, R.search_voice_btn]) {
+                const icon = searchView.findViewById(id);
+                icon?.setColorFilter(onBar);
+            }
+        }
+        item.setActionView(searchView);
+    }
+    _updateTitleAndTitleView() {
+        const page = this.page;
+        const collapsing = page instanceof AppPage ? page.collapsingLayout : null;
+        const toolbar = this.nativeViewProtected;
+        if (this.titleView || (!this.formattedTitle && !this.subtitle && !collapsing)) {
+            // @ts-ignore
+            super._updateTitleAndTitleView();
+            return;
+        }
+        const title = this.formattedTitle ? createNativeFormattedText(this.formattedTitle) : this.title;
+        if (collapsing) {
+            // the CollapsingToolbarLayout draws the title: the Toolbar one is empty
+            toolbar.setTitle(null);
+            collapsing.setTitle(title ?? null);
+            if (typeof collapsing.setSubtitle === 'function') {
+                collapsing.setSubtitle(this.subtitle ?? null);
+            }
+            toolbar.setSubtitle(null);
+        }
+        else {
+            toolbar.setTitle(title ?? null);
+            toolbar.setSubtitle(this.subtitle ?? null);
+        }
+    }
+}
+/**
+ * Android: a Page whose content scrolls with a Material `AppBarLayout` (lift, hide, collapse...).
+ *
+ * The native tree is built INSIDE the root of the regular Page, so any library that replaces the Page root
+ * (like gesturehandler `PageLayout`) keeps working:
+ *
+ *  root = super.createNativeView()          (GridLayout, or the gesturehandler PageLayout)
+ *   `- CoordinatorLayout                    (row 1)
+ *       |- AppBarLayout  <- the ActionBar Toolbar (in a CollapsingToolbarLayout for medium / large)
+ *       `- ContentLayout (ScrollingViewBehavior) <- the page content
+ */
+export class AppPage extends Page {
+    constructor() {
+        super(...arguments);
+        this._scrollBehavior = 'none';
+        this._searchBarSetup = false;
+        this._bottomBadges = [];
+    }
+    /** the CollapsingToolbarLayout of a medium / large bar */
+    get collapsingLayout() {
+        return this._collapsing;
+    }
+    /** the behavior of a bar which is not an AppBar (a core ActionBar) */
+    get scrollBehavior() {
+        return this._scrollBehavior;
+    }
+    set scrollBehavior(value) {
+        this._scrollBehavior = value;
+        this.syncAppBar();
+    }
+    /** views anchored to the page (a FAB, a bottom bar...) instead of the scrolling content */
+    get overlay() {
+        return this._overlay;
+    }
+    set overlay(value) {
+        if (this._overlay === value) {
+            return;
+        }
+        if (this._overlay) {
+            this._removeView(this._overlay);
+        }
+        this._overlay = value;
+        if (value) {
+            this._addView(value);
+        }
+    }
+    _addChildFromBuilder(name, value) {
+        if (value instanceof AppPageOverlay) {
+            this.overlay = value;
+        }
+        else if (value instanceof AppPageSearchContent) {
+            this.searchContent = value;
+        }
+        else {
+            super._addChildFromBuilder(name, value);
+        }
+    }
+    /** `searchMode="bar"`: the content of the full screen search (suggestions, results) */
+    get searchContent() {
+        return this._searchContent;
+    }
+    set searchContent(value) {
+        if (this._searchContent === value) {
+            return;
+        }
+        if (this._searchContent) {
+            this._removeView(this._searchContent);
+        }
+        this._searchContent = value;
+        if (value) {
+            this._addView(value);
+        }
+    }
+    eachChildView(callback) {
+        super.eachChildView(callback);
+        if (this._overlay) {
+            callback(this._overlay);
+        }
+        if (this._searchContent) {
+            callback(this._searchContent);
+        }
+    }
+    createNativeView() {
+        // the root can be replaced by another library (gesturehandler): never create it ourselves
+        const root = super.createNativeView();
+        const context = this._context;
+        const CoordinatorLayout = androidx.coordinatorlayout.widget.CoordinatorLayout;
+        const AppBarLayout = com.google.android.material.appbar.AppBarLayout;
+        const coordinator = new CoordinatorLayout(context);
+        // The root of the page applies the insets (status bar aside, handled by the AppBarLayout): the NativeScript layouts inside would apply them again
+        // (the overlay would be shifted by the height of the keyboard). The coordinator consumes them.
+        androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(coordinator, new androidx.core.view.OnApplyWindowInsetsListener({
+            onApplyWindowInsets: () => androidx.core.view.WindowInsetsCompat.CONSUMED
+        }));
+        const appBarLayout = new AppBarLayout(context);
+        const content = new org.nativescript.widgets.ContentLayout(context);
+        coordinator.addView(appBarLayout, new CoordinatorLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT));
+        const contentParams = new CoordinatorLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
+        contentParams.setBehavior(new AppBarLayout.ScrollingViewBehavior());
+        coordinator.addView(content, contentParams);
+        // above the content and the bar, no behavior: it does not move with them
+        const overlay = new org.nativescript.widgets.ContentLayout(context);
+        coordinator.addView(overlay, new CoordinatorLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        this._nativeOverlay = overlay;
+        // the status bar area: the bar scrolls away under it, what it draws there (a faded title) is covered
+        const scrim = new android.view.View(context);
+        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()));
+        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);
+        coordinator.addView(searchView, new CoordinatorLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        this._searchView = searchView;
+        const params = new org.nativescript.widgets.CommonLayoutParams();
+        params.width = MATCH_PARENT;
+        params.height = MATCH_PARENT;
+        params.row = 1;
+        root.addView(coordinator, params);
+        this._coordinator = coordinator;
+        this._appBarLayout = appBarLayout;
+        this._nativeContent = content;
+        return root;
+    }
+    onUnloaded() {
+        // the activity gets its soft input mode back
+        const activity = Application.android.foregroundActivity || Application.android.startActivity;
+        if (this._softInputMode !== undefined && activity) {
+            activity.getWindow().setSoftInputMode(this._softInputMode);
+        }
+        this._softInputMode = undefined;
+        super.onUnloaded();
+    }
+    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)
+        // the page area is reduced twice: the bar, the content and the overlay get squeezed. The root handles the keyboard alone.
+        const activity = Application.android.foregroundActivity || Application.android.startActivity;
+        if (activity && this._softInputMode === undefined) {
+            const window = activity.getWindow();
+            this._softInputMode = window.getAttributes().softInputMode;
+            window.setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING | (this._softInputMode & 0x0f));
+        }
+        // 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
+        const statusBarHeight = this.getStatusBarHeight();
+        this._appBarLayout?.setPadding(0, statusBarHeight, 0, 0);
+        const scrimParams = this._statusScrim.getLayoutParams();
+        scrimParams.height = statusBarHeight;
+        this._statusScrim.setLayoutParams(scrimParams);
+        // the bar scrolls away under the status bar area: its content must not draw in the padding
+        this._appBarLayout?.setClipToPadding(true);
+        this.syncAppBar();
+    }
+    disposeNativeView() {
+        this._coordinator = null;
+        this._appBarLayout = null;
+        this._nativeContent = null;
+        this._nativeOverlay = null;
+        this._bottomBar = null;
+        this._statusScrim = null;
+        this._searchBar = null;
+        this._searchView = null;
+        this._collapsing = null;
+        super.disposeNativeView();
+    }
+    getStatusBarHeight() {
+        const root = this.nativeViewProtected;
+        const insets = androidx.core.view.ViewCompat.getRootWindowInsets(root);
+        if (insets) {
+            const types = androidx.core.view.WindowInsetsCompat.Type.statusBars() | androidx.core.view.WindowInsetsCompat.Type.displayCutout();
+            return insets.getInsets(types).top;
+        }
+        const resources = this._context.getResources();
+        const id = resources.getIdentifier('status_bar_height', 'dimen', 'android');
+        return id > 0 ? resources.getDimensionPixelSize(id) : 0;
+    }
+    /** moves the toolbar between the AppBarLayout and a CollapsingToolbarLayout and applies the scroll settings */
+    syncAppBar() {
+        const appBarLayout = this._appBarLayout;
+        if (!appBarLayout) {
+            return;
+        }
+        const bar = this.hasActionBar ? this.actionBar : null;
+        const toolbar = bar?.nativeViewProtected;
+        if (!toolbar) {
+            return;
+        }
+        const context = this._context;
+        const appBar = bar instanceof AppBar ? bar : null;
+        const size = appBar?.size ?? 'small';
+        const behavior = appBar && appBar.scrollBehavior !== 'none' ? appBar.scrollBehavior : this._scrollBehavior;
+        const translucent = !!appBar?.translucent;
+        const AppBarLayoutParams = com.google.android.material.appbar.AppBarLayout.LayoutParams;
+        const CollapsingParams = com.google.android.material.appbar.CollapsingToolbarLayout.LayoutParams;
+        // 1. the structure
+        if (size === 'small') {
+            if (this._collapsing) {
+                toolbar.getParent()?.removeView(toolbar);
+                appBarLayout.removeView(this._collapsing);
+                this._collapsing = null;
+                this._collapsingSize = null;
+            }
+            if (toolbar.getParent() !== appBarLayout) {
+                toolbar.getParent()?.removeView(toolbar);
+                appBarLayout.addView(toolbar, new AppBarLayoutParams(MATCH_PARENT, WRAP_CONTENT));
+            }
+        }
+        else if (this._collapsingSize !== size || !this._collapsing) {
+            toolbar.getParent()?.removeView(toolbar);
+            if (this._collapsing) {
+                appBarLayout.removeView(this._collapsing);
+            }
+            const resources = context.getResources();
+            const id = resources.getIdentifier(size === 'large' ? 'ns_appbar_collapsing_large' : 'ns_appbar_collapsing_medium', 'layout', context.getPackageName());
+            const collapsing = android.view.LayoutInflater.from(context).inflate(id, appBarLayout, false);
+            const toolbarParams = new CollapsingParams(MATCH_PARENT, getActionBarSize(context));
+            toolbarParams.setCollapseMode(COLLAPSE_MODE_PIN);
+            collapsing.addView(toolbar, toolbarParams);
+            appBarLayout.addView(collapsing);
+            this._collapsing = collapsing;
+            this._collapsingSize = size;
+            // the title now belongs to the collapsing layout
+            bar.update();
+        }
+        // 2. the scroll behavior: the flags are on the direct child of the AppBarLayout
+        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 customHide = behavior === 'hide' && !!scrollTargetNative;
+        let flags = 0;
+        if (behavior === 'hide' && !customHide) {
+            // the whole bar leaves the screen (also the pinned toolbar of a medium / large bar) and comes back as soon as the content scrolls up.
+            // The AppBarLayout consumes the scroll first: the list starts to scroll when the bar is completely shown / hidden
+            flags = AppBarLayoutParams.SCROLL_FLAG_SCROLL | AppBarLayoutParams.SCROLL_FLAG_ENTER_ALWAYS | AppBarLayoutParams.SCROLL_FLAG_SNAP;
+        }
+        else if (behavior !== 'hide' && size !== 'small') {
+            // the title collapses into the pinned toolbar
+            flags = AppBarLayoutParams.SCROLL_FLAG_SCROLL | AppBarLayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED;
+        }
+        if (params.getScrollFlags() !== flags) {
+            params.setScrollFlags(flags);
+            child.setLayoutParams(params);
+        }
+        // 3. the surface of the bar: the AppBarLayout. The toolbar is transparent and flat, the collapsing area and the status bar area follow the same color
+        toolbar.setBackground(null);
+        toolbar.setElevation(0);
+        toolbar.setStateListAnimator(null);
+        const AlphaTranslucent = 160;
+        let barColor = appBar ? appBar.getBarColor() : (toNativeColor(bar.backgroundColor) ?? getThemeColor(toolbar, 'colorSurface', android.graphics.Color.WHITE));
+        const onBarColor = appBar ? appBar.getOnBarColor() : (toNativeColor(bar.color) ?? getThemeColor(toolbar, 'colorOnSurface', android.graphics.Color.BLACK));
+        if (translucent) {
+            // the content scrolls under the bar, which stays slightly see through
+            barColor = androidx.core.graphics.ColorUtils.setAlphaComponent(barColor, AlphaTranslucent);
+        }
+        // lifted (content scrolls under the bar): the color of the bar with a little of the content color, the M3 surface container idea
+        const liftedColor = androidx.core.graphics.ColorUtils.blendARGB(barColor, onBarColor, 0.1);
+        const MaterialShapeDrawable = com.google.android.material.shape.MaterialShapeDrawable;
+        let background = appBarLayout.getBackground();
+        if (!(background instanceof MaterialShapeDrawable)) {
+            // the lift animation of the AppBarLayout works on a MaterialShapeDrawable
+            background = new MaterialShapeDrawable();
+            appBarLayout.setBackground(background);
+        }
+        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.setStatusScrimColor(appBarLayout.isLifted() && behavior === 'lift' ? liftedColor : barColor);
+        if (!this._liftListener) {
+            // the status bar area follows the color of the bar while it lifts
+            this._liftListener = new com.google.android.material.appbar.AppBarLayout.LiftOnScrollListener({
+                onUpdate: (elevation, color) => this.setStatusScrimColor(color)
+            });
+            appBarLayout.addLiftOnScrollListener(this._liftListener);
+        }
+        if (this._collapsing) {
+            // the scrim drawn once the bar is collapsed
+            this._collapsing.setContentScrimColor(behavior === 'lift' ? liftedColor : barColor);
+            this._collapsing.setStatusBarScrimColor(behavior === 'lift' ? liftedColor : barColor);
+        }
+        toolbar.setSubtitleTextColor(onBarColor);
+        if (this._collapsing) {
+            this._collapsing.setCollapsedTitleTextColor(onBarColor);
+            this._collapsing.setExpandedTitleColor(onBarColor);
+            // the subtitle API of the CollapsingToolbarLayout (Material 1.13+)
+            const c = this._collapsing;
+            c.setCollapsedSubtitleTextColor?.(onBarColor);
+            c.setExpandedSubtitleColor?.(onBarColor);
+        }
+        appBar?.applyTints();
+        // 4. translucent: the content goes under the bar. The behavior of the content places it below the bar: without it the content fills the page
+        // (also `hide` with a scroll target: the content fills the page, the bar moves over it)
+        const overlayContent = translucent || customHide;
+        const contentParams = this._nativeContent.getLayoutParams();
+        const hasBehavior = !!contentParams.getBehavior();
+        if (overlayContent === hasBehavior) {
+            const AppBarLayout = com.google.android.material.appbar.AppBarLayout;
+            contentParams.setBehavior(overlayContent ? null : new AppBarLayout.ScrollingViewBehavior());
+            this._nativeContent.setLayoutParams(contentParams);
+            if (overlayContent) {
+                appBarLayout.bringToFront();
+            }
+        }
+        this.syncTranslucentInset(appBar, overlayContent);
+        this.syncHide(customHide ? appBar.scrollTarget : null);
+        this.syncBottomBar(appBar, behavior);
+        this.syncSearchBar(appBar);
+    }
+    /**
+     * `hide`: the bar leaves the screen while the list scrolls down and comes back while it scrolls up, both at the same time as the list scrolls
+     * (the nested scrolling of the AppBarLayout would let the bar consume the scroll first). The bar follows the scroll deltas of the list and settles when the scroll stops.
+     */
+    syncHide(targetView) {
+        const target = targetView?.nativeViewProtected;
+        const appBarLayout = this._appBarLayout;
+        if (this._hideDetach && this._hideTarget !== target) {
+            this._hideDetach();
+            this._hideDetach = null;
+            this._hideTarget = null;
+            appBarLayout.animate().cancel();
+            appBarLayout.setTranslationY(0);
+        }
+        if (!target || this._hideDetach) {
+            return;
+        }
+        this._hideTarget = target;
+        this._hideView = targetView;
+        let offset = 0;
+        // the status bar area stays
+        const range = () => Math.max(0, appBarLayout.getHeight() - appBarLayout.getPaddingTop());
+        const apply = (value) => {
+            appBarLayout.animate().cancel();
+            offset = Math.max(-range(), Math.min(0, value));
+            appBarLayout.setTranslationY(offset);
+        };
+        const settle = () => {
+            const end = offset < -range() / 2 ? -range() : 0;
+            if (end !== offset) {
+                offset = end;
+                appBarLayout.animate().translationY(end).setDuration(160).start();
+            }
+        };
+        let last;
+        let timer;
+        const view = this._hideView;
+        const listener = (args) => {
+            const current = args.scrollOffset ?? args.scrollY ?? args.object?.verticalOffset;
+            if (typeof current !== 'number' || isNaN(current)) {
+                return;
+            }
+            const dy = last === undefined ? 0 : current - last;
+            last = current;
+            if (current <= 0) {
+                apply(0);
+            }
+            else if (dy) {
+                apply(offset - dy);
+            }
+            clearTimeout(timer);
+            timer = setTimeout(settle, 150);
+        };
+        view.on('scroll', listener);
+        this._hideDetach = () => {
+            clearTimeout(timer);
+            view.off('scroll', listener);
+        };
+    }
+    setStatusScrimColor(color) {
+        this._statusScrim?.setBackgroundColor(color);
+    }
+    /** `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';
+        if (!wanted) {
+            if (this._searchBar) {
+                this._searchBar.setVisibility(android.view.View.GONE);
+            }
+            return;
+        }
+        const AppBarLayoutParams = com.google.android.material.appbar.AppBarLayout.LayoutParams;
+        if (!this._searchBar) {
+            const searchBar = new com.google.android.material.search.SearchBar(this._context);
+            const density = Utils.layout.getDisplayDensity();
+            const params = new AppBarLayoutParams(MATCH_PARENT, WRAP_CONTENT);
+            params.setMargins(Math.round(16 * density), Math.round(8 * density), Math.round(16 * density), Math.round(8 * density));
+            params.setScrollFlags(AppBarLayoutParams.SCROLL_FLAG_SCROLL | AppBarLayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
+            appBarLayout.addView(searchBar, params);
+            this._searchBar = searchBar;
+        }
+        const searchBar = this._searchBar;
+        searchBar.setVisibility(android.view.View.VISIBLE);
+        // below the toolbar / collapsing bar
+        const last = appBarLayout.getChildCount() - 1;
+        if (appBarLayout.indexOfChild(searchBar) !== last) {
+            appBarLayout.removeView(searchBar);
+            appBarLayout.addView(searchBar);
+        }
+        searchBar.setHint(appBar.searchHint ?? null);
+        const searchView = this._searchView;
+        searchView.setHint(appBar.searchHint ?? null);
+        if (!this._searchBarSetup) {
+            this._searchBarSetup = true;
+            searchView.setupWithSearchBar(searchBar);
+            const owner = new WeakRef(appBar);
+            searchView.getEditText().addTextChangedListener(new android.text.TextWatcher({
+                beforeTextChanged: () => null,
+                onTextChanged: () => null,
+                afterTextChanged: (editable) => {
+                    const bar = owner.get();
+                    const text = editable.toString();
+                    if (bar && bar.searchText !== text) {
+                        bar.searchText = text;
+                        bar.notify({ eventName: AppBarBase.searchChangeEvent, object: bar, text });
+                    }
+                }
+            }));
+            searchView.getEditText().setOnEditorActionListener(new android.widget.TextView.OnEditorActionListener({
+                onEditorAction: () => {
+                    const bar = owner.get();
+                    bar?.notify({ eventName: AppBarBase.searchSubmitEvent, object: bar, text: searchView.getText().toString() });
+                    return false;
+                }
+            }));
+            searchView.addTransitionListener(new com.google.android.material.search.SearchView.TransitionListener({
+                onStateChanged: (view, previousState, newState) => {
+                    if (String(newState) === 'HIDDEN') {
+                        const bar = owner.get();
+                        if (bar) {
+                            bar.searchText = '';
+                            bar.notify({ eventName: AppBarBase.searchCancelEvent, object: bar, text: '' });
+                        }
+                    }
+                }
+            }));
+        }
+    }
+    /** `bottomItems`: a Material BottomAppBar, over the content, below the overlay */
+    syncBottomBar(appBar, behavior) {
+        const items = (appBar?.bottomItems || []).filter((item) => !item.spacer);
+        const coordinator = this._coordinator;
+        if (!items.length) {
+            if (this._bottomBar) {
+                this._bottomBar.setVisibility(android.view.View.GONE);
+                this.syncBottomInset(appBar, false);
+            }
+            return;
+        }
+        const BottomAppBar = com.google.android.material.bottomappbar.BottomAppBar;
+        const CoordinatorLayout = androidx.coordinatorlayout.widget.CoordinatorLayout;
+        if (!this._bottomBar) {
+            const bar = new BottomAppBar(this._context);
+            const params = new CoordinatorLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
+            params.gravity = android.view.Gravity.BOTTOM;
+            // below the overlay (a FAB, a panel)
+            coordinator.addView(bar, coordinator.indexOfChild(this._nativeOverlay), params);
+            this._bottomBar = bar;
+        }
+        const bar = this._bottomBar;
+        bar.setVisibility(android.view.View.VISIBLE);
+        bar.setHideOnScroll(behavior === 'hide');
+        const menu = bar.getMenu();
+        menu.clear();
+        const owner = new WeakRef(appBar);
+        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);
+            }
+            menuItem.setShowAsAction(android.view.MenuItem.SHOW_AS_ACTION_ALWAYS);
+        });
+        attachBadges(bar, this._bottomBadges, items
+            .map((item, index) => ({ id: index, badge: item.badge }))
+            .filter((entry) => entry.badge !== undefined && entry.badge !== null && entry.badge !== false && entry.badge !== ''));
+        bar.setOnMenuItemClickListener(new androidx.appcompat.widget.Toolbar.OnMenuItemClickListener({
+            onMenuItemClick: (menuItem) => {
+                const target = owner.get();
+                if (target) {
+                    notifyBottomItemTap(target, items[menuItem.getItemId()]);
+                }
+                return true;
+            }
+        }));
+        this.syncBottomInset(appBar, true);
+    }
+    /** 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;
+        if (this._bottomInsetListener) {
+            bar.removeOnLayoutChangeListener(this._bottomInsetListener);
+            this._bottomInsetListener = null;
+        }
+        if (!target) {
+            return;
+        }
+        if (!visible) {
+            if (target['__appBarBottomPadding'] !== undefined) {
+                target.setPadding(target.getPaddingLeft(), target.getPaddingTop(), target.getPaddingRight(), target['__appBarBottomPadding']);
+                target['__appBarBottomPadding'] = undefined;
+            }
+            return;
+        }
+        const apply = () => {
+            if (target['__appBarBottomPadding'] === undefined) {
+                target['__appBarBottomPadding'] = target.getPaddingBottom();
+            }
+            if (target instanceof android.view.ViewGroup) {
+                target.setClipToPadding(false);
+            }
+            target.setPadding(target.getPaddingLeft(), target.getPaddingTop(), target.getPaddingRight(), bar.getHeight());
+        };
+        this._bottomInsetListener = new android.view.View.OnLayoutChangeListener({
+            onLayoutChange: () => {
+                if (target.getPaddingBottom() !== bar.getHeight() && this._bottomInsetListener) {
+                    apply();
+                }
+            }
+        });
+        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;
+        if (this._insetListener) {
+            appBarLayout.removeOnLayoutChangeListener(this._insetListener);
+            this._insetListener = null;
+        }
+        if (!target) {
+            return;
+        }
+        if (!translucent) {
+            if (target['__appBarPadding'] !== undefined) {
+                target.setPadding(target.getPaddingLeft(), target['__appBarPadding'], target.getPaddingRight(), target.getPaddingBottom());
+                target['__appBarPadding'] = undefined;
+            }
+            return;
+        }
+        const apply = () => {
+            if (target['__appBarPadding'] === undefined) {
+                target['__appBarPadding'] = target.getPaddingTop();
+            }
+            if (target instanceof android.view.ViewGroup) {
+                target.setClipToPadding(false);
+            }
+            // only the part of the bar that does not scroll away: the height of the expanded bar
+            target.setPadding(target.getPaddingLeft(), appBarLayout.getHeight(), target.getPaddingRight(), target.getPaddingBottom());
+        };
+        this._insetListener = new android.view.View.OnLayoutChangeListener({
+            onLayoutChange: () => {
+                if (target.getPaddingTop() !== appBarLayout.getHeight() && this._insetListener) {
+                    apply();
+                }
+            }
+        });
+        appBarLayout.addOnLayoutChangeListener(this._insetListener);
+        apply();
+    }
+    _addViewToNativeVisualTree(child, atIndex = Number.MAX_SAFE_INTEGER) {
+        const nativeChild = child.nativeViewProtected;
+        if (!this.nativeViewProtected || !nativeChild || !this._coordinator) {
+            return false;
+        }
+        if (child instanceof ActionBar) {
+            const AppBarLayout = com.google.android.material.appbar.AppBarLayout;
+            this._appBarLayout.addView(nativeChild, new AppBarLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT));
+            this.syncAppBar();
+        }
+        else if (child === this._overlay) {
+            this._nativeOverlay.addView(nativeChild, atIndex);
+        }
+        else if (child === this._searchContent) {
+            this._searchView.addView(nativeChild);
+        }
+        else {
+            this._nativeContent.addView(nativeChild, atIndex);
+        }
+        return true;
+    }
+    _removeViewFromNativeVisualTree(child) {
+        const nativeChild = child.nativeViewProtected;
+        const parent = nativeChild?.getParent();
+        parent?.removeView(nativeChild);
+    }
+}
+//# sourceMappingURL=index.android.js.map