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="@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>

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=
"@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

61. 10月17日 12月14日
17:00∼22:00 15日
赤井さんに 自分で
レクチャー やってみた
していただく

62. とにかくまる1日

63. アプリとして実機で
見れるとさいこーに
気分がいい

64. CSSコーディングの
知識があれば
ぜんぜんよゆう！

65. ぜひ！