Teknologi & DevelopmentAndroidMemasang Search View di Action Bar Android

Memasang Search View di Action Bar Android

-

Kebetulan sekarang ini sedang sering ngAndroid ditempat kerja ataupun dirumah. Baru baru ini saya sempat membuat pencarian di Android menggunakan Search widget yang dipasang di Action Bar. Nah biar gak lupa jadi sebaiknya saya tulis disini, hitung hitung menyimpan ingatan dan siapa tau ada yang mbaca.

Langkah sederhananya adalah begini :
> Menambahkan Widget Pencarian item menu action bar.
> Mendefinisikan konfigurasi pencarian di xml.
> Membuat layout hasil pencarian.
> Mendefinisikan Activity pencarian dan Intent filter pada file file AndroidManifest.xml


searchshot

 

Pertama membuat file dalam folder menu untuk mendefinisikan pilihan menu pada action bar. Contohnya buat file dengan nama activity_main_actions.xml di dalam folder menu, buat item pencarian yang ditambahkan keterangan widget android:actionViewClass=”android.widget.SearchView.

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

 

Definisikan konfigurasi pencarian dalam folder res -> xml dengan nama file searchable.xml.

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

 

Kemudian edit file main activity anda dan tambahkan atau perbaharui bagian untuk load menu seperti dibawah

<!-- MyActivity.java -->
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_main_actions, menu);

// Associate searchable configuration with the SearchView
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.search)
.getActionView();
searchView.setSearchableInfo(searchManager
.getSearchableInfo(getComponentName()));

return super.onCreateOptionsMenu(menu);
}

 

Lalu kita buat layout activity untuk menghandle query dan hasil pencarian.

<!-- nama file : activity_search_results.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:id="@+id/txtQuery"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

 

Modifikasi main Activity anda agar mengarah ke layout hasil pencarian dan menambahkan aksi saat melakukan pencarian

<!-- MyActivity.java -->
package androlite.navigationsearch;

import android.app.Activity;
import android.app.SearchManager;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.SearchView;
import android.widget.TextView;


public class MyActivity extends Activity {

private TextView txtQuery;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_search_results);
txtQuery = (TextView) findViewById(R.id.txtQuery);
handleIntent(getIntent());
}

@Override
protected void onNewIntent(Intent intent) {
setIntent(intent);
handleIntent(intent);
}

/**
* Handling intent data
*/
private void handleIntent(Intent intent) {
if (Intent.ACTION_SEARCH.equals(intent.getAction())) {
String query = intent.getStringExtra(SearchManager.QUERY);

/**
* nah disini kamu bisa melakukan aksi pencarian atau load data atau menampilkan data ke listview, pokoknya disini aksinya 
*/
txtQuery.setText("Search Query: " + query);

}

}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_main_actions, menu);

// Associate searchable configuration with the SearchView
SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
SearchView searchView = (SearchView) menu.findItem(R.id.search)
.getActionView();
searchView.setSearchableInfo(searchManager
.getSearchableInfo(getComponentName()));

return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
return true;
}
}

 

Terkahir melakukan pendefinisian pada file AndroidManifest.xml. Definisikan android.app.searchable dan android.intent.action.SEARCH, karna berhubung kita hanya menggunakan satu activity jadi sematkan saja main Activity.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="androlite.navigationsearch" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="18" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MyActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<action android:name="android.intent.action.SEARCH" /> <!-- perhatikan bagian ini -->
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

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

</activity>

</application>

</manifest>

 

Nah sampai disini kita sudah berhasil punya pencarian di Action bar Android. Kalau mau dicoba silakan di Run bero.  Gimana? enak tho?

Tambahin android:launchMode=”singleTop” biar tambah enak:
Perlu diketahui bahwa setiap kali melakukan pencarian menggunakan action bar yang baru kita buat ini maka resultnya akan menciptakan activity baru. Nah kalau kamu mau setiap pencarian tidak menciptakan activity baru kamu perlu memodifikasi/ menambahkan opsi ini android:launchMode=”singleTop” di AndroidManifest.xml seperti ini :

