デザイナーが実際にandroidアプリのレイアウトを...

デザイナーが実際にAndroidアプリのレイアウトを

組んでみた秋葉ちひろ

楽しかった！

デザイナーがなんでXMLを？

そもそも

デザイナーとしてハッカソンに参加

第3回 SHARPハッカソン＠東広島が7月23日(土)・24日(日)

動かなかった…

デザイナー主体のハッカソンを始めた

Designers Hack

もう一歩踏み出したい！

10月17日17:00～22:00

赤井さんにレクチャーしていただく

12月14日 15日

自分でやってみた

今回コーディングしたアプリ

今回コーディングしたアプリ• 自分のアカウントを持ち、自分の猫の写真をひたすらアップできる親バカアプリ

• 友達ならぬ友猫でつながれる

ホーム

ホーム• 自分の猫の写真一覧

ホーム• 自分の猫の写真一覧• アクションバーには検索と設定

ホーム• 自分の猫の写真一覧• アクションバーには検索と設定

• ショートカットボタンが3つ

友猫一覧

• 友猫の写真一覧友猫一覧

• 友猫の写真一覧友猫一覧

• 友猫の写真一覧• ★マークでお気に入りに追加

友猫一覧

友猫の検索結果• 友猫を探すときの検索結果• 写真と、名前や種類、プロフィールが出てくる

まず、最低限のレイアウトで作ってみた

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>

</LinearLayout>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

icon_search.png <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView>

<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<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 android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<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 android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" >

</LinearLayout>

<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 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_roope" android:padding="10dp"></ImageView>

</LinearLayout>

<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>

<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" ></RelativeLayout>

1

2

3

4 5 6

RelativeLayoutはわりとなんでもできそう

• ボックスにborderという概念がない！

• box-shadowはない• paddingなどのショートハンドはない

• text-shadowは再現できそう

<TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>

<TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>

<TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>

背景をつけたい！<bitmap>

res

drawable

bg_tile.xml

drawable-hdpi

img_bg_tile.png

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>

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

<bitmap android:src= "@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat"></bitmap>

bg_tile.xml

img_bg_tile.png

bg_tile.xml

<LinearLayout android:background= "@drawable/bg_tile">

main.xml

グラーデーション境界線角丸

<shape>

res

drawable

bg_tile.xml

drawable-hdpi

img_bg_tile.png

res

drawable

bg_tile.xml

drawable-hdpi

img_bg_tile.png

bg_kind.xml

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>

<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>

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>

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>

bg_kind.xml

bg_kind.xml

<LinearLayout android:background= "@drawable/bg_kind">

main.xml

10月17日17:00～22:00

赤井さんにレクチャーしていただく

12月14日 15日

自分でやってみた

とにかくまる1日

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

CSSコーディングの知識があれば

ぜんぜんよゆう！

ぜひ！