Home » Android » Android SearchView – Move icon to right (without ActionBar)

Android SearchView – Move icon to right (without ActionBar)

Posted by: admin June 15, 2020 Leave a comment

Questions:

I have an android SearchView like so –

 <SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:queryHint="Search the forum ..."
        android:iconifiedByDefault="true"
        android:id="@+id/search_forum"
        android:layout_alignParentRight="true"
        android:textColor="#aaa" />

This is not in my ActionBar, it’s somewhere else in my activity.

I need the icon (the search icon) to stay on the right of my layout. On click it should expand into the SearchView (same behaviour as the ActionBar SearchView). I’ve tried android:layout_alignParentRight="true" but the icon stays to the left.

Any help would be great 🙂

How to&Answers:

I found a solution for this problem. Just set layout Direction to “rtl” and icon will be in Right Side. Here is the code for my search view and it is working as intended.

<SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutDirection="rtl"
    android:iconifiedByDefault="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer:

If the question is still unanswered:

Just move the SearchView into a RelativeLayout, and align it to the right side of the parent:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SearchView
    android:layout_width="wrap_content"
    android:id="@+id/searchView"
    android:layout_alignParentRight="true"
    android:layout_height="match_parent" />

The final result looks like this:

CardView with Linearlayout containing aligned SearchView

Answer:

I couldn’t find an exact answer to this so I did this-
Create an image view with search icon. Placed it on the right of my layout.
On click, made the search view visible and set iconified false and requested focus for the search view.

I’d be so grateful if somebody could eventually help me find a proper solution for this.

Answer:

Adding the SearchView as a menu item instead of a Toolbar element inherently solves the problem.

An elegent way to do it:

Step 1 – add the search field to you toolbar:

<item
    android:id="@+id/action_search"
    android:icon="@android:drawable/ic_menu_search"
    app:showAsAction="always|collapseActionView"
    app:actionViewClass="android.support.v7.widget.SearchView"
    android:title="Search"/>

Step 2 – add the logic to your onCreateOptionsMenu()

import android.support.v7.widget.SearchView; // not the default !

@Override
public boolean onCreateOptionsMenu( Menu menu) {
    getMenuInflater().inflate( R.menu.main, menu);

    MenuItem myActionMenuItem = menu.findItem( R.id.action_search);
    searchView = (SearchView) myActionMenuItem.getActionView();
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
            UserFeedback.show( "SearchOnQueryTextSubmit: " + query);
            if( ! searchView.isIconified()) {
                searchView.setIconified(true);
            }
            myActionMenuItem.collapseActionView();
            return false;
        }
        @Override
        public boolean onQueryTextChange(String s) {
            // UserFeedback.show( "SearchOnQueryTextChanged: " + s);
            return false;
        }
    });
    return true;
}

Source: https://stackoverflow.com/a/34255229/384564

Answer:

Try this:

 SearchView searchView =
       (SearchView) findViewById(R.id.search_view);
    searchView.setIconifiedByDefault(false);
    searchView.setIconified(false);

  ImageView searchViewIcon = (ImageView)searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);

    ViewGroup linearLayoutSearchView =
       (ViewGroup) searchViewIcon.getParent();
    linearLayoutSearchView.removeView(searchViewIcon);
    linearLayoutSearchView.addView(searchViewIcon);

Taken from here.

Answer:

I’ve exactly same requirements for SearchView placed other than Toolbar, i.e. when collapsed search icon should be on right end side and when expanded it covers entire width.

I’ve tried out this solution for SearchView within RelativeLayout.

<androidx.appcompat.widget.SearchView
    android:id="@+id/searchView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true" />

And handled OnSearchClickListener and OnCloseListener in code to toggle width between MATCH_PARENT and WRAP_CONTENT.

searchView.setOnSearchClickListener {
    val params = it.layoutParams as RelativeLayout.LayoutParams
    params.width = RelativeLayout.LayoutParams.MATCH_PARENT
    it.layoutParams = params
}

searchView.setOnCloseListener {
    val params = searchView.layoutParams as RelativeLayout.LayoutParams
    params.width = RelativeLayout.LayoutParams.WRAP_CONTENT
    searchView.layoutParams = params

    [email protected] false
}

Answer:

Worked for me this way. I use Toolbar not ActionBar.

searchView.setLayoutParams(new Toolbar.LayoutParams(Gravity.RIGHT));