Enviar búsqueda
Cargar
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
•
8 recomendaciones
•
3,058 vistas
Chihiro Tomita
Seguir
Tecnología
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 65
Descargar ahora
Descargar para leer sin conexión
Recomendados
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
Chihiro Tomita
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
schoowebcampus
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Chihiro Tomita
ガイドラインからみたアプリUI〜iPhone用とAndroid用〜
ガイドラインからみたアプリUI〜iPhone用とAndroid用〜
Chihiro Tomita
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
Recomendados
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
No border, スマホ UI! 〜これからのモバイルアプリデザイン〜
Chihiro Tomita
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
schoowebcampus
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Chihiro Tomita
ガイドラインからみたアプリUI〜iPhone用とAndroid用〜
ガイドラインからみたアプリUI〜iPhone用とAndroid用〜
Chihiro Tomita
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
Xamarin概要+最新情報
Xamarin概要+最新情報
Yoshito Tabuchi
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
cm_saito
はじめてのAndroid
はじめてのAndroid
hiro nemu
Web1.0のハイブリッドアプリ開発
Web1.0のハイブリッドアプリ開発
Kenta Tsuji
About rails 3
About rails 3
issei126
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
Watch face アプリを公開してみた
Watch face アプリを公開してみた
Yuki Anzai
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Jqm20120210
Jqm20120210
cmtomoda
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
Toru Tamaki
Más contenido relacionado
Similar a デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
Xamarin概要+最新情報
Xamarin概要+最新情報
Yoshito Tabuchi
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
cm_saito
はじめてのAndroid
はじめてのAndroid
hiro nemu
Web1.0のハイブリッドアプリ開発
Web1.0のハイブリッドアプリ開発
Kenta Tsuji
About rails 3
About rails 3
issei126
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
Watch face アプリを公開してみた
Watch face アプリを公開してみた
Yuki Anzai
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Jqm20120210
Jqm20120210
cmtomoda
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
ohotech
Similar a デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
(20)
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Androidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Xamarin概要+最新情報
Xamarin概要+最新情報
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
#cmdevio2016 (レポート: F-2) iOS × Android 並行開発についてのトピック
はじめてのAndroid
はじめてのAndroid
Web1.0のハイブリッドアプリ開発
Web1.0のハイブリッドアプリ開発
About rails 3
About rails 3
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Jqm20120804 publish
Jqm20120804 publish
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Watch face アプリを公開してみた
Watch face アプリを公開してみた
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
UnicastWS vol.2
UnicastWS vol.2
jQuery Mobileの基礎
jQuery Mobileの基礎
Jqm20120210
Jqm20120210
LDD'12/Summer in KITAMI Opening Slide
LDD'12/Summer in KITAMI Opening Slide
Último
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
Toru Tamaki
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
瑛一 西口
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
keikoitakurag
情報を表現するときのポイント
情報を表現するときのポイント
onozaty
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
Ayachika Kitazaki
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
iwashiira2ctf
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
Toru Tamaki
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
Satoshi Makita
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
Sadaomi Nishi
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
Akihiro Kadohata
Último
(12)
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
情報を表現するときのポイント
情報を表現するときのポイント
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
1.
デザイナーが実際に Androidアプリのレイアウトを
組んでみた 秋葉ちひろ
2.
楽しかった!
3.
そも そも デザイナーが なんでXMLを?
4.
デザイナーとして ハッカソンに参加
第3回 SHARPハッカソン@東広島が7月23日(土)・24日(日)
5.
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.
まず、最低限の レイアウトで 作ってみた
22.
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="@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="@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="@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="@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="@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="@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="@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>
35.
36.
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" > </RelativeLayout>
37.
2 1
3 4 5 6
38.
RelativeLayoutは わりとなんでもできそう
39.
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" />
44.
45.
背景をつけたい! <bitmap>
46.
res
drawable bg_tile.xml drawable-hdpi img_bg_tile.png
47.
bg_tile.xml <bitmap android:src=
"@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=
"@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=
"@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
59.
60.
61.
10月17日
12月14日 17:00∼22:00 15日 赤井さんに 自分で レクチャー やってみた していただく
62.
とにかくまる1日
63.
アプリとして実機で 見れるとさいこーに 気分がいい
64.
CSSコーディングの 知識があれば
ぜんぜんよゆう!
65.
ぜひ!
Descargar ahora