【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
では、お疲れ様でした。

参考記事




コメント

コメントを投稿

人気の投稿

【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 実行すると、カレントディレクトリにあるディレクトリをすべて自動で圧縮してくれるので、終わるまで待つだけ。 圧縮する際にはそのディレクトリにシェルスクリプトのファイルを移動しなければならないが、ディレクトリを右クリックして圧縮するという作業を何回も繰り返すよりは楽にできるのでは無いかと思う。
続きを読む

[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のディレクト...
続きを読む

[Qiita] Google Playのクローズドベータ版テストでメールアドレスを指定して公開する

イメージ
※この記事は以前Qiitaに投稿されていた古い記事です はじめに ふと、Google Playのクローズドベータ版テストを試してみたくなって使ってみたので手順を書いてみました。 Google Playのクローズドベータ版テストについて Google Playで決まったユーザーのみにアプリをテストしてもらいたい場合、クローズドベータ版テストを使用することができます。 クローズドベータテストには以下の3種類がありますが、今回はメールアドレスを指定する方法でテストを公開してみます。 メールアドレスを指定して公開する Googleグループのユーザーに公開する Google+コミュニティのユーザーに公開する 前提条件 テスターのメールアドレスはGoogleアカウントまたはGoogle Appsアカウントであること テスト開始手順 テスターの設定 Google Play デベロッパーコンソール にログイン アプリを選択 左のメニューから[APK]を選択 タブの中央にある[ベータ版テスト]を選択 [クローズドベータ版テストを設定]を選択 [Create list]を選択 リスト名を入力(「〜事業部」や「〜チーム」など、リスト内のテスターがどのような人なのかを識別するための名前を入力する) メールアドレスを入力(以下の3通りのどれか) メールアドレスを1つずつ入力してカンマかエンターを押す カンマ区切りのメールアドレスをコピペしてエンターを押す CSVファイルをアップロードする [保存]を押す 公開したいリストにチェックを入れる 右上の[更新を送信]を押す (製品版の公開と同じく即時公開はされないため、公開されるまで少し時間がかかる) 青い枠で囲われているオプトインURLをテスターに共有する 公開したベータ版をそのまま製品版に移行するには[製品版にプロモート]を押すことで、簡単に移行できます。 APKを公開する Google Play デベロッパーコンソール にログイン アプリを選択 左のメニューから[APK]を選択 タブの中央にある[ベータ版テスト]を選択 [ベータ版に新しいAPKをアップロード]を選択 APKファイルを選択 [このバージョンの新機能]を記載...
続きを読む