Search code examples
androidsearchviewandroid-toolbar

SearchView hides other Labels in Toolbar


As displayed in this image, I added a SearchView to the Toolbar and a Label to the bottom of that Toolbar.

But when I extend the SearchView for typing, it hides/removes all Labels as shown here. Any Ideas how to fix this?

Additionally, how do I get the Search-Label on the left on the same line as the icons?

activity_search.xml:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SearchActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/top_toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:paddingBottom="16dp"
        android:text="Label"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

menu_search.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".SearchActivity">

<item
    android:id="@+id/action_search"
    android:icon="@android:drawable/ic_menu_search"
    app:showAsAction="always"
    app:actionViewClass="android.support.v7.widget.SearchView"
    android:title="Search"/>
<item
    android:id="@+id/action_settings"
    android:title="@string/action_settings"
    android:orderInCategory="100"
    app:showAsAction="never" />


Solution

  • I fixed that issue by adding the SearchView directly to the Toolbar instead of adding it to the menu. Since that not fixed the repositioning of the label I use a FrameLayout inside the Toolbar. Additionally I added a maxWidth to the SearchView, since the expanded SearchView overlaps the TitleLabel. As alternative I could manually hide the TitleLabel when the SearchView expands.

    The xml of my Toolbar:

    <android.support.v7.widget.Toolbar
        android:id="@+id/search_toolbar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="@dimen/abc_action_button_min_height_material"
                android:text="Title"
                android:layout_gravity="left|top"
                android:gravity="center_vertical|left"
                android:paddingTop="@dimen/abc_action_bar_default_padding_material"
                android:id="@+id/toolbar_title"
                android:textColor="@color/abc_primary_text_material_dark"
                android:textSize="@dimen/abc_text_size_title_material_toolbar"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Toolbar Title"
                android:layout_gravity="center|bottom"
                android:id="@+id/toolbar_label"/>
    
            <SearchView
                android:id="@+id/menu_search"
                android:layout_gravity="right|top"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="250dp"
                android:paddingTop="@dimen/abc_action_bar_default_padding_material"/>
        </FrameLayout>
    
        </android.support.v7.widget.Toolbar>