Be simple

”当たり前”が誰かのためになる

Buttonの基礎

はじめに

今回は、Androidの開発におけるButtonの基礎についてこれだけは知っておいたほうがいいのでは、と個人的に思っていることをメモとして残していきます。

 

 

Buttonとは?

多くのアプリケーションで目にしたことがあると思います。タップしたり、クリックすることができるViewです。

ボタンです。そう、ボタンです。

 

例として次の画像の画面右側に配置してあるViewのことです。

 

f:id:rozkey59:20181222165040p:plain

Button

公式のリンクはこちらです。詳しくみたい方は参照してください。

でも、ちゃんと戻ってきてくれると嬉しいです。

Button  |  Android Developers

 

 

実際にやりながら、確認していきましょう。

 

Buttonをまずは実際にはじめてみる

最初にレイアウトから作っていきましょう。

app > res > layoutにて新しいxmlファイルを用意してください。

自分の場合は、activity_main.xmlを用意しました。

 

自前で用意した、xmlファイルの中で次のように記述します。

<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="クリックしてください"
android:textSize="@dimen/text2"
/>

TextViewと同じく、android:textではButton上に表示させたい文字列を指定します。

直指定するよりは、stringリソースの中で指定したものを取ってきたほうが良いと思いますが、今回は直指定してます。

android:textSizeはButton上に表示させたい文字の大きさを指定しています。

 

これが終わったら、Activityのクラスを作成し、このButtonの処理を記述する部分を書いていきましょう。

Activityを新しく、作成してください。自分の場合は、MainActivity.ktを作成しました。

今回は、簡単にButtonをクリックした際にトーストを表示する処理について書いていきます。次のコードをActivityのonCreateにて記載してください。

 

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val button = findViewById<Button>(R.id.button)
button.setOnClickListener {
Toast.makeText(this, "クリックされました", Toast.LENGTH_SHORT).show()
}
}
}

 

Buttonをid指定で取得して、ClickListenerにToastを表示する処理を書きます。

実際に動かした結果が次のようになります。

f:id:rozkey59:20181222170850g:plain

クリック処理

 

ここまでが、基本的な処理になります。

ここから、もう少しカスタマイズしていきましょう。

 

Buttonのデザインを変える

Buttonのデザインが今のままだと味気ないので、デザインを変えていきましょう。

Buttonの背景色を変えて、角丸のボタンに変えていきたいと思います。

まずはじめに、Buttonの背景用のdrawableを作成していきましょう。

次の画像のように、app > res > drawableにて右クリックを押してください。

f:id:rozkey59:20181222171454p:plain

 

クリックすると次のような画面が出ると思います。

New > Drawable resource fileを選択して下さい。赤い矢印の部分です。

そこで、好きな名前をつけて、Enterキーを押すことで作成できます。

今回は、自分はbackground_button.xmlとしました。

f:id:rozkey59:20181222171645p:plain


作成したxmlファイルの中で次のように記述して下さい。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_green_light" />
<corners android:radius="16dp" />
</shape>

shapeタグの中で、図形の形を決めます。

android:shapeには、rectangle / oval / line / ringがありますが、今回は角丸を作成したいのでrectangleを選びます。

どういう図形にしたいかによって変わってくるので、詳しく知りたい方は次のリンクを参照して下さい。

developer.android.com

 

solidタグの中で、どの色にするかを設定します。これが図形を埋める色になります。

cornerタグの中では、android:radiusで角の丸みをどれくらいつけるかを設定できます。

今回は16dpで設定しました。

この作成したdrawableをButtonに設定してデザインを変更してみましょう。

次のように記載します。

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="クリックしてください"
android:textSize="@dimen/text2"
android:background="@drawable/background_button"
/>

android:backgroundにて自前で用意したxmlファイルを指定して下さい。

これを実行した結果が次のようになります。

f:id:rozkey59:20181222172804p:plain

デザイン変更結果

背景色付きの角丸のButtonに変更することができました。

次は、もう少しリッチな感じのButtonにしていきましょう。

 

はじめに、Buttonのテキストの左隣にアイコンをつけます。

アイコンをつけるには、次のように指定します。

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="クリックしてください"
android:textSize="@dimen/text2"
android:drawableLeft="@drawable/ic_android"
android:drawableTint="@android:color/white"
android:background="@drawable/background_button"
/>

ButtonはTextViewを継承しているので、android:drawableLeftにてアイコンを指定できます。

ここで指定しているic_androidは元々の画像が緑色だったので、アイコンの色を変更するべく、drawableTintにて白色を指定しました。drawableTintを利用できるのはAPI level 23以上の端末のみしか利用できないので注意して下さい。

 

これを実行した結果が次のとおりです。

