【Android開発】AppCompatのSearchViewのテキストカラーやアイコンを変更する

AppCompatのSearchViewのアイコンやテキストカラーを変更しようと思い、style.xmlで変更出来るだろうと考えていたら、どうやらそう簡単にはいかないらしく、変更する方法を見つけるのに意外と手間がかかったので、メモとして書いておきます。

今回の開発環境

  • Mac OS X 10.9.4
  • Android Studio Beta 0.8.6

前準備

まず、SearchViewを追加したいmenuリソースに以下のようにメニューアイテムを追加します。
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      tools:context=".MainActivity">
    <item
        android:id="@+id/search_view"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:icon="@drawable/ic_action_search"
        android:showAsAction="always"
        android:title="Search"
        app:showAsAction="always" />
</menu>
次に、Activityの onCreateOptionsMenu() で SearchView を取得しておきます。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    SearchView searchView =
            (SearchView) MenuItemCompat.getActionView(
                    menu.findItem(R.id.search_view)
            );
    return true;
}
また、取得したSearchViewから SearchAutoComplete を取得しておきます。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    /* 省略 */
    SearchView.SearchAutoComplete searchAutoComplete =
            (SearchView.SearchAutoComplete) searchView
                .findViewById(
                    android.support.v7.appcompat.R.id.search_src_text
                );
    /* 省略 */
}
これで準備完了です。

ActionBarのSearchViewのアイコンを変更する

ActionBarのSearchViewのアイコンを変更するには、SearchViewからアイコンを表示しているImageViewを取得し、画像を差し替えることで変更できます。
具体的には以下のようにします。
ImageView searchIcon = (ImageView)
        searchView.findViewById(
                android.support.v7.appcompat.R.id.search_button
        );
searchIcon.setImageResource(R.drawable.ic_action_search);

SearchAutoComplete内のSearchViewアイコンを変更する

SearchViewのSearchAutoComplete内のアイコンを変更するには、以下のようにSpannableStringBuilderを使ってHintTextと一緒にアイコンを変更します。
SpannableStringBuilder ssb = new SpannableStringBuilder("   ");
// ヒントテキスト
ssb.append("Enter the keyword");
// ヒントアイコン
Drawable searchHintIcon =
        getResources().getDrawable(R.drawable.ic_action_search);
int textSize = (int) (searchAutoComplete.getTextSize() * 1.25);
searchHintIcon.setBounds(0, 0, textSize, textSize);
ssb.setSpan(
        new ImageSpan(searchHintIcon),
        1,
        2,
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
);
searchAutoComplete.setHint(ssb);

SearchViewのテキストカラーを変更する

既にSearchViewからSearchAutoCompleteを取得しているので、これのsetTextColor()メソッドを使うことで、テキストカラーを変更することができます。
searchAutoComplete.setTextColor(Color.rgb(0x56, 0x77, 0xfc));

SearchViewのヒントテキストのカラーを変更する

これも、SearchAutoCompleteのsetHintTextColor()メソッドを使うことで、テキストカラーを変更することができます。
searchAutoComplete.setHintTextColor(Color.rgb(0x91, 0xa7, 0xff));

SearchViewのテキスト削除アイコンを変更する

SearchViewに文字を入力すると右側に出てくる削除アイコンを変更するには、ActionBarのアイコンと同様に、SearchViewからアイコンを表示しているImageViewを取得し、画像を差し替えることで変更することができます。
ImageView removeIcon =
        (ImageView) searchView.findViewById(
                android.support.v7.appcompat.R.id.search_close_btn
        );
removeIcon.setImageResource(R.drawable.ic_action_remove);

コード全体

これらのコードをまとめると、コード全体はこのようになります。
res/menu/main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      tools:context=".MainActivity">
    <item
        android:id="@+id/search_view"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:icon="@drawable/ic_action_search"
        android:showAsAction="always"
        android:title="Search"
        app:showAsAction="always" />
</menu>
MainActivity.java
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.SearchView;
import android.text.Spannable;
import android.text.SpannableStringBuilder;
import android.text.style.ImageSpan;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        SearchView searchView =
                (SearchView) MenuItemCompat.getActionView(
                        menu.findItem(R.id.search_view)
                );
        SearchView.SearchAutoComplete searchAutoComplete =
                (SearchView.SearchAutoComplete) searchView
                        .findViewById(
                                android.support.v7.appcompat.R.id.search_src_text
                        );
        // ActionBarの検索アイコン
        ImageView searchIcon = (ImageView)
                searchView.findViewById(
                        android.support.v7.appcompat.R.id.search_button
                );
        searchIcon.setImageResource(R.drawable.ic_action_search);

        SpannableStringBuilder ssb = new SpannableStringBuilder("   ");
        // ヒントテキスト
        ssb.append("Enter the keyword");
        // ヒントアイコン
        Drawable searchHintIcon =
                getResources().getDrawable(R.drawable.ic_action_search);
        int textSize = (int) (searchAutoComplete.getTextSize() * 1.25);
        searchHintIcon.setBounds(0, 0, textSize, textSize);
        ssb.setSpan(
                new ImageSpan(searchHintIcon),
                1,
                2,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        );
        searchAutoComplete.setHint(ssb);

        // テキストカラー
        searchAutoComplete.setTextColor(Color.rgb(0x56, 0x77, 0xfc));
        // ヒントテキストカラー
        searchAutoComplete.setHintTextColor(
                Color.rgb(0x91, 0xa7, 0xff)
        );
        // Remove button icon
        ImageView removeIcon =
                (ImageView) searchView.findViewById(
                        android.support.v7.appcompat.R.id.search_close_btn
                );
        removeIcon.setImageResource(R.drawable.ic_action_remove);

        return true;
    }
}

