現役プログラマのプログラミング教室@岡崎市康生, Android/iOS(Swift/Kotlin)のアプリ開発、デジタル漫画制作を主軸事業としています。

Kotlin Material(マテリアル) Button Tips-角丸/アイコンテキスト/枠線/Tintカラー/行間/文字間/autoSize/リップル

thema.xmlにマテリアルコンポーネントを設定すると、全体のButtonがマテリアル仕様となり便利です。

ただし便利な反面、従来の色の指定とは異なることに注意が必要です。

<style name="Theme.MaterialDayNight" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

よく使うけど忘れるので、マテリアルボタンのTipsメモ。

すべてを設定するとこんなボタンが簡単に作成できます。

ImageButtonでなくButtonクラスです。

ボタンの設定TIPS

オートサイズ

もっともよく使われるのかなと思います。

スマホ端末によってフレキシブルに対応するにはボタンのテキストサイズを可変にする必要があります。そういったときに設定します。

 android:autoSizeMaxTextSize="20dp"
 android:autoSizeMinTextSize="5dp"
 android:autoSizeTextType="uniform"
 android:textSize="20sp"

色指定

マテリアルボタンではtintカラーで指定します。

逆にtintカラーを使いたくない場合はtintカラーを使わない設定にする必要があります。

 android:backgroundTint="@android:color/white"

文字間隔

文字と文字との間隔を調整します。

狭くしたい場合はマイナスを使います。

 android:letterSpacing="-0.1"

行間隔

行の間のスペースを調整できます。

 android:lineSpacingMultiplier="0.7"

アイコン+テキストを表示

テキストの横にアイコンを表示します。Gravityでtopに表示も可能です。iconSizeにautoが使えないのだけが難点。

 app:icon="@drawable/ic_launcher_foreground"
 app:iconGravity="textStart"
 app:iconPadding="4dp"
 app:iconSize="80dp"
 app:iconTint="@android:color/holo_blue_dark"

角丸でなく左右を丸形にする

themes.xmlかstyle.xmlに以下を作成

    <style name="CircleRoundShapeOverlay">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

shapeAppearanceOverlayでそのスタイルを呼び出します。

 app:shapeAppearanceOverlay="@style/CircleRoundShapeOverlay"

角丸のサイズをデフォルトから変更したい

単純にradiusで指定すればOK

 app:cornerRadius="16dp"

押下したときのブリンクする色リップルカラーを設定

app:rippleColor="@android:color/holo_blue_bright"