Cara Membuat atau Menambahkan SearchView di Actionbar Pada Aplikasi Android

Cara Membuat SearchView di ActionBar Pada Android Studio

Hai semuanya. Bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat atau menambahkan searchview di actionbar pada aplikasi android.

ActionBar memiliki fungsi keren seperti beradaptasi dengan konfigurasi layar, menambahkan menu opsi, tampilan pencarian, share, navigasi di antara layar, tab, opsi dropdown dan lain-lain. SearchView membuat user untuk menemukan sesuatu dengan mudah dengan mengetik di kotak pencarian. Kalian dapat menggunakan SearchView di ToolBar/AppBar, ListView, Halaman desain custom dan lain-lain.

Dalam tutorial ini, kalian akan belajar cara menerapkan SearchView di ActionBar. Ada berbagai macam cara untuk membuat SearchView di ActionBar, dan dalam tutorial ini kalian akan mempelajari salah satu cara yang paling sederhana.

- Advertisement -

Tutorial Cara Membuat SearchView di ActionBar Pada Aplikasi Android

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Search App
Package Name:com.androidrion.searchapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file java activity yang digunakan dalam projek ini:

  • MainActivity.java

Daftar file menu yang digunakan dalam projek ini:

  • menu_item.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi android Search App.

XML Menu File

Buatlah folder Android Resource Directory menu pada projek android studio kalian. Kalian bisa mengikuti tutorial pada link di bawah ini untuk membuat folder menu di projek android studio kalian.

CARA MEMBUAT FOLDER MENU DI DALAM PROJEK ANDROID STUDIO

Setelah kalian membuat folder menu pada projek android studio kalian, buatlah file xml menu didalamnya dengan cara klik kanan pada folder menu lalu pilih New>Menu resource file. Simpan file xml menu dengan nama menu_item. Berikut ini adalah kode lengkap untuk file menu_item.xml

app/res/menu/menu_item.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/action_search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always|collapseActionView"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search" />
</menu>

Java Activity File

Buka file MainActivity dalam folder java projek android studio kalian dan tambahkan kode di bawah ini untuk membuat SearchView pada ActionBar bekerja dengan sempurna. Berikut ini adalah kode lengkap untuk file MainActivity.

app/java/com.androidrion.searchapp/MainActivity.java

[sociallocker id=”1410″]

package com.androidrion.searchapp;

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

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;

public class MainActivity extends AppCompatActivity {

    @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_item, menu);
        final SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                searchView.clearFocus();
                return true;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });
        return super.onCreateOptionsMenu(menu);
    }
}

[/sociallocker]

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat icon kaca pembesar di ToolBar/ActionBar pada aplikasi. Ketika kalian mengklik ikon tersebut, aplikasi akan menampilkan kolom pencarian. Pada kolom tersebut kalian bebas untuk mengetik. Jika kode di atas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat dan menampilkan SearchView di ActionBar pada aplikasi android studio. Tutorial diatas sangatlah mudah dikerjakan karena tutorial di atas salah satu cara sederhana untuk membuat searchview pada actionbar bekerja.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

2 Comments
  1. Grace says

    Terima kasih, penjelasannya sangat mudah dipahami. Tapi ada yang ingin saya tanyakan, jika search app tersebut diimplementasikan, hanya berada pada main activity saja ya? Bisakah dipakai disemua activity tanpa harus menulis ulang code yang sama pada main activity? Jadi diletakkan code search app disatu wadah tapi untuk semua activity..

    1. Android Rion says

      Hai Grace,Terima kasih telah mengunjungi blog Android Rion.

      Mengenai perihal yang di tanyakan, tentu saja kita bisa membuat searchview selalu berada di actionbar di setiap activity. namun, saya saat ini belum bisa membuatnya karena sedang ada kerjaan.

      Semoga jawaban tersebut bisa membuat penasaran Grace berkurang.

Leave A Reply

Your email address will not be published.