f:id:rozkey59:20181222173414p:plain

このままだと、アイコンとTextがかなり離れているので、次のように変更して下さい。

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="クリックしてください"
android:textSize="@dimen/text2"
android:padding="16dp"
android:drawableLeft="@drawable/ic_android"
android:drawableTint="@android:color/white"
android:background="@drawable/background_button"
/>

 

android:layout_widthをwrap_contentにして、paddingを入れます。

こうすることで任意の幅のButtonを作成することができます。

実行した結果が次のようになります。

 

f:id:rozkey59:20181222174610p:plain

幅修正後の画面

まだ、これだとアイコンとテキストの間が狭く見えるので 次のコードを追加しましょう。

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="クリックしてください"
android:textSize="@dimen/text2"
android:padding="16dp"
android:drawableLeft="@drawable/ic_android"
android:drawableTint="@android:color/white"
android:drawablePadding="16dp"
android:background="@drawable/background_button"
/>

android:drawablePaddingでアイコンとテキストの間のマージンを整えることができます。

実際に実行した結果が次のようになります。

f:id:rozkey59:20181222174900p:plain

アイコンとテキストのマージン修正後

だいぶ、よくなってきましたね。

次は、Buttonにグラデーションをかけていきましょう。

 少し先に作った、Buttonの背景色や形状を決めているdrawableのresources、自分の場合はbackground_buttonのxmlファイルの中を次のように変更しました。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="16dp" />
<gradient
android:startColor="#AED581"
android:endColor="#8BC34A"
/>
</shape>

グラデーションをボタンにかけたい場合には、gradientタグの中で、startColorとendColorを指定します。

自分は緑色が好きなので、マテリアルデザインのカラーからstartColorを300にendColorを500に指定しました。

 

マテリアルデザインのカラーは次のリンクから見れるので、カラーの指定に悩んだ場合は参考にすると良いです。自分も個人開発の場合には、よく参考にさせてもらっています。

material.io

 ついでに、Buttonのテキストのカラーを白色にして、スタイルをboldにしました。

ここは、TextViewのところでも話しているので割愛します。

 

ここまでで、実際に実行してみた結果が次のようになります。

f:id:rozkey59:20181222175931p:plain

グラデーション適用後

だいぶリッチになりましたね。

ただ、このままだとボタンを押した時に押した感じがないままで終わってしまいます。

まずはselecterを用いて、押した感じを表現していきましょう。

また、background_buttonのxmlファイルの中をいじって次のように変更しました。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true">
<shape
android:shape="rectangle">
<corners android:radius="16dp" />
<gradient
android:startColor="#9CCC65"
android:endColor="#7CB342"
/>
</shape>
</item>
<item
android:state_pressed="false">
<shape
android:shape="rectangle">
<corners android:radius="16dp" />
<gradient
android:startColor="#AED581"
android:endColor="#8BC34A"
/>
</shape>
</item>
</selector>

 

selecterタグの中でitemタグを用意し、state_pressedで押した状態によって出し分けることができます。押した感じを出すために、デフォルトはfalseにおいておき、falseの場合より若干暗めの色を選択することで、押した感じを表現することができます。

 

実際に動かしてみたのが次のようになります。

f:id:rozkey59:20181222181258g:plain

selecterで実装した際の画面

このやり方もありますが、ボタンを押した感じを表現するにはRipple Effectを利用するのがより良いでしょう。

 

Ripple Effectとは、タップした時に波紋状に状態の変化を表すことができます。

次のリンクから、詳細について確認できます。

RippleDrawable  |  Android Developers

 

実際にやっていきましょう。

先ほどと同じようにbackground_button.xmlの中で、次のように変更します。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#7CB342">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="16dp" />
<gradient
android:startColor="#AED581"
android:endColor="#8BC34A"
/>
</shape>
</item>
</ripple>

 

rippleタグはminSDKVersionが21以上でないと利用できません。

rippleで指定する、android:colorは波紋状に広がる色を指定します。

今回は、Buttonで指定している緑色より濃い色を指定しました。

rippleタグの中にitemタグを使用して、先ほどまで作成していたグラデーションの部分をそのまま移しました。

これで、Ripple Effectを利用することができます。

実際に動かしてみた結果が次のとおりです。

f:id:rozkey59:20181222183236g:plain

Ripple Effect追加後の画面

クリックした部分から波紋状に広がることで押されたことがわかるようになりました。

ここまでで、個人的に思うButtonの基礎はおわりです。

何か足りてないことがあったり、間違いがあればコメントでご指摘いただけると幸いです。

 

おわりに

今回は、個人的に考えているButtonの基礎について解説しました。

今後、これも必要だなーと感じるものがあれば随時更新していこうと思います。

最後まで見ていただきありがとうございました。