SearchView icons are not showing in Android

Question

I am trying to understand how to implement a SearchView in Android in my toolbar. The problem is that depending on the configurations I choose I get different interface results.

This is the layout of my Activity:

<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="fill_parent"
    tools:context="com.construct.v2.activities.teams.ActivityTeams"
    android:background="#ffffff"
    android:id="@+id/relativeLayout">

    <include android:id="@+id/toolbar" layout="@layout/toolbar_shadow"/>

    <ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/toolbar" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabIndicatorColor="#125688"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
</RelativeLayout>

This is my toolbar_shadow layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/PopupMenuStyle"
    android:id="@+id/my_awesome_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:titleTextColor="@android:color/black"
    android:layout_alignParentTop="true"
    android:gravity="right"
    android:elevation="5dp">
  <TextView
      android:id="@+id/delete"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="@dimen/s_text_size"
      android:padding="@dimen/small_margin"
      android:layout_gravity="right|end"
      android:layout_marginEnd="@dimen/s_margin"
      android:textColor="#000000"
      android:text="@string/edit"/>
</android.support.v7.widget.Toolbar>

And this is the layout file for my search item:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/search"
        android:title="@string/search"
        app:icon="@drawable/ic_search_black_24dp"
        android:icon="@drawable/ic_search_black_24dp"
        app:showAsAction="collapseActionView|ifRoom"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

With this configuration I get this output:

But if I click on the magnifying glass I get this:

If I start typing I get this:

So I thought that it was because I have this configuration app:showAsAction="collapseActionView|ifRoom" but I tried to change to always but i got this output:

The magnifying glass disappears. But if I click on the place where it is supposed to be I get this output:

Which is the correct output I am looking for, but I don't know why the magnifying glass is not showing.

This is the part in my activity where I initialize the searchview:

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

    SearchManager searchManager = (SearchManager)
            getSystemService(Context.SEARCH_SERVICE);
    searchMenuItem = menu.findItem(R.id.search);
    searchView = (SearchView) searchMenuItem.getActionView();

    ImageView searchClose = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchClose.setImageResource(R.drawable.ic_action_cancel_black);

    for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
        textView.setTextColor(Color.BLACK);
        textView.setHintTextColor(Color.BLACK);
    }

    searchView.setSearchableInfo(searchManager.
            getSearchableInfo(getComponentName()));
    searchView.setSubmitButtonEnabled(true);
    searchView.setOnQueryTextListener(this);

    return true;
}

And this is how I initialize my toolbar:

@Override
    protected void initToolbar() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        if(toolbar!=null) {
            if (user_type == 1) {
                toolbar.setTitle(R.string.collaborators_title);
            } else if (user_type == 2) {
                toolbar.setTitle(R.string.admin_title);
            }
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            toolbar.setNavigationIcon(R.drawable.ic_action_back_black);
            //getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //toolbar.setTitle("Teste");
            //toolbar.setTitleTextColor(Color.parseColor("#000000"));
            //final TextView edit = (TextView) findViewById(R.id.delete);
            //edit.setText(" ");

            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    onBackPressed();
                }
            });
        }
    }

Answer 1

Since I can't see the rest of the code where you implement the functionality for the x button, I'm just gonna take a stab at it. Add a listener for when the user leaves the search view to go back to the view with the magnifying glass. In that listener add this line:

<Your activity>.findViewById(R.id.search).setVisibility(View.VISIBLE);

It could be possible that the searchview automatically set the view to invisible, but you never reset the visibility for the user.

Answer 2

Edit:

app:icon="@drawable/ic_search_black_24dp"
android:icon="@drawable/ic_search_black_24dp" 

there is difference between app: prefix and android: prefix . With appcompat-v7 library you can use android: prefix and remove app:icon line .

app:showAsAction="collapseActionView|ifRoom"

Change this line to
app:showAsAction="always|collapseActionView" In searchview if we select only always as showasAction then back arrow is not visible.

Answer 3

Check the theme and styles of your app because a I had had the same problem that you and it made me crazy.

I found the solution changing the theme and styles.

1. If you are using Toolbar I assume that your main theme is

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

2. For the AppBarLayout use this

   <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark" />

3. For the Toolbar use this

   <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

Note that one is Dark and the other is Light . You can exchange both if it adjust better to your main theme

4. Use the suggest from Zohra Khan

Change this line to app:showAsAction="always|collapseActionView" In searchview if we select only always as showasAction then back arrow is not visible.

If it's not clear, take a look to this example from where I took this ideas

Hope this helps you