目的

Androidアプリで、角丸で枠線付きボタンを作成する時のプログラムメモ

実装

角丸で枠線付きボタン用のxmlファイル(例:circle_button.xml)を作成する。

角丸用xmlファイルについて

Android StudioのProjectナビゲーターより

app - res - drawable

でdrawableを右クリック後、

New - Drawable resource file

を選択する。

名前は上の通りcircle_buttonとした。

作られたcircle_button.xmlをクリックすると、デフォルトで以下の記載があるが。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

今回は全て削除。そして以下をコピペする。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#00ff00"/>

    <corners android:radius="40dp"/>

    <stroke
        android:width="10dp"
        android:color="#ff0000"
        />
</shape>

<corners android:radius="40dp"/>が角を丸くする値
<stroke android:width="10dp"...が枠線幅
角の大きさや枠線の太さ、色は適切に

xmlファイルの呼び出し方

例として、xmlレイアウトのButtonなどで以下のように呼び出した。

<Button
        //....

        android:layout_width="80dp"
        android:layout_height="80dp"

        android:background="@drawable/circle_button"

        //....

        "/>

円にしたい場合は
layout_width = layout_heightを同じにして。
android:radiusをlayout_widthの半分の値にする。

ちなみに

私が無知なのかもしれないが、
わざわざ丸ボタン用のxmlファイルを作らないといけないというのが面倒。

Android初心者です！

AndroidアプリUIデザイン＆プログラミング　アイデア固めからユーザーフィードバック分析まで

Amazonで見てみる!