LoginSignup
0
2

More than 1 year has passed since last update.

【AndroidStudio】KotlinでToolBarに検索欄を作りたい

Last updated at Posted at 2022-09-10

やりたいことはタイトルの通りToolBarに検索欄をつけたかったので,その方法について載せる.

完成イメージ

上の画像のように検索アイコンがあり,アイコンをタップすると下の画像のように文字入力ができるようになる
2022-09-11 (9).png
2022-09-11 (8).png

ToolBarを追加する

まずはToolBarを表示させたいレイアウトにToolBarを追加する

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"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
    </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

テーマは特に変えていない.私の場合は以下のようになっている.

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

    <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/Theme.ToolBarSample">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ToolBarSample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

ToolBarに表示するレイアウトを追加する

ToolBarに表示するレイアウトを作るために新しくリソースディレクトリを作る
まずはresフォルダで右クリック → New -> Android Resource Directoryの順にクリック → Directory nameにmenuと名付けてOK
2022-09-11.png
2022-09-11 (1).png

作成したmenuフォルダで右クリック → New -> Menu Resource Fileの順にクリック → File Nameに好きな名前を付けてFinish
2022-09-11 (3).png
2022-09-11 (4).png

作成したファイルに検索欄であるSearchViewを追加
ここに書くことで自由にToolBarにwidget等を追加できる.

toolbar_layout.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_bar"
        android:title="search"
        app:actionViewClass="android.widget.SearchView"
        app:showAsAction="always"/>

</menu>

余談

ちなみにapp:showAsActionの設定はalwaysにすると完成イメージのように常に表示される状態となる.neverにすると上の画像のようにToolBar右端のメニューにまとめられタップすると下の画像のようにまとめられたものが表示される.ifRoomはToolBarに表示するスペースがあれば常に表示され,なければ右端のメニューにまとめられる.
2022-09-11 (10).png
2022-09-11 (11).png

検索欄に文字が入力されたときの処理を書く

MainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.Menu
import android.widget.SearchView

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

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar_layout, menu)
        val searchItem = menu?.findItem(R.id.search_bar)
        val searchView = searchItem?.actionView as SearchView
        searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextChange(newText: String?): Boolean {
                // 文字が入力されるたびに実行することを書く
                return false
            }

            override fun onQueryTextSubmit(newText: String?): Boolean {
                // キーボードの検索ボタンが押されたりとか文字入力が確定されたときに実行されることを書く
                return false
            }
        })
        return true
    }

}

onCreateOptionsMenuのmenuInflater.inflateには作成したToolBarのレイアウトを指定
onQueryTextChangeに書いた処理は文字が入力されるたびに実行される.文字が入力された段階でリアルタイムに検索結果を表示したいときはここに書くといい.
onQueryTextSubmitに書いた処理はキーボードの検索ボタンとか決定ボタンが押されて文字入力が確定されたときに実行される.文字を入力して文字を確定した時に検索結果を表示したいときはここに書くといい.

参考資料

おわりに

これで割と自分好みにToolBarをカスタマイズできるようになるはず.
最後まで読んでいただきありがとうございました!何かありましたらコメントお願いします.

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2