2020-12-27

技術

androidで角が丸いボタンを作る方法

背景

こんにちは。かりんとうマニア(@karintozuki)です。
Android開発でデフォルトのボタンを使うとこんな感じです。
ちょっとダサいですよね。

今回はこんな感じのボタンの作り方を紹介します。

それに加えてこんな感じでボーダーのみの場合も紹介します。

角が丸いボタン

androidのボタンには角の丸みといったプロパティが存在しないので
バックグラウンド画像に角丸の画像を指定することで実現します。

ちょっとめんどくさいですね笑

背景画像の作成

プロジェクトから
app > res > drawableを右クリックして、
New > Drawable Resource Fileを実行します。

適当な名前を付けましょう。
ここではbtn_roundとしました。

ファイルの中身はこんな感じです。

btn_round.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle"  >
            <corners android:radius="20dp" />
            <solid android:color="#B5B5B5"/>
        </shape>
    </item>
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="20dp" />
            <solid android:color="#2572E5"/>
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="20dp" />
            <solid android:color="#2572E5"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <solid android:color="#3987FD"/>
            <corners android:radius="20dp" />
        </shape>
    </item>
</selector>

セレクタを使うことで状態によって色を変えています。

名前	説明
state_enabled	=falseで、ボタンがdisableの時の状態を指します。今回はグレーアウトするようにしました。
state_pressed	ボタンが押された時の状態です。
state_focused	ボタンがフォーカスされている時です。

state_focusedについてですが、キーボードやトラックデバイスを使用した時はボタンにフォーカスを当てることができます。
android studioのデバイスエミュレータを使っていれば、タブキーなどを使ってボタンにフォーカスできます。

stateを付けていない最後のitemがデフォルトの状態になります。

ボタンプロパティの変更

見た目を変更したいボタンのbackgroundプロパティに
先ほど作成した画像を指定してあげます。
android:background="@drawable/btn_round"

他にもテキストの色を白にしたり、ボタンの高さを調整したりする(minHeightプロパティ)と
最終的にこんな感じになります。

sample_button.xml

<Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_round"
            android:minHeight="0dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Button"
            android:textColor="#FFFFFF" />

ボーダーの場合

次はこんな感じの枠線だけのボタンを作ってみます。

先ほどとほぼ流れは同じですが、今回はボタン押下時に文字色を変える必要があります。
下の画像のように押された時は青→白に文字色を変えるため、
文字の色用にdrawableをもう一つ作成します。

背景画像の作成

先ほどと同じように画像を作ります。
中身はこんな感じです
名前はbtn_round_border.xmlとしました。

btn_round_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false">
            <shape android:shape="rectangle"  >
                <corners android:radius="20dp" />
                <solid android:color="#B5B5B5"/>
            </shape>
        </item>
        <item android:state_pressed="true" >
            <shape android:shape="rectangle"  >
                <corners android:radius="20dp" />
                <solid android:width="1dp" android:color="#2572E5"/>
            </shape>
        </item>
        <item android:state_focused="true">
            <shape android:shape="rectangle"  >
                <corners android:radius="20dp" />
                <solid android:width="1dp" android:color="#2572E5"/>
            </shape>
        </item>
        <item >
            <shape android:shape="rectangle"  >
                <stroke android:width="1dp" android:color="#2572E5"/>
                <corners android:radius="20dp" />
            </shape>
        </item>
</selector>

strokeプロパティを指定することでボーダーを表現できます。
state_focusedとstate_pressedの際は
青と白を逆転するためshapeを描画するようにしています。

文字色の作成

文字もボタンの状態によって色を変えなければいけません。
文字色用の新しいdrawableを作成します。

ファイル名はbutton_stroke_text_color.xmlとしました。

button_stroke_text_color.xml

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

    <item
        android:state_focused="true"
        android:color="#ffffff" />

    <item
        android:state_pressed="true"
        android:color="#ffffff" />

    <item android:color="#2572E5" />

</selector>

ボタンプロパティの変更

それではボタンにこれらを適用しましょう。

sample_button.xml

<Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_round_border"
            android:minHeight="0dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="Button"
            android:textColor="@drawable/button_stroke_text_color"
	/>

ボーダーのボタンが表示できたでしょうか。

まとめ

androidではボタンの見た目を変えるのも一苦労ですね。。。
HTMLみたいにCSSで一発で変えられるようなシステムにならないもんでしょうか。

とはいえ、ボタンを変えるだけでだいぶそれっぽい見た目になるので、
ぜひ試してみてください。

それじゃ今日はこの辺で。

PR

あなたの会社はあなたの技術を評価してくれていますか？
技術力を高めようと頑張っているのに、
技術が評価されないような会社にいたらそれは良い環境なのでしょうか？
エンジニアとして技術を高めたいのなら環境を選ぶことも大事です。

レバテックキャリア
エンジニアとして働いていて実務経験があるなら、
求人数の充実具合からレバテックキャリアがおすすめです。
IT転職ではデファクト・スタンダードですね。
▼レバテック　キャリア登録はこちら▼

Tech Clips
Tech Clipsは年収500万以上＆自社サービスを持った会社に特化した求人サイトです。
首都圏限定になってはしまいますが、
収入を増やしたい、自社サービスを持った企業への転職をしたい人におすすめです。

▼Tech Clips 登録はこちら▼

寝室コンピューティング

androidで角が丸いボタンを作る方法

目次

背景

角が丸いボタン

背景画像の作成

ボタンプロパティの変更

ボーダーの場合

背景画像の作成

文字色の作成

ボタンプロパティの変更

まとめ

関連記事

PR