Put Search View Widget to the Right corner in Toolbar

Question

I want to put the search widget to right corner of the toolbar and when press it to open all the way to the left. But in case the search view goes out of the screen.

Any ideas?

   <android.support.v7.widget.Toolbar
        android:id="@+id/mainToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.SearchView
                android:layout_width="47dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                app:barrierDirection="left"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

            </android.support.v7.widget.SearchView>
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.Toolbar>

have u tried with menu https://stackoverflow.com/a/46087764/7666442 — AskNilesh, Aug 16 '18 at 13:20
Remove the ``, and the attributes for it in the ``, and add `layout_gravity="right|end"` to the ``. — Mike M., Aug 16 '18 at 23:13
Oh, and change its `layout_width` to `wrap_content`. It'll adjust its width itself. That may have been the root of the issue all along, but the `ConstraintLayout` is just unnecessary. — Mike M., Aug 18 '18 at 02:57

dilix · Answer 1 · 2018-08-16T13:27:27.497

The easiest way to show search icon + expanding it to the search edittext is to use Menu item:

<item android:id="@+id/search"
    android:title="@string/search_title"
    android:icon="@drawable/ic_search_white_24dp"
    app:showAsAction="collapseActionView|ifRoom"
    app:actionViewClass="android.support.v7.widget.SearchView" />

And then in onCreateOptionsMenu perform your logic

@Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.transcation_filter, menu);
        // Associate searchable configuration with the SearchView
        SearchManager searchManager =
                (SearchManager) getContext().getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView =
                (SearchView) menu.findItem(R.id.search).getActionView();
        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(getActivity().getComponentName()));

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                mViewModel.filter(newText);
                return false;
            }
        });
        super.onCreateOptionsMenu(menu, inflater);
    }

Collapsed search will look like

And expanded

This method inserts an arrow to the left when expanding . And i dont want that — Nick, Aug 16 '18 at 13:23
@Nick modified sample a little, search in menu doesn't mean you need back button — dilix, Aug 16 '18 at 13:24
Again, When you press the search button, the widget expands and an arrow is on the left of the widget in order to collapse the searchview to its initial form. I DONT want the arrow on the left. This method puts the arrow by default — Nick, Aug 16 '18 at 13:27

Put Search View Widget to the Right corner in Toolbar

1 Answers1