Android SearchView (AndroidX / KOTLIN)

Android SearchView is widget that provides a user interface for the user to enter a search query and submit a request to a search provider.

Android SearchView (AndroidX / KOTLIN)
Android SearchView (AndroidX / KOTLIN)

Android SearchView (AndroidX/KOTLIN)

Download sample code .  AndroidSearchView 

Sample Video : https://www.youtube.com/watch?v=Io65s9TJ6Mo

Sample APK : https://github.com/datanapps/AndroidSearchView/blob/master/screens/app-debug.apk

 

Android helps you implement the user interface with  searchview widget. Features available for the search dialog and widget include:

  • Voice search
  • Search suggestions based on recent queries
  • Search suggestions that match actual results in your application data

 

----------------------------------------------------------------

Creating a sample project in android studio

 

1. Create a sample project from android studio. to create a sample project please go to below steps:

File  -> New -> New Project --> A popup will come then select a empty activity.

2. Open project app -> res -> change resource values file like strings, color, dimens.

app > res > values > colors.xml  :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

app > res > values > styles.xml : 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>



    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

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



</resources>

app > res > values > string.xml :

<resources>
    <string name="app_name">Android Searchview</string>
</resources>

3. Open project app -> res -> menu change resource menu file .

app > res > menu > search_menu.xml

<?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/app_name"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />
</menu>

4 Open project app -> res -> xml change resource menu file .

app > res > xml > searchable.xml :

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="@string/app_name"
    android:hint="search"
    android:voiceSearchMode="showVoiceSearchButton|launchRecognizer"
    android:searchSuggestAuthority="com.datanapps.androidsearchview.MySuggestionProvider"
    android:searchSuggestIntentAction="android.intent.action.SEARCH"
    android:searchSuggestSelection=""
    >
</searchable>

5. Now add dependencies in app gradle file. 

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-android'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.0"
    defaultConfig {
        applicationId "com.datanapps.androidsearchview"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    // app compat
    implementation 'androidx.appcompat:appcompat:1.0.2'

    // constraint
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

    // app bar and other material design
    implementation 'com.google.android.material:material:1.0.0'




    implementation "androidx.core:core-ktx:1.0.2"
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
repositories {
    mavenCentral()
}

 

6. Create a layout for MainActivity class :

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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbarMainActivity"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="@string/app_name">

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>


    <TextView
        android:id="@+id/resultTVMainActivity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Main screen"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

7. Create an activity MainActivity :

package com.datanapps.androidsearchview

import android.app.SearchManager
import android.content.Context
import android.os.Bundle
import android.view.Menu


import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.SearchView

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //set toolbar

        setSupportActionBar(toolbarMainActivity)

    }


    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        val inflater = menuInflater
        inflater.inflate(R.menu.search_menu, menu)

        // Associate searchable configuration with the SearchView
        val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
        val searchView = menu.findItem(R.id.search).actionView as SearchView
        searchView.maxWidth = Integer.MAX_VALUE
        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(componentName))

        return true
    }
}

 

8. Create a layout for SearchResultActivity :

activity_search_result.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=".SearchResultsActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBarSearchResult"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="">

            <androidx.appcompat.widget.SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                app:iconifiedByDefault="false"
                app:queryHint="Search" />

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <TextView
        android:id="@+id/resultTVSearchResultActivity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Searcher screen"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

9.  Create SearchResultActivity to get search keyword from MainActivty and show result in SearchResultActivity layout: 

package com.datanapps.androidsearchview

import android.app.SearchManager
import android.content.Context
import android.content.Intent
import android.os.Bundle
import android.provider.SearchRecentSuggestions
import android.view.MenuItem


import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.SearchView
import androidx.appcompat.widget.Toolbar
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.activity_search_result.*


class SearchResultsActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_result)

        //settoolbar

        setSupportActionBar(toolBarSearchResult)


        // manage search view
        manageSearchView()

        // handle new imtent
        handleIntent(intent)
    }


    private fun manageSearchView() {
        val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager

        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(componentName))


        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String): Boolean {
                return false
            }

            override fun onQueryTextChange(newText: String): Boolean {
                resultTVSearchResultActivity!!.text = newText
                return false
            }
        })

        searchView.setOnSuggestionListener(object : SearchView.OnSuggestionListener {
            override fun onSuggestionSelect(position: Int): Boolean {
                return false
            }

            override fun onSuggestionClick(position: Int): Boolean {
                return false
            }
        })
    }


    private fun saveCurrentData(query: String?) {
        if (query != null) {
            val suggestions = SearchRecentSuggestions(this,
                    MySuggestionProvider.AUTHORITY, MySuggestionProvider.MODE)
            suggestions.saveRecentQuery(query, null)
        }
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            android.R.id.home -> {
                finish()
                return true
            }
            else -> return super.onOptionsItemSelected(item)
        }
    }

    override fun onNewIntent(intent: Intent) {
        setIntent(intent)
        handleIntent(intent)
    }

    private fun handleIntent(intent: Intent) {
        if (Intent.ACTION_SEARCH == intent.action) {
            val query = intent.getStringExtra(SearchManager.QUERY)
            saveCurrentData(query)

            searchView.post {
                // Important! Make sure searchView has been initialized
                // and referenced to the correct (current) SearchView.
                // Config changes (e.g. screen rotation) may make the
                // variable value null.
                searchView.setQuery(query, false)
                resultTVSearchResultActivity!!.text = query
            }


        }
    }

}

10. Create suggestion provider to store search History value: 

(i have created default one)

package com.datanapps.androidsearchview;

import android.content.SearchRecentSuggestionsProvider;

public class MySuggestionProvider extends SearchRecentSuggestionsProvider {
    public final static String AUTHORITY = "com.datanapps.androidsearchview.MySuggestionProvider";
    public final static int MODE = DATABASE_MODE_QUERIES | DATABASE_MODE_2LINES;

    public MySuggestionProvider() {
        setupSuggestions(AUTHORITY, MODE);
    }
}

 

11.  Now please check manifest file carefully:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.datanapps.androidsearchview">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme.NoActionBar"
        tools:ignore="GoogleAppIndexingWarning">

        <activity
            android:name="com.datanapps.androidsearchview.MainActivity"
            android:launchMode="singleTop">
            <meta-data
                android:name="android.app.default_searchable"
                android:value="com.datanapps.androidsearchview.SearchResultsActivity"/>

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <activity
            android:name="com.datanapps.androidsearchview.SearchResultsActivity"
            android:launchMode="singleTop"
            android:parentActivityName=".MainActivity">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.datanapps.androidsearchview.MainActivity" />

            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable" />

            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>
        </activity>

        <provider
            android:name=".MySuggestionProvider"
            android:authorities="com.datanapps.androidsearchview.MySuggestionProvider" />

    </application>

</manifest>

 

Hope all work now. 

 

Please download project code from here.  AndroidSearchView 

---------------------------------------------

 Check out  my other useful blog :  android-night-mode

Above is just a basic things to understand flow. Next week I’ll post top data binding with recycle view and adapter  that is very useful and mostly all apps using this. 

you can also suggest ideas for my next blog in comment section.

please click LIKE button and SHARE to help others to find it!

Thank you so much, Have a great day !


Click Here To See More

What's Your Reaction?

like
2
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0