狠狠撸
Submit Search
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
Dec 19, 2011
8 likes
3,061 views
Chihiro Tomita
1 of 65
Download now
Downloaded 41 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
More Related Content
Similar to デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
(20)
PDF
【第2回】デザイナーがコードから読み解く、础苍诲谤辞颈诲アプリのデザインの幅を広げるコツと罢颈辫蝉
Chihiro Tomita
?
PDF
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
?
PDF
础苍诲谤辞颈诲レイアウトのスタンダードアプローチ
Takao Sumitomo
?
PDF
齿补尘补谤颈苍概要+最新情报
Yoshito Tabuchi
?
PDF
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
cm_saito
?
ODP
はじめての础苍诲谤辞颈诲
hiro nemu
?
PDF
奥别产1.0のハイブリッドアプリ开発
Kenta Tsuji
?
PDF
About rails 3
issei126
?
PDF
jQuery Mobile 最新情報 & Tips
yoshikawa_t
?
PDF
Jqm20120804 publish
Takashi Okamoto
?
PDF
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
?
PPTX
学生向け础苍诲谤辞颈诲勉强会(入门编)
Itsuki Kuroda
?
PDF
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
?
PPT
20111031 MobileWeb at TDC
Nobuhiro Sue
?
PDF
Watch face アプリを公開してみた
Yuki Anzai
?
PDF
【第4回】デザイナーがコードから読み解く、础苍诲谤辞颈诲アプリのデザインの幅を広げるコツと罢颈辫蝉
Chihiro Tomita
?
PPTX
UnicastWS vol.2
Unicast Inc.
?
PDF
jQuery Mobileの基礎
Takashi Okamoto
?
PDF
Jqm20120210
cmtomoda
?
PDF
LDD'12/Summer in KITAMI Opening 狠狠撸
ohotech
?
【第2回】デザイナーがコードから読み解く、础苍诲谤辞颈诲アプリのデザインの幅を広げるコツと罢颈辫蝉
Chihiro Tomita
?
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
?
础苍诲谤辞颈诲レイアウトのスタンダードアプローチ
Takao Sumitomo
?
齿补尘补谤颈苍概要+最新情报
Yoshito Tabuchi
?
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
cm_saito
?
はじめての础苍诲谤辞颈诲
hiro nemu
?
奥别产1.0のハイブリッドアプリ开発
Kenta Tsuji
?
About rails 3
issei126
?
jQuery Mobile 最新情報 & Tips
yoshikawa_t
?
Jqm20120804 publish
Takashi Okamoto
?
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
?
学生向け础苍诲谤辞颈诲勉强会(入门编)
Itsuki Kuroda
?
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
?
20111031 MobileWeb at TDC
Nobuhiro Sue
?
Watch face アプリを公開してみた
Yuki Anzai
?
【第4回】デザイナーがコードから読み解く、础苍诲谤辞颈诲アプリのデザインの幅を広げるコツと罢颈辫蝉
Chihiro Tomita
?
UnicastWS vol.2
Unicast Inc.
?
jQuery Mobileの基礎
Takashi Okamoto
?
Jqm20120210
cmtomoda
?
LDD'12/Summer in KITAMI Opening 狠狠撸
ohotech
?
Recently uploaded
(9)
PDF
安尾 萌, 北村 茂生, 松下 光範. 災害発生時における被害状況把握を目的とした情報共有システムの基礎検討, 電子情報通信学会HCGシンポジウム2018...
Matsushita Laboratory
?
PDF
安尾 萌, 藤代 裕之, 松下 光範. 協調的情報トリアージにおけるコミュニケーションの影響についての検討, 第11回データ工学と情報マネジメントに関する...
Matsushita Laboratory
?
PPTX
色について.pptx .
iPride Co., Ltd.
?
PDF
安尾 萌, 松下 光範. 環境馴致を計量可能にするための試み,人工知能学会第4回仕掛学研究会, 2018.
Matsushita Laboratory
?
PPTX
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
PDF
論文紹介:Unbiasing through Textual Descriptions: Mitigating Representation Bias i...
Toru Tamaki
?
PPTX
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
PDF
論文紹介:AutoPrompt: Eliciting Knowledge from Language Models with Automatically ...
Toru Tamaki
?
PDF
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
フォーガンシー
?
安尾 萌, 北村 茂生, 松下 光範. 災害発生時における被害状況把握を目的とした情報共有システムの基礎検討, 電子情報通信学会HCGシンポジウム2018...
Matsushita Laboratory
?
安尾 萌, 藤代 裕之, 松下 光範. 協調的情報トリアージにおけるコミュニケーションの影響についての検討, 第11回データ工学と情報マネジメントに関する...
Matsushita Laboratory
?
色について.pptx .
iPride Co., Ltd.
?
安尾 萌, 松下 光範. 環境馴致を計量可能にするための試み,人工知能学会第4回仕掛学研究会, 2018.
Matsushita Laboratory
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
論文紹介:Unbiasing through Textual Descriptions: Mitigating Representation Bias i...
Toru Tamaki
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
論文紹介:AutoPrompt: Eliciting Knowledge from Language Models with Automatically ...
Toru Tamaki
?
Forguncy 10 製品概要資料 - ノーコードWebアプリ開発プラットフォーム
フォーガンシー
?
Ad
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
1.
デザイナーが実際に Androidアプリのレイアウトを
組んでみた 秋葉ちひろ
2.
楽しかった!
3.
そも そも デザイナーが なんでXMLを?
4.
デザイナーとして ハッカソンに参加
第3回 SHARPハッカソン@東広島が7月23日(土)?24日(日)
6.
动かなかった…
7.
デザイナー主体の ハッカソンを始めた
Designers Hack
8.
もう一歩 踏み出したい!
9.
10月17日
12月14日 17:00~22:00 15日 赤井さんに 自分で レクチャー やってみた していただく
10.
今回コーディングしたアプリ
11.
今回コーディングしたアプリ
? 自分のアカウントを持ち、 自分の猫の写真をひたすら アップできる親バカアプリ ? 友達ならぬ友猫でつなが れる
12.
ホーム
13.
ホーム ? 自分の猫の写真一覧
14.
ホーム ? 自分の猫の写真一覧 ? アクションバーには検索と
设定
15.
ホーム ? 自分の猫の写真一覧 ? アクションバーには検索と
设定 ? ショートカットボタンが3つ
16.
友猫一覧
17.
友猫一覧 ? 友猫の写真一覧
18.
友猫一覧 ? 友猫の写真一覧
19.
友猫一覧 ? 友猫の写真一覧 ? ★マークでお気に入りに追加
20.
友猫の検索結果 ? 友猫を探すときの検索結果 ? 写真と、名前や種類、プロ
フィールが出てくる
21.
まず、最低限の レイアウトで 作ってみた
23.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
24.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
25.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
26.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
27.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
28.
<LinearLayout
android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> </LinearLayout>
29.
<LinearLayout
android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView icon_search.png android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> </LinearLayout>
30.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> </LinearLayout>
31.
<LinearLayout
android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" <EditText android:padding="10dp" ></ImageView> android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText> </LinearLayout>
32.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText> </LinearLayout>
33.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText> </LinearLayout>
34.
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=/slideshow/android-10635631/10635631/"@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_roope" android:padding="10dp" ></ImageView> </LinearLayout>
36.
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" > </RelativeLayout>
37.
2 1
3 4 5 6
38.
RelativeLayoutは わりとなんでもできそう
40.
? ボックスにborderとい う概念がない! ?
box-shadowはない ? paddingなどのショー トハンドはない ? text-shadowは再現で きそう
41.
<TextView
android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
42.
<TextView
android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
43.
<TextView
android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
45.
背景をつけたい! <bitmap>
46.
res
drawable bg_tile.xml drawable-hdpi img_bg_tile.png
47.
bg_tile.xml <bitmap android:src=
/slideshow/android-10635631/10635631/"@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat" ></bitmap>
48.
bg_tile.xml <bitmap android:src=
/slideshow/android-10635631/10635631/"@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat" ></bitmap> img_bg_tile.png
49.
bg_tile.xml <bitmap android:src=
/slideshow/android-10635631/10635631/"@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat" ></bitmap> img_bg_tile.png
50.
main.xml <LinearLayout android:background=
"@drawable/bg_tile" > bg_tile.xml
51.
グラーデーション
境界線 角丸 <shape>
52.
res
drawable bg_tile.xml drawable-hdpi img_bg_tile.png
53.
res
drawable bg_tile.xml bg_kind.xml drawable-hdpi img_bg_tile.png
54.
bg_kind.xml <shape android:shape="rectangle"> <gradient
android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /> </shape>
55.
bg_kind.xml <shape android:shape="rectangle"> <gradient
android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /> </shape>
56.
bg_kind.xml <shape android:shape="rectangle"> <gradient
android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /> </shape>
57.
bg_kind.xml <shape android:shape="rectangle"> <gradient
android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /> </shape>
58.
main.xml <LinearLayout android:background=
"@drawable/bg_kind" > bg_kind.xml
61.
10月17日
12月14日 17:00~22:00 15日 赤井さんに 自分で レクチャー やってみた していただく
62.
とにかくまる1日
63.
アプリとして実機で 見れるとさいこーに 気分がいい
64.
CSSコーディングの 知識があれば
ぜんぜんよゆう!
65.
ぜひ!
Download