Blog スタッフブログ

Android システム開発

[Android][Kotlin]ボタンカスタマイズ

システム開発担当のTFです。

※Android10対応（他バージョンの場合、細かい部分等が異なる事があります）

やり方

  • 状態に合わせたボタンのデザインを記述した、xmlを作成する
  • 作成したxmlをButtonのbackgroundに当てる
  • ButtonのbackgroundTintをnullにする

参考

　　【Android】Buttonのデザインを変更する【Java/Kotlin】
　　[Android] shapeを使ってカスタムボタン作成
　　Android　UI基本 Buttonをカスタマイズする
　　Android ボタンにxmlファイルのデザイン内容が反映されない時の対処（マテリアルデザインの無効）

サンプル

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ボタン押下時 -->
	<item android:state_pressed="true">
		<!-- 矩形 -->
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:dither="true"
            android:shape="rectangle">
			<!-- 角丸 -->
            <corners android:radius="4dp" />
			<!-- 塗りつぶし色 -->
            <solid android:color="@color/green_pressed_background" />
        </shape>
    </item>
	<!-- ボタンを押していない時 -->
    <item android:state_pressed="false">
        <!-- 矩形 -->
		<shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:dither="true"
            android:shape="rectangle">
			<!-- 角丸 -->
            <corners android:radius="4dp" />
			<!-- 塗りつぶし色 -->
            <solid android:color="@color/green_background" />
        </shape>
    </item>
</selector>
<!-- ボタンに作成したデザインを当てる -->
<Button
	android:layout_width="100dp"
	android:layout_height="50dp"
	android:background="@drawable/custom_button"
	android:text="ボタン"
	app:backgroundTint="@null"
	/>
戻る一覧へ戻る