AndroidのButtonにdrawableXXXで表示したアイコンの位置をずらす方法
2022-10-07
はじめに
最近 Android の開発自体は業務でもやっているのですが、基本的に UI は触らずに、Java や Kotlin のコードを置き換えることがほとんどです。しかし、久しぶりにデザイナーさんからいただいた UI を、XML（呼び出し側が Java だったので Compose を使えませんでした）で作成しているときに、Button にdrawableEndで表示したアイコンをもう少しだけ中央に寄せたいな〜ということがありました。意外と、どうやればいいんだろう〜と悩んだので忘れないうちに書いておきたいと思います。
今回は、compileSdk と targetSdk を 33（Android13）で、エミュレータも API レベル 33（Android13）で検証します。検 証に使ったコードはこちらのリポジトリにアップしています。
paddingXXX を使う
簡単です。padding を使うだけでした。
まずは例として、Button にdrawableEndを使ってアイコンを表示するだけのコードとそれを端末上で見た時のスクショです。
<Button
android:text="Button"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/button"
android:drawableEnd="@drawable/ic_baseline_keyboard_arrow_right_24" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />この時の画面上での見え方は以下のとおりです。
アイコンを中央に寄せたい場合は、paddingEndを指定します。
<Button
android:text="Button"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/button"
android:paddingEnd="40dp" android:drawableEnd="@drawable/ic_baseline_keyboard_arrow_right_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />すると、アイコンの位置が少しだけ中央に寄ります。
ただしこれだと、pddingEndを指定した影響で、Button のテキストが少し左に寄りすぎになります。テキストを中央に寄せたい場合は、paddingStartを使うことで、テキストを中央寄せにすることができます。paddingEndと併用することで、いい感じにテキスト、アイコンを中央寄せで表示することができました。
<Button
android:text="Button"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/button"
android:paddingEnd="40dp"
android:paddingStart="40dp" android:drawableEnd="@drawable/ic_baseline_keyboard_arrow_right_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
最後にそれぞれのスクショを比較します。
| 特に指定をしない | paddingEnd | paddingStart と paddingEnd |
|---|---|---|
|
|
|
|
最後に
今回は、Button のdrawableXXX属性で指定したアイコンをいい感じの位置に変更する方法について書きました。なかなかすぐには思いつきませんでした…独自で style を作ったりしないと、ダメなのかな〜など悩みましたがものすごく簡単でした。今後も忘れないようにしたいと思います。
この記事の趣旨とは外れますが、drawableStartやdrawableEndは、drawableRightやdrawableLeftなどもあってこれの違いは何だろう〜と思ったのですが、RTLやLTRという考えのもとみたいでした。英語は基本的に左から右に読みますが、アラビア語などは右から左に読みます。このような文化の違いをサポートするために Start や End で指定すると理解しました。そのため Android を、アラビア語表示にすると今回の例だとアイコンとテキストの位置がそれぞれ入れ替わったりするのかなと思いました。なんとなくで使っていましたが、深く知ることができ良かったです。