最近 Android の開発ネタばかりで申し訳ありません…が、今日も性懲りもなく Android について!
今回は、ボタンのデザインを変更する方法です。
デフォルトのデザインって、グレーに角ばった形をしていて、かなり味気ないというか素っ気ないデザインなので、これを変更していきます。
参考にさせていただいたサイトはこちら。
Android UI基本 Buttonをカスタマイズする
http://tech.pjin.jp/blog/2016/02/09/android ui基本-buttonをカスタマイズする/
さて、今回のコードで作成できるボタンのデザインは下記の2つです。
まず、ボタンのデザインを指定するxmlファイルを、drawable フォルダ以下に作成します。
左側の、背景色が水色の丸角ボタンのコードはこちら。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#4cb4fa"/> <corners android:radius="8dp"/> </shape>
ファイル名は、entry_button.xml としています。
右側の、背景色が白色で枠線が水色の丸角ボタンのコードはこちら。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#FFF"/> <corners android:radius="8dp"/> <stroke android:color="#4cb4fa" android:width="1dp"/> </shape>
こちらのファイル名は、entry_button_noactive.xml としました。
で、ボタン自体は下記のように指定します。
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="#FFF"> <Button android:layout_width="0dp" android:layout_height="35dp" android:layout_weight="1" android:text="公開" android:textColor="#FFF" android:background="@drawable/entry_button" android:layout_margin="3dp"/> <Button android:layout_width="0dp" android:layout_height="35dp" android:layout_weight="1" android:text="下書き" android:background="@drawable/entry_button_noactive" android:layout_margin="3dp"/> </LinearLayout>
重要なのは、12、19行目の android:background を指定している箇所です。
ここで、先程作成した xmlファイルを指定すると、xmlファイルに記述したデザインがボタンに反映されます。
レイアウトファイルがごちゃごちゃしないので、分かりやすくていいですね。
xmlファイルの記述については、ググれば色々出てくるので、難しくはないはず。
以上、ボタンのデザインの変更方法でした。
味気ないデフォルトのデザインや、背景色変えるだけよりも、ぐっとお洒落になるので、Androidアプリを開発している方は是非取り入れてみてはいかがでしょうか。