asky

主にAndroidやiOSの開発について綴っています。また、使っている好きなアプリや全く関係のない話はDiaryで書いていきたいです。

Android:TextView・Button等に角丸や枠をつける

【環境】Android Studio 2.0

基本的な作成の流れ

TextViewやPlain TextView、Buttonなどに
角丸や枠線を付けたい時の基本的な流れは下図の通りです。



[1] drawableディレクトリ直下にxmlファイルを作成。

f:id:asky0113:20160504183245j:plain f:id:asky0113:20160504183428j:plain f:id:asky0113:20160504183439p:plain

[2] xmlファイルを編集。

作成したxmlファイルで角丸や枠の設定をします。


[3] レイアウトのxmlファイルを編集。

レイアウトのxmlファイルで、使用したいbackgroundに[2]で作成したdrawableを指定。
今回は、TextViewのbackgroundに指定してみます。

NewStyle/app/src/main/res/layout/activity_main.xml (← 既存ファイルを編集)


[4] 完成!!

f:id:asky0113:20160504184508p:plain

色々とサンプルを作ってみる。

さて、上記を基本に色々とサンプルを作ってみます。

① 枠線

TextViewのbackgroundに指定。

f:id:asky0113:20160504185021p:plain


② 角丸と枠線

TextViewのbackgroundに指定。

f:id:asky0113:20160504185204p:plain


③ グラデーション

TextViewのbackgroundに指定。

f:id:asky0113:20160504185331p:plain


④ ボタンを押下時、グラデーションを反転

Buttonのbackgroundに指定。

drawableのxmlファイルにselectorも使用して、
ボタンが押された時にグラデーションが反転するようにしています。

f:id:asky0113:20160504185445g:plain


⑤ 丸形

Buttonのbackgroundに指定。

f:id:asky0113:20160504185621p:plain


⑥ レイヤースタイル

TextViewのbackgroundに指定。

drawableのxmlファイルにlayer-listも使用して、
itemごとのレイヤーで下画像のように描画。

f:id:asky0113:20160504190405p:plain


以上、色々試してみました( ´ ▽ ` )ノ