Change the appearance of Android Search Dialog

Question

I am trying to implement search functionality into an android app using the Search Dialog. After following the documentation, I got this search dialog when pressing the search button in my app.

As you can see, the search dialog is too small( the app bar can be seen below it), it is not centered, and contains the app icon near the back button.

The Search Dialog showed in the guide is centered vertically in the app bar and doesn't have the app icon near the back button, which is what I want to do for my search dialog as well. But I can't seem to find any resource on how to do it. Can anyone help me out?

Thanks in advance!

Edit: Here is the code that enables the Search Dialog

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val root = binding.root
        setContentView(root)
        //Setup the app bar
        setSupportActionBar(binding.toolbar);

    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater = menuInflater;
        inflater.inflate(R.menu.app_bar_menu, menu)
        return true;
    }

    override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
        R.id.action_search -> {
            onSearchRequested()
            true
        }
        else -> {
            super.onOptionsItemSelected(item)
        }
    }
}

searchable.xml

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:hint="@string/search_hint"
    android:label="@string/app_name">

</searchable>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:title="@string/app_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Using the method that you want for create a search dialog, this is the most similar aspect that it can achieve:

https://i.sstatic.net/hwTlF.png

This is the code that I implemented:

MainActivity.class code:

    @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

@SuppressLint("ResourceType")
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.options_menu, menu);

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    SearchView searchView = (SearchView) menu.findItem(R.id.search).getActionView();
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
    searchView.setIconifiedByDefault(true);
    searchView.setIconified(false);
    
    //Here you can set the parameters of the search view

    return true;
}

I created a menu resource file called options_menu.xml and that's the code:

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

</menu>

And the searchable xml file called search.xml

<?xml version="1.0" encoding="utf-8"?>
<Searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:hint="Your hint"
    android:label="Label text">
</Searchable>

I created the icon of the menu in the drawable folder but you can change to other icon if you want.

Also I leave several links to all the customizations that you can add to the searchView:

https://developer.android.com/guide/topics/search/searchable-config

https://developer.android.com/reference/android/widget/SearchView

I hope this is the right solution for you.

Answer 2

I made a different search method, I used the Android Studio search view, that's the main activity code:

    @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu, menu);
    MenuItem item = menu.findItem(R.id.mySearchButton);
    SearchView searchView = (SearchView)item.getActionView();

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

        @Override
        public boolean onQueryTextChange(String newText) {
            return false;
        }
    });

    return super.onCreateOptionsMenu(menu);
}

You have to create an Android Resource File, select resource type "menu", and call it as you want, after that, add this item:

    <item android:id="@+id/mySearchButton"
    android:title="Button"
    android:icon="@drawable/search_icon"
    app:actionViewClass="android.widget.SearchView"
    app:showAsAction="always"/>

This code worked for me, images here:

https://i.sstatic.net/XNRZy.png

https://i.sstatic.net/hUt4x.png

I hope it works for you aswell.