狠狠撸

狠狠撸Share a Scribd company logo
デザイナーが実際に
Androidアプリのレイアウトを
       組んでみた

       秋葉ちひろ
楽しかった!
そも そも

 デザイナーが
なんでXMLを?
デザイナーとして
ハッカソンに参加



     第3回 SHARPハッカソン@東広島が7月23日(土)?24日(日)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
动かなかった…
デザイナー主体の
ハッカソンを始めた


   Designers Hack
もう一歩
踏み出したい!
10月17日        12月14日
17:00~22:00      15日

赤井さんに          自分で
 レクチャー        やってみた
していただく
今回コーディングしたアプリ
今回コーディングしたアプリ
     ? 自分のアカウントを持ち、
      自分の猫の写真をひたすら
      アップできる親バカアプリ

     ? 友達ならぬ友猫でつなが
      れる
ホーム
ホーム
? 自分の猫の写真一覧
ホーム
? 自分の猫の写真一覧
? アクションバーには検索と
 设定
ホーム
? 自分の猫の写真一覧
? アクションバーには検索と
 设定

? ショートカットボタンが3つ
友猫一覧
友猫一覧
? 友猫の写真一覧
友猫一覧
? 友猫の写真一覧
友猫一覧
? 友猫の写真一覧
? ★マークでお気に入りに追加
友猫の検索結果
? 友猫を探すときの検索結果
? 写真と、名前や種類、プロ
 フィールが出てくる
まず、最低限の
レイアウトで
 作ってみた
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
<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>
<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"
            >



<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>
<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>
<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>
<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>
<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>
<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>
<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>
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  >
</RelativeLayout>
2




1           3


    4       5   6
RelativeLayoutは
わりとなんでもできそう
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
? ボックスに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"
/>
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
背景をつけたい!
 <bitmap>
res

      drawable

       bg_tile.xml


      drawable-hdpi

       img_bg_tile.png
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>
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
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
main.xml

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


              bg_tile.xml
グラーデーション
   境界線
    角丸
  <shape>
res

      drawable

       bg_tile.xml


      drawable-hdpi

       img_bg_tile.png
res

      drawable

       bg_tile.xml

       bg_kind.xml


      drawable-hdpi

       img_bg_tile.png
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

<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>
main.xml

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


              bg_kind.xml
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
10月17日        12月14日
17:00~22:00      15日

赤井さんに          自分で
 レクチャー        やってみた
していただく
とにかくまる1日
アプリとして実機で
見れるとさいこーに
  気分がいい
CSSコーディングの
  知識があれば
 ぜんぜんよゆう!
ぜひ!

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アプリのレイアウトを 組んでみた(秋葉ちひろ)