<activity
android:name=".MyActivity"
android:label="@string/app_name"
android:launchMode="singleTop">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<action android:name="android.intent.action.SEARCH" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data
android:name="android.app.searchable"
android:resource="@xml/searchable" />
</activity>

 

Dah gitu ajah bero, semoga bermanfaat bagi saya dan bagi semuanya.  Anda bisa mendownload source code projectnya dari GitHub (Android Studio Version)

Saya belajar dari sini :

http://www.androidhive.info/2013/11/android-working-with-action-bar/

http://developer.android.com/training/search/setup.html

Ardhitya Wiedha Irawan
Ardhitya Wiedha Irawanhttp://aiueo.web.id
Full time Web Developer - Part time Android Coder - Part time Publisher - Big fan of #GGMU.

7 COMMENTS

  1. Maaf, ada sedikit kesalahan, jika pada manifest ditambahkan :

    didalam tag bersamaan dengan

    maka aplikasi tidak akan berjalan karena aplikasi melihat tidak ada launcher. tag tersebut tidak bisa diletakkan bersamaan dalam satu intent-filternya Main launcher.. jadi bagaimana solusinya jika saya mau meletakkan intent.SEARCH didalam Main Activity tapi tidak error..??

  2. kalo searchview mau dipasang di activity yang ada listview-nya bagaimna ? dan searchviewnya digunakan pada list itu ?

    thanks

    • Ya search view nya tinggal dipasang saja disana, yang membedakan adalah action saat query resultnya. Kalau saya biasanya saat melakukan pencarian, lalu listview saya clear dan kemudian data yang saya tampilkan pada listview adalah data hasil pencarian menggunakan query string dari search view tadi. Silakan lihat beberapa sample di github dll.

      Semoga membantu.

  3. Tutorial nya membingungkan nih, kurang spesifik kasih petunjuknya kayak “Definisikan konfigurasi pencarian dalam folder res -> xml dengan nama file searchable.xml.”, itu maksudnya di dalem folder res buat folder xml lagi atau gimana sih? bingung

    • Iya kayak gitu mas. Bikin folder xml di dalam folder res, lalu bikin file searchable.xml di dalamnya. Kalau bingung silakan liat source code saya di github, free download kok mas. Ngga usah bingung ya…

Comments are closed.

Latest news

Perbedaan Apache2 Reload dan Restart ?

Kamu pengguna apache ? ahh selamat! berarti kamu orang lama yang sulit move on haha. Konon sekarang di dunia...

Membuat Shortcut untuk switch Dark dan Light Mode di Macbook

Baru baru ini aku menginginkan sebuah fungsi tombol yang bisa mengganti tema di Macbook secara cepat, dari Dark Mode...

Cara buat Sticker langsung di Web WhatsApp tanpa Install aplikasi!

Hai sob! kali ini gulangguling.com akan berbagi cara mudah membuat sticker untuk whatsapp tanpa harus install aplikasi lainnya. Sering...

Cara Mengembalikan Nomer WhatsApp yang terkena Banned

Halo teman-teman. Kali ini saya akan berbagi cara mengembalikan nomer yang sudah terkena banned dari aplikasi WhatsApp. Tapi sebelumnya...

Aplikasi Rambox, dapat digunakan untuk login banyak akun WhatsApp hingga marketing jualan.

Aplikasi Rambox adalah sebuah program yang dirancang untuk mengintegrasikan beberapa aplikasi chatting dan kolaborasi dalam satu tempat. Dengan menggunakan...

Cara melihat history Kometar dan Like di Instagram

Pernah penasaran dengan apa saja sih yang pernah kita lakukan di Instagram? seperti kita likes komentarin postingan siapa saja...

Must read

You might also likeRELATED
Recommended to you