実行してみる

実際に実行してみると、このようにアイコンやテキストカラーが変更されていることが確認できます。




まとめ

あまりスマートな方法ではないですが、なんとかテキストカラーやアイコンを自分の好きなものに変更することができました。
本当はstyle.xmlで一括で変更出来ると良いのですが、残念ながら自分ではstyle.xmlから変更する方法を見つけられなかったので、「style.xmlで変更する方法、知ってるよ！」という方が居れば、コメントなどで教えていただけると助かります。
このソースコードはgithubでも公開していますので、よろしければどうぞ。
https://github.com/syarihu/SearchViewTest
では、お疲れ様でした。

参考記事




コメント

コメントを投稿

人気の投稿

[Qiita] Androidの実機でPCのlocalhostに接続したり、Webページの要素を検証する

イメージ
※この記事は以前Qiitaに投稿されていた古い記事です はじめに 実機でPCのlocalhostに接続したいときや、実機で見ているWebページの要素を検証したいことがあったので、その方法をメモとして書いておきます。 必要なもの Android Android 4.0以上 最新のChrome PC Chrome 32以上 Android SDK SDKが必要というよりはadbが必要なので、既にSDKが入っている場合はadbにパスを通しておくだけで良いです。 ※ Chrome拡張で「adb」というものがありますが、現在は非推奨になっているため、ここでは使いません。 Android SDKをインストールする 手元にWindowsが無いため、今回はMacの説明のみ書きます。 既にAndroid SDKが入っている場合は、この手順は必要無いです。 Android SDKをダウンロードする ここ から、自分の環境のAndroid SDKをダウンロードします。 今回はadbのみ必要なため、SDKのみのダウンロードをします。 ダウンロードしたzipを任意の場所に置き、zipを解凍する ターミナルでダウンロードしたSDKのディレクトリ配下のtoolsディレクトリを開く cd [ 任意のディレクトリ ] /android-sdk-macosx/tools android というシェルスクリプトを起動する ./android Android SDK Managerが起動するので、 Android SDK Platform-tools のみにチェックを入れて右下のinstallボタンを押す 同意してインストールする 完了したら Close を押してAndroid SDK Managerも閉じる adbにパスを通す 先ほどのインストールでplatform-toolsというディレクトリが生成されているはずなので、そこにパスを通します。 ~/.bash_profile を開く vi ~/.bash_profile 以下のようにSDKのディレクトリ配下のplatform-toolsディレクトリにパスを通す export PATH = $PATH : [ SDKのディレクト...
続きを読む

【Ubuntu】Ubuntuでの動画再生時でのチラつきを直す

イメージ
Ubuntuで動画を再生する際に画面がチラつくことがあり、とても気になったため自分で色々試してみたがどうにも直らなかったので、調べてみた。 どうやらこの現象は「ティアリング」というらしく、CompizConfig設定をインストールし、「垂直ブランクに同期化」にチェックを入れると直るという記事を発見したので試してみた。 Ubuntu：動画再生時のティアリング対策 そして動画を再生してみたところ…直らなかった。 次に 「nVidia社のドライバ（VBlank有効）」 ＋ 「Compiz 垂直ブランク有効」 = 「ティアリング治まるがカクカク感あり」 という文をUbuntuの日本語フォーラム（ https://forums.ubuntulinux.jp/viewtopic.php?pid=63954#p63954 ）から発見したので早速設定を見てみたところ、既に設定が有効になっていた。 どうしようかと思いつつ設定を眺めていたら、「Sync to this display device」という項目を発見した。 僕の環境はデュアルディスプレイだったので、同期デバイスを動画を再生するディスプレイの方にチェックすれば直るのでは？と思い、チェックをして再生してみたところ、あっさりと直った。 つまり、Ubuntuで動画再生時にチラつきが出た場合には、Compiz設定で垂直ブランクを有効にし、nVidiaの設定でマルチスクリーン環境の場合には同期デバイスを動画を再生するディスプレイにチェックをしてから、VBlankを有効にすれば良いようだ。
続きを読む

【Linux】Linuxでディレクトリ毎にzip圧縮する

Linuxで、ディレクトリ毎にzip圧縮したかったのだが、一発でできるようなコマンドが無かったため、ディレクトリ毎にzip圧縮するシェルスクリプトを作ってみた。 適当なファイルを作って、下記のスクリプトを書いて、ファイル名を「zip_per_directory.sh」みたいな感じにして保存する。 #! /bin/sh IFS=" " for dir in `find ./ -type d` do dir=`basename $dir` if [ $dir != `basename ./` ] then zip -r $1$dir.zip $1$dir fi done 次に、そのままだと実行できないので実行権限を与える。 $ chmod +x zip_per_directory.sh 後は、圧縮したいディレクトリが入っている場所にさっき作ったファイルを移動して、ターミナルでディレクトリを移動してから実行する。 $ cd 圧縮したいディレクトリが入ってるパス $ ./zip_per_directory.sh 実行すると、カレントディレクトリにあるディレクトリをすべて自動で圧縮してくれるので、終わるまで待つだけ。 圧縮する際にはそのディレクトリにシェルスクリプトのファイルを移動しなければならないが、ディレクトリを右クリックして圧縮するという作業を何回も繰り返すよりは楽にできるのでは無いかと思う。
続きを読む