【Android】画面コンポーネント / Button

Android

■ はじめに

今更だが、ボタンに関して、メモっとく。

目次

【１】ボタンイベントを処理するには
【２】ボタンに画像アイコンを表示する
【３】丸ボタン作成

【１】ボタンイベントを処理するには

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2013/09/25/002349

【２】ボタンに画像アイコンを表示する

* 「drawableXxxxx」で指定
# プロパティ 説明
1 android:drawableLeft テキスト(左側)に画像を設定
2 android:drawableRight テキスト(右側)に画像を設定
3 android:drawableTop テキスト(上側)に画像を設定
4 android:drawableBottom テキスト(下側)に画像を設定
5 android:drawableStart テキスト(先頭)に画像を設定
6 android:drawableEnd テキスト(末尾)に画像を設定

参考文献
https://www.programing-style.com/android/android-api/android-image-text-button/

【３】丸ボタン作成

手順 

[1] [app]-[res]-[drawable] を右クリックして、[New]-[Drawable Resource File] を選択し
　任意のファイル名（今回は「round_button.xml」）を入力し、
　「OK」ボタン押下
[2] [1] のファイルを以下の「」を参考に修正
[3] 対象画面（今回は「hello_world.xml」）にボタンを追加
[4] [3]のボタンのプロパティ「background」に[2]のファイルを適用し、
　以下の「hello_world.xml」を参考にプロパティを調整する

round_button.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#e67e22" />
            <corners android:radius="64dip" />
        </shape>
    </item>
</selector>

hello_world.xml 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_constraintStart_toStartOf="parent"
        android:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/round_button"
        android:text="SUN"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

アニメーション効果をつけるには

* 以下のサイトを参考に作成してみた

https://pisuke-code.com/android-round-button-with-anime/
round_button.xml (アニメーション効果付) 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:bottom="1dp" android:top="1dp"
                        android:right="1dp" android:left="1dp"/>
                    <corners android:radius="64dip" />
                    <solid android:color="#00000000" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#e67e22" />
                    <corners android:radius="64dip" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <padding
                        android:bottom="-1dp" android:top="-1dp"
                        android:right="-1dp" android:left="-1dp"/>
                    <corners android:radius="64dip" />
                    <solid android:color="#00000000" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#e6b222" />
                    <corners android:radius="64dip" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

参考文献
http://android-note.open-memo.net/sub/button__make_round_shape_button.html

関連記事

レイアウト ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2015/08/23/165632
ボタンイベントを処理するには
https://dk521123.hatenablog.com/entry/2013/09/25/002349