textSelectHandleを変更してみた

Gingerbreadからか出るようになった、語句を選択するときに出るハンドル？スライダー？カーソル？何とよぶのかわからないですが、あのブツの見た目がちょっとあきてきたので変えてみたメモです。

手順

画像は３つからなります。それぞれ新しい画像を用意してdrawableフォルダに配置します。

new_text_select_handle_left.png
new_text_select_handle_right.png
new_text_select_handle_middle.png

以下のようなstyles.xmlを作成します。Android標準のThemeを継承したカスタマイズテーマMyThemeを作ります。

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="Theme.MyTheme" parent="android:Theme">
		<item name="android:textSelectHandleLeft">@drawable/new_text_select_handle_left</item>
		<item name="android:textSelectHandleRight">@drawable/new_text_select_handle_right</item>
		<item name="android:textSelectHandle">@drawable/new_text_select_handle_middle</item>
	</style>
</resources>

AndroidManifest.xmlのタグの要素として以下を追加。application通してMyThemeを使うことを設定します。

android:theme="@style/Theme.MyTheme"

以上です。Android標準UIのカスタマイズって今までやったことなかったけどとっても簡単だったのでびっくりしました。

おまけ

上記の画像では、語句選択のときのハイライトの色とフォーカスがあたったときのEditTextも枠の色も変えています。styles.xmlを以下のように変更します。追加するのは２カ所です。ハイライトは先ほどのMyThemeにtextColorHighlightを設定し、標準のThemeの設定を上書きします。EditTextの色は、Android標準のstyleであるWidget.EditTextを継承して新しくMyEditTextを作成し、background設定を上書きします。

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="Theme.MyTheme" parent="android:Theme">
		<item name="android:textSelectHandleLeft">@drawable/new_text_select_handle_left</item>
		<item name="android:textSelectHandleRight">@drawable/new_text_select_handle_right</item>
		<item name="android:textSelectHandle">@drawable/new_text_select_handle_middle</item>
		<item name="android:textColorHighlight">#FF00a6ff</item>
		<item name="android:editTextStyle">@style/MyEditText</item>
	</style>
	<style name="MyEditText" parent="android:style/Widget.EditText">
		<item name="android:background">@drawable/new_edit_text</item>
	</style>
</resources>

EditTextの背景の設定は、new_edit_text.xmlというファイルをdrawableに作成し、その中で行います。今回はフォーカスがあたってる時の背景のみを設定してみます。他にも設定項目できる項目はたくさんあります。必要に応じて変えてみてください。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_enabled="true" android:state_focused="true"
		android:drawable="@drawable/new_textfield_selected" />
</selector>

さらにおまけ

んでもって、画像を変えて、こんなことして遊んでみました。かわいいす。