duyojiぶろぐ

技術系ときどき日常系

簡単なオリジナルボタンの作り方

Android

Androidでボタンを使いたいときデフォルトのボタンを使うと背景が灰色で色を変えようと思って

android:background="#f00"

上のような感じで赤にしようとしても思った通りのボタンができないのではないだろうか。しかもボタンを押しても反応が見られない。
この時にどうすればいいのか色々ググってたら簡単な方法で丸みを出したり、背景の色にグラデーションをかけたり、ボタンが押されたときの挙動も設定することができることがわかった。
やり方は「res」フォルダの中のdrawableフォルダの中にボタンの背景に使うxmlファイルを作ればいい。
やり方は以下の通り

res/drawable/original_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- ボタンが押されている -->
	<item android:state_pressed="true"
		android:state_focused="false">
		<layer-list>
			<item>
				<shape 
					xmlns:android="http://schemas.android.com/apk/res/android"
					android:shape="rectangle">
					<gradient 
					android:angle="270"
					android:startColor="#00E000"
					android:centerColor="#00C100" 
					android:endColor="#00FF00"
					android:type="linear" />
				<corners 
					android:radius="2dip" />
				<stroke 
					android:width="0.75dip" 
					android:color="#000000"/>
			    </shape>
			</item>
		</layer-list>
	</item>	
	<!-- ボタンが押されていない -->	
	<item android:state_pressed="false"
		android:state_focused="false">
		<layer-list>
			<item>
				<shape 
					xmlns:android="http://schemas.android.com/apk/res/android"
					android:shape="rectangle">
					<gradient 
					android:angle="270"
					android:startColor="#00FF00"
					android:centerColor="#00C100" 
					android:endColor="#00E000"
					android:type="linear" />
				<corners 
					android:radius="2dip" />
				<stroke 
					android:width="0.5dip" 
					android:color="#000000"/>
			    </shape>
			</item>
		</layer-list>
	</item>
</selector>

コメントを見てもらえればわかると思うが

android:state_pressed

のところの値が「true」「false」でボタンを押しているのか押していないのか判断している。
layer-listタグの中ののitemタグの中をを見ると「shape」「corners」「stroke」の３つのタグがある。
それぞれ何をしているかというと

  • shape
    • angle・・・グラデーションをかける方向
    • startColor・・・グラデーションかけるときの始まりの色
    • centerColor・・・グラデーションかけるときの真ん中の色
    • endColor・・・グラデーションかけるときの終わりの色
    • type・・・これはちょっと調べてないのでわからないです
  • corners
    • radius・・・角を丸くする度合い
  • stroke
    • width・・・ボタンの外枠の太さ
    • color・・・ボタンの外枠の色


そしてボタンにこのファイルを背景として設定してあげるとオリジナルのボタンが出来る。

android:background="@drawable/original_button"

Javaファイルで設定してあげたい場合は

another_login_button.setImageResource(R.drawable.congratulation_twitter_button_selector);


これで完成。
しかもこれをするとボタンでなくともLinearLayoutなどのViewクラスならbackgroundで指定してclickableの属性を「true」にすればButtonでなくてもボタンになる。