
目次
背景
こんにちは。 かりんとうマニア(@karintozuki)です。
Android開発でデフォルトのボタンを使うとこんな感じです。
ちょっとダサいですよね。

今回はこんな感じのボタンの作り方を紹介します。

それに加えてこんな感じでボーダーのみの場合も紹介します。

角が丸いボタン
androidのボタンには角の丸みといったプロパティが存在しないので
バックグラウンド画像に角丸の画像を指定することで実現します。
ちょっとめんどくさいですね笑
背景画像の作成
プロジェクトからapp > res > drawable
を右クリックして、New > Drawable Resource File
を実行します。

適当な名前を付けましょう。
ここではbtn_roundとしました。

ファイルの中身はこんな感じです。
1 |
|
セレクタを使うことで状態によって色を変えています。
名前 | 説明 |
---|---|
state_enabled | =falseで、ボタンがdisableの時の状態を指します。今回はグレーアウトするようにしました。 |
state_pressed | ボタンが押された時の状態です。 |
state_focused | ボタンがフォーカスされている時です。 |
state_focusedについてですが、キーボードやトラックデバイスを使用した時はボタンにフォーカスを当てることができます。
android studioのデバイスエミュレータを使っていれば、タブキーなどを使ってボタンにフォーカスできます。
stateを付けていない最後のitemがデフォルトの状態になります。
ボタンプロパティの変更
見た目を変更したいボタンのbackgroundプロパティに
先ほど作成した画像を指定してあげます。android:background="@drawable/btn_round"
他にもテキストの色を白にしたり、ボタンの高さを調整したりする(minHeightプロパティ)と
最終的にこんな感じになります。
1 | <Button |
ボーダーの場合
次はこんな感じの枠線だけのボタンを作ってみます。

先ほどとほぼ流れは同じですが、今回はボタン押下時に文字色を変える必要があります。
下の画像のように押された時は青→白に文字色を変えるため、
文字の色用にdrawableをもう一つ作成します。

背景画像の作成
先ほどと同じように画像を作ります。
中身はこんな感じです
名前はbtn_round_border.xmlとしました。
1 |
|
strokeプロパティを指定することでボーダーを表現できます。
state_focusedとstate_pressedの際は
青と白を逆転するためshapeを描画するようにしています。
文字色の作成
文字もボタンの状態によって色を変えなければいけません。
文字色用の新しいdrawableを作成します。
ファイル名はbutton_stroke_text_color.xmlとしました。
1 |
|
ボタンプロパティの変更
それではボタンにこれらを適用しましょう。
1 | <Button |
ボーダーのボタンが表示できたでしょうか。
まとめ
androidではボタンの見た目を変えるのも一苦労ですね。。。
HTMLみたいにCSSで一発で変えられるようなシステムにならないもんでしょうか。
とはいえ、ボタンを変えるだけでだいぶそれっぽい見た目になるので、
ぜひ試してみてください。
それじゃ今日はこの辺で。
関連記事
こちらの記事もおすすめです。
アプリ未経験エンジニアが独学で個人開発Androidアプリを公開するまでにやったこと
PR
あなたの会社はあなたの技術を評価してくれていますか?
技術力を高めようと頑張っているのに、
技術が評価されないような会社にいたらそれは良い環境なのでしょうか?
エンジニアとして技術を高めたいのなら環境を選ぶことも大事です。
レバテックキャリア
エンジニアとして働いていて実務経験があるなら、
求人数の充実具合からレバテックキャリアがおすすめです。
IT転職ではデファクト・スタンダードですね。
▼レバテック キャリア 登録はこちら▼
Tech Clips
Tech Clipsは年収500万以上&自社サービスを持った会社に特化した求人サイトです。
首都圏限定になってはしまいますが、
収入を増やしたい、自社サービスを持った企業への転職をしたい人におすすめです。