How to have a searchview of material design?

Asked

Viewed 282 times

1

I need to have a Toolbar with the menu items inside, search icon and voice. Like the one in the picture:

inserir a descrição da imagem aqui

I have the code to Activity

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_home, menu)

        return super.onCreateOptionsMenu(menu)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean = when (item.itemId) {
/*        R.id.action_search -> {
            startActivity(Intent(this, SearchActivity::class.java))
            true
        }*/
        R.id.item__code -> {
            givenPermission(android.Manifest.permission.CAMERA, granted = {
                startActivity(Intent(this@HomeActivity, CodeReaderActivity::class.java))
            })
            true
        }
//        R.id.item_contacts -> {
//            startActivity(Intent(this, ContactsSuggestionActivity::class.java))
//            true
//        }
        else -> super.onOptionsItemSelected(item)
    }

Menu:

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

<!--    <item
        android:id="@+id/item_search"
        android:orderInCategory="200"
        android:title="@string/search"
        android:icon="@drawable/ic_search_24dp"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom|collapseActionView"
        android:iconifiedByDefault="false" />-->

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

    <item
        android:id="@+id/item__code"
        android:orderInCategory="300"
        android:title="@string/code_reader"
        android:icon="@drawable/ic_qr_code_black_24dp" />

    <!--<item-->
        <!--android:id="@+id/item_contacts"-->
        <!--android:orderInCategory="400"-->
        <!--android:title="@string/contacts_on_"-->
        <!--android:icon="@drawable/ic_qr_code_black_18dp" />-->

</menu>

I tried to ride straight on Toolbar:

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <SearchView
            android:id="@+id/search"
            shapeColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@color/white"
            android:onClick="@{(view) -> viewModel.onSearchClicked(view)}"
            android:queryHint="Pesquisar"
            android:searchIcon="@drawable/ic_search_24dp"
            android:voiceIcon="@drawable/ic_settings_voice_black_24px"
            app:iconifiedByDefault="false">

        </SearchView>

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed" />

</android.support.design.widget.AppBarLayout>

But in none of the cases have I succeeded. It should always be expanded and with these items. How can I do?

EDIT:

Homeactivity Menu:

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.menu_home, menu)

    val manager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
    val search = menu.findItem(R.id.item_search).actionView as android.support.v7.widget.SearchView
    val si = manager.getSearchableInfo(componentName)

    var opt : Int = search.imeOptions
    search.imeOptions = EditorInfo.IME_FLAG_NO_EXTRACT_UI
    search.backgroundTintMode
    search.setSearchableInfo(si)
    search.setIconifiedByDefault(false)

    return super.onCreateOptionsMenu(menu)
}

What I got:

inserir a descrição da imagem aqui

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.