skip to content
私的歌詞倉庫

AndroidのButtonにdrawableXXXで表示したアイコンの位置をずらす方法

/ 5 min read

Updated:
View more blogs with the tag android
Table of Contents

はじめに

最近 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" />

すると、アイコンの位置が少しだけ中央に寄ります。

paddingEnd

paddingEnd

ただしこれだと、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" />
paddingStart と paddingEnd

paddingStart と paddingEnd

最後にそれぞれのスクショを比較します。

![特に指定をしない](./img/android_button_default 1.png)

特に指定をしない

![paddingEnd](./img/android13_paddingend 1.png)

paddingEnd

![paddingStart と paddingEnd](./img/android13_paddingstart_end 1.png)

paddingStart と paddingEnd

最後に

今回は、Button のdrawableXXX属性で指定したアイコンをいい感じの位置に変更する方法について書きました。なかなかすぐには思いつきませんでした…独自で style を作ったりしないと、ダメなのかな〜など悩みましたがものすごく簡単でした。今後も忘れないようにしたいと思います。

この記事の趣旨とは外れますが、drawableStartやdrawableEndは、drawableRightやdrawableLeftなどもあってこれの違いは何だろう〜と思ったのですが、RTLやLTRという考えのもとみたいでした。英語は基本的に左から右に読みますが、アラビア語などは右から左に読みます。このような文化の違いをサポートするために Start や End で指定すると理解しました。そのため Android を、アラビア語表示にすると今回の例だとアイコンとテキストの位置がそれぞれ入れ替わったりするのかなと思いました。なんとなくで使っていましたが、深く知ることができ良かったです。

参考サイト