ActionBar title not visible when using a custom actionView


#1

Hey there,

I try to put some filter functionality in one of the pages in our app by putting an action-item ‘search’ to the ActionBar and when the user taps it, the ActionBar should show a SearchBar where the user can type a filter-pattern. It basically works, the only problem is that the title of the ActionBar is not shown anymore, even if the SearchBar is not shown (if the user does not tap the ActionItem)

I would expect the title to be visible here:
31

When the user taps the search-icon, the SearchBar is visible only (correct behaviour).
50

This is the way I define the ActionBar:

<ActionBar title="My title" className="actionbar">
        <android>
            <NavigationButton icon="res://ic_drawer" tap="openSideDrawer"/>
        </android>
        <ActionItem.actionView>
            <SearchBar text="{{ filter }}" hint="Filter..." className="filter-searchbar"
                   visibility="{{ searchbarVisible ? 'visible' : 'collapse' }}"/>
        </ActionItem.actionView>
        <ios>
            <ActionItem ios.position="right" icon="res://ic_drawer" tap="openSideDrawer" />
        </ios>
</ActionBar>

Btw, the issue is not caused by the SearchBar itself or by the css defined in the ‘filter-searchbar’ class, because I added different widgets (e.g. a simple Label without any css) and I notice the same issue: the title is not visible in the ActionBar.

I also tried to add a custom ActionBar.titleView with a Label, but it is also not visible until I remove the custom actionitem from the XML.

Does anybody have an idea what I can do? Or maybe there is someone who has the same problem?

Best regards,
Felix


#2

Not 100% sure, but you could try using an AbsoluteLayout as outlined in this GitHub issue: https://github.com/NativeScript/NativeScript/issues/5235


#3

@roblauer thanks for your reply, but unfortunately, that dis not help.


#4

Try hitting actionBar.invalidate() or actionBar.update() after you update value of searchbarVisible. That revisits all properties and might help you to bring title back.


#5

@manojdcoder thanks for your reply. I tried your suggestions, but actionBar.update() did not work. ‘invalidate’ does not seem to be included in the ActionBar API.

I think I will share an official issue with Telerik on GitHub, maybe this is a real issue and there might be no workaround for that.


#6

Actually no workaround is required, it seems to work as expected if you correct your syntax.

       <ActionBar title="My title" className="actionbar">
		<ActionItem visibility="{{ searchbarVisible ? 'visible' : 'collapse' }}">
			<ActionItem.actionView>
				<SearchBar text="{{ filter }}" hint="Filter..." className="filter-searchbar" />
			</ActionItem.actionView>
		</ActionItem>
	</ActionBar>

#7

Thanks, that really was my mistake. The fact, that the SearchBar is shown correctly did not lead me to the idea, that I use a wrong syntax for defining its ActionItem. Because of the wrong syntax, the SearchBar was interpreted by NativeScript as a custom titleview and not an actionview.

Now, as the SearchBar is used as an ActionItem since using the correct syntax, I got some trouble with positionating the SearchBar.
Thanks again @manojdcoder


#8

Does anyone know why the SearchBar has no margin on the right side on Android, eventhough I define it?

<ActionBar title="My title" className="actionbar">
        <android>
            <NavigationButton icon="res://ic_drawer" tap="openSideDrawer" />
        </android>
        <ActionItem android.position="actionBar" ios.position="right" visibility="{{ !searchbarVisible ? 'collapse' : 'visible' }}">
            <ActionItem.actionView>
                <SearchBar marginRight="50" loaded="onSearchBarLoaded" clear="onSearchBarCleared" text="{{ filter }}" hint="Filter..." className="filter-searchbar"/>
            </ActionItem.actionView>
        </ActionItem>
        <ActionItem android.position="actionBar" ios.position="right" icon="res://ic_action_search" tap="showSearchbar"
                    visibility="{{ searchbarVisible ? 'collapse' : 'visible' }}"/>
        <ios>
            <NavigationButton/>
            <ActionItem ios.position="right" icon="res://ic_drawer" tap="openSideDrawer" visibility="{{ selectingItems ? 'collapse' : 'visible' }}" />
        </ios>
</ActionBar>

50

I tried putting the SearchBar in a StackLayout container, and then I have the margin on Android…
51

… but then I would need to set a fixed width for the SearchBar, otherwise it would not be visible on iOS.
When adding a StackLayout (or any Layout container) around the SearchBar, the SearchBar looks like this on iOS
51
so there is this white/lightgray border around it. I tried to remove this with:

exports.onSearchBarLoaded = function(args) {
    var searchbar = args.object;

    if(searchbar.android) {
        //...
    } else if(searchbar.ios) {
        searchbar.ios.searchBarStyle = UISearchBarStyle.UISearchBarStyleProminent;
    }
};

… but this does not make any difference.

Does anyone have an idea?