![Page 1: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/1.jpg)
ハッシュタグ
##aaaaddeessiiggnnssデザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第22回:より凝ったグラフィック@@GGMMOO yyoouurrss
22001122..99..2200
![Page 2: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/2.jpg)
ハッシュタグ
##aaaaddeessiiggnnss
![Page 3: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/3.jpg)
がんばって作ったデザインが、
実装後に残念な結果にならないためになぜ残念になるか?
ハッシュタグ
##aaaaddeessiiggnnss
![Page 4: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/4.jpg)
秋葉ちひろ
•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロントエンドの一部
![Page 5: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/5.jpg)
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
![Page 6: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/6.jpg)
変態99--ppaattcchh
前回
![Page 7: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/7.jpg)
より凝ったグラフィック
今回のテーマ
前回は9-patchをした。これはビットマップ(画像)を使っていたが、今回はできるだけ画像を使わずに、どれだけこった表現ができるかを調べてみた。
![Page 8: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/8.jpg)
•・ 画像を使わなくてもできる表現をデザイナーが徹底解析!
11..コードのみで 可能な表現
WebでいうところのCSSと同じと考えるとよい。グラデーション、影などCSS3で新たに加わった
![Page 9: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/9.jpg)
•・ 仕組みを知れば、いろいろと応用がきく(かもしれない)
22..デザインが 組み込まれる仕組み
![Page 10: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/10.jpg)
bbuuttttoonn__bbgg..ppnngg
![Page 11: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/11.jpg)
bbuuttttoonn__bbgg ..ppnngg..99
![Page 12: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/12.jpg)
main.xml
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
![Page 13: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/13.jpg)
テキストや画像を表示したい場合
![Page 14: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/14.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" />
main.xml
撮影する
![Page 15: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/15.jpg)
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/photo" />
main.xml
pphhoottoo..ppnngg
![Page 16: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/16.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" />
main.xml
撮影する
![Page 17: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/17.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" />
main.xml
撮影する
![Page 18: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/18.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" />
main.xml
撮影する
![Page 19: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/19.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" android:padding="10dp" />
main.xml
撮影する
![Page 20: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/20.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background= "@drawable/button_bg" android:padding="10dp" />
main.xml
撮影する
![Page 21: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/21.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />
main.xml
撮影する
![Page 22: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/22.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />
main.xml
bbuuttttoonn__bbgg..99..ppnngg
![Page 23: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/23.jpg)
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />
main.xml
<shape android:shape="rectangle" > <size android:height="100dp" android:width="100dp" /> <solid android:color="#cc2f2f2f" /></shape>
button_bg.xml
![Page 24: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/24.jpg)
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA構造
飾�り
![Page 25: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/25.jpg)
drawable-hdpi
drawable-mdpi
drawable-ldpi
layouts
main.xml
values
strings.xml
res
drawable-xhdpi
iimmgg
hhttmmll
ccssss
JJAAVVAA
構造
飾�り
drawable xxmmll
![Page 26: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/26.jpg)
<<sshhaappee>>
重要!
コードでグラフィックを
表現するためのタグ
![Page 27: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/27.jpg)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="xxxxxx" >
</shape>
ここにいろいろ書くよ
![Page 28: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/28.jpg)
rreeccttaannggllee
長方形 角丸長方形
![Page 29: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/29.jpg)
oovvaall
円
![Page 30: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/30.jpg)
lliinnee
線�
![Page 31: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/31.jpg)
rriinngg
リング
![Page 32: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/32.jpg)
rreeccttaannggllee
長方形 角丸長方形
![Page 33: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/33.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle"></shape>
![Page 34: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/34.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<size android:width="100dp" android:height="50dp" />
![Page 35: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/35.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" />
![Page 36: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/36.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" /><stroke android:width="2dp" android:color="#000" />
![Page 37: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/37.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<size android:width="100dp" android:height="50dp" /><solid android:color="#ff64ae" /><stroke android:width="2dp" android:color="#000" /><corners android:radius="10dp" />
![Page 38: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/38.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle"></shape>
![Page 39: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/39.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" />
![Page 40: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/40.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> android:angle="90" />
![Page 41: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/41.jpg)
![Page 42: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/42.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<gradient android:startColor="#000" android:endColor="#fff" />
![Page 43: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/43.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
<gradient android:startColor="#fff" android:endColor="#000" />
![Page 44: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/44.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape> android:type="radial" />
<gradient android:startColor="#fff" android:endColor="#000" />
![Page 45: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/45.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
android:type="radial" />
<gradient android:startColor="#fff" android:endColor="#000" />
android:gradientRadial ="50" />
![Page 46: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/46.jpg)
![Page 47: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/47.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
android:type="radial" />
<gradient android:startColor="#fff" android:endColor="#000" />
android:gradientRadial ="50" />
![Page 48: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/48.jpg)
rreeccttaannggllee
長方形 角丸長方形
<shape android:shape="rectangle">
</shape>
android:type="radial" />
<gradient android:startColor="#fff" android:endColor="#000" />
android:gradientRadial ="33" />
![Page 49: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/49.jpg)
![Page 50: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/50.jpg)
<<sshhaappee>>タグでできること
ポイント!
![Page 51: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/51.jpg)
<size><solid>
<stroke><corners>
<gradient><padding>
大きさ
塗り
線�
角丸
グラデーション
内側の余白
![Page 52: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/52.jpg)
<size><solid>
<stroke><corners>
<gradient><padding>
大きさ
塗り
線�
角丸
グラデーション
内側の余白
wwiiddtthh,, hheeiigghhtt
bbaacckkggrroouunndd--ccoolloorr
bboorrddeerr
bboorrddeerr--rraaddiiuuss
ggrraaddiieenntt
ppaaddddiinngg
![Page 53: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/53.jpg)
![Page 54: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/54.jpg)
cceenntteerrCCoolloorr
ssttaarrttCCoolloorr
eennddCCoolloorr
ssttrrookkee
![Page 55: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/55.jpg)
![Page 56: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/56.jpg)
cceenntteerrCCoolloorr
ssttaarrttCCoolloorr
eennddCCoolloorr
ssttrrookkee
×
![Page 57: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/57.jpg)
![Page 58: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/58.jpg)
ssttaarrttCCoolloorr
eennddCCoolloorr
ssttrrookkee
×
![Page 59: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/59.jpg)
ssttaarrttCCoolloorr
eennddCCoolloorr
rraaddiiaall
![Page 60: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/60.jpg)
<gradientandroid:startColor="#87d1bc"android:endColor="#00845d"android:type="radial"android:gradientRadius="300"android:centerX="0.2"android:centerY="0.5" />
cceenntteerrXXcceenntteerrYY
![Page 61: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/61.jpg)
![Page 62: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/62.jpg)
ssttrrookkee
×
![Page 63: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/63.jpg)
<<sshhaappee>>タグでできないこと
実は不便
•・ 上下左右、個別の<<ssttrrookkee>>•・ ドロップシャドウ的なもの
![Page 64: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/64.jpg)
カラーコードについて
TTIIPPSS
##cccccc
##000000##88bbcc11ee22
##dd6655ee9944
##ffffaabb7755
![Page 65: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/65.jpg)
TTIIPPSS
##cccccc
##000000
##88bbcc11ee22
##dd6655ee9944
##ffffaabb7755
##33cccccc
##55000000
##660088bbcc11ee22
##2255dd6655ee9944
##5555ffffaabb7755
![Page 66: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/66.jpg)
こういう表現なら
どうする?Q.
![Page 67: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/67.jpg)
![Page 68: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/68.jpg)
99--ppaattcchhccaassee..11
•・ グラデーション込みで99--ppaattcchhにしてしまう
![Page 69: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/69.jpg)
![Page 70: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/70.jpg)
![Page 71: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/71.jpg)
![Page 72: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/72.jpg)
![Page 73: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/73.jpg)
![Page 74: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/74.jpg)
![Page 75: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/75.jpg)
![Page 76: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/76.jpg)
![Page 77: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/77.jpg)
ん〜
やっぱりやだ
![Page 78: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/78.jpg)
重ねるccaassee..22
•・ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
![Page 79: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/79.jpg)
sshhaappee
bbiittmmaapp
![Page 80: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/80.jpg)
sshhaappee
bbiittmmaapp
![Page 81: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/81.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
</item> <item>
</item></layer-list>
sshhaappee
bbiittmmaapp
![Page 82: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/82.jpg)
![Page 83: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/83.jpg)
sshhaappee
bbiittmmaapp
![Page 84: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/84.jpg)
sshhaappee
bbiittmmaapp
bbiittmmaapp
![Page 85: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/85.jpg)
sshhaappee
bbiittmmaapp
![Page 86: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/86.jpg)
sshhaappee
bbiittmmaapp
![Page 87: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/87.jpg)
sshhaappee
nniinnee--ppaattcchh
![Page 88: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/88.jpg)
sshhaappee
nniinnee--ppaattcchh
![Page 89: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/89.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
</item> <item>
</item></layer-list>
sshhaappee
nniinnee--ppaattcchh
![Page 90: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/90.jpg)
![Page 91: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/91.jpg)
nniinnee--ppaattcchh
bbiittmmaapp
![Page 92: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/92.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
</item> <item>
</item></layer-list>
nniinnee--ppaattcchh
bbiittmmaapp
![Page 93: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/93.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <nine-patch android:src="@drawable/border" /> </item></layer-list>
![Page 94: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/94.jpg)
![Page 95: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/95.jpg)
![Page 96: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/96.jpg)
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:shadowColor="#5000" android:shadowDx="0" android:shadowDy="-1" android:shadowRadius="1" android:text="11:20" />
![Page 97: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/97.jpg)
android:shadowColor="#5000"android:shadowDx="0"android:shadowDy="-1"android:shadowRadius="1"
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
XX位置
YY位置
ぼかし
XX位置YY位置
ぼかし
![Page 98: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/98.jpg)
http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
![Page 99: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/99.jpg)
![Page 100: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/100.jpg)
![Page 101: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/101.jpg)
##55000000
##00000000
tteexxttuurree__bbgg..ppnngg
sshhaappeebbiittmmaapp
![Page 102: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/102.jpg)
![Page 103: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/103.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000" android:type="radial" android:gradientRadius="300" /> </shape> </item></layer-list>
![Page 104: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/104.jpg)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000" android:type="radial" android:gradientRadius="300" /> </shape> </item></layer-list>
![Page 105: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/105.jpg)
![Page 106: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/106.jpg)
まとめ
•・ コードでかけるものは、コードで表現•・ 重ね技<<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>>
•・ 位置調整も可能
![Page 107: 【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips](https://reader033.vdocuments.net/reader033/viewer/2022042814/55615654d8b42a8a7d8b5410/html5/thumbnails/107.jpg)
GGoooodd LLuucckk!!
ありがとうございました!
•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//44(木)@CCAAさん(カスタムUUIIについて)