LoginSignup
10
2

More than 5 years have passed since last update.

EditTextのthemeを設定したらhandle部分に謎の下線が出てきたときの対処法

Posted at

こんにちは。
今回は、下の画像のような状況に陥ってしまった場合の対処法をまとめます。

貼り付けた画像_H28_09_27_2_21.png

状況

さて、AndroidのEditTextは独自のTheme設定を適用することができます。
具体的にはこの記事( http://qiita.com/konifar/items/47d467e3574c9228fdc8 )がすごくよくまとまってるので見てもらえればと思うのですが、これをやろうと思ったときに上の画像のような状況が発生しました。

具体的なレイアウトやstyleは以下のようになっています。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditTextTheme" />

</RelativeLayout>
styles.xml
<resources>

    <style name="EditTextTheme" parent="Widget.AppCompat.EditText">
        <item name="colorControlActivated">#ffa600</item>
    </style>

</resources>

いらないところは省きました。
やってることはとても単純です。EditTextに対して、android:theme="@style/EditTextTheme"として、styles.xmlで定義した独自のスタイルを設定しているだけです。

これだけで、なぜかhandle部分に謎の下線が生まれました。謎だ……
どうでもいいですが、あの持ち手text selection handleって言うんですね。これを調べてて唯一「へぇ」って思えた出来事でした。

調査してみた結果

最初はずっと、colorControlActivatedを設定したせいで発生したものかと思っていたのですが、どうやら色々と調べてみるとそうでもないらしいことが分かりました。
ちなみにGoogleで結構調べていたのですが、それらしいものは一つしか見つかりませんでした。
http://stackoverflow.com/questions/37588019/edittext-with-custom-theme-shows-underline-under-selection-handle

発生件数が少ないんですかね…同じような状況になった人募集中です。
とにかく、原因が全然わからなかったし、EditTextのソースを読む気にもなれなかったので、自分で色々と試行錯誤して見た結果、次のことが分かりました。

  • API 23の端末で再現
    • API 22以下の端末では再現しなかった(handle部分に下線が表示されなかった)
  • styleに parent="Widget.AppCompat.EditText"parent="android:Widget.EditText" と書いている
    • これは、親styleをEditTextのものに設定している一般的な書き方です(ググったら大半はこれでやってます)

上記の2点を満たしたときに、謎の下線が出てきてしまう、という状況が発生しました。
なるほど。アプリ全体のThemeを定義する際などは、parentにTheme.AppCompat.Lightとか書きますもんね。どうりで発生する件数が少ないわけです。

解決策

styleのparent指定を外しましょう。

styles.xml
<resources>

    <style name="EditTextTheme">
        <item name="colorControlActivated">#ffa600</item>
    </style>

</resources>

これだけです。

device-2016-09-27-024401.png

やったー!!下線が消えたぞ!!!
見つけたときは、本当に偶然にparentを消してみただけだったのですが、まさか上手くいくとは思わず何度も外したり戻したりを繰り返してました笑

終わりに(考察)

よく分からないですが、たぶん、API 23のバグです(雑)
根本原因はいまだに分かっていません。詳しい方はコメント等で補足頂けると幸いです。

10
2
1

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
10
2