デザイナーが実際に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コーディングの知識があれば
ぜんぜんよゆう!
ぜひ!