Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ConstraintLayout & Android Studio Design Tools
Search
Daichi Furiya (Wasabeef)
May 19, 2018
Programming
2
880
ConstraintLayout & Android Studio Design Tools
Daichi Furiya (Wasabeef)
May 19, 2018
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
6
2.1k
About Flutter Architecture
wasabeef
1
270
2023 Flutter/Dart Summary
wasabeef
0
84
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
190
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
3k
What it Takes to be a Flutter Developer
wasabeef
0
200
FlutterKaigi 2022 Keynote
wasabeef
1
620
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.4k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.2k
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
CSC509 Lecture 04
javiergs
PRO
0
290
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
380
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
CSC305 Lecture 03
javiergs
PRO
0
230
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.3k
プログラマのための作曲入門
cheebow
0
540
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
850
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Code Reviewing Like a Champion
maltzj
525
40k
Context Engineering - Making Every Token Count
addyosmani
5
180
The World Runs on Bad Software
bkeepers
PRO
71
11k
Gamification - CAS2011
davidbonilla
81
5.5k
Making Projects Easy
brettharned
119
6.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Review Best Practice
trishagee
72
19k
BBQ
matthewcrist
89
9.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Transcript
ConstraintLayout & Android Studio Design Tools wasabeef GDG Fukuoka 2018
About me Daichi Furiya Google Developer Expert CyberAgent, Inc. @wasabeef_jp
wasabeef
まずは 5 分でおさらい IO18 Android announcements
1. Android Jetpack
Jetpack
Jetpack - Navigation
2. Android App Bundle
複数 apk の管理をなくす apk サイズを小さくする インストール後でも機能をできる インストールしなくても実行できる Android App Bundle
Android App Bundle
Android App Bundle aab生成方法 $ ./gradlew assemble{Variables} $ ./gradlew bundle{Variables}
3. Kotlin
Concise Safe Interoperable Tool-Friendly Kotlin Kotlin Koans Online https://try.kotlinlang.org
Android KTX view.viewTreeObserver.addOnPreDrawListener( object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw():
Boolean { viewTreeObserver.removeOnPreDrawListener(this) actionToBeTriggered() return true } }); view.doOnPreDraw { actionToBeTriggered() }
4. Slices
Slices Google検索結果の中に自分のアプリのUI、 アクションなど表示することができる
5. App Actions
App Actions ホーム画面やスマートテキスト選択などに 自分のアプリのアクションを設定できる
Android Studio Design Tools Android Studio 3.2 Canary 15
CustomViewがエディタから選択できるように
既存のViewGroupから変換できるように
<include>先のレイアウト確認が楽に
Tools attributes
知らなかったものもたくさんあります tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount tools:openDrawer Tools:text
tool:menu tools:locale tools:keep and more…
頻繁に使うであろう tools attributes tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount
tools:openDrawer Tools:text tool:menu tools:locale tools:keep and more…
レイアウト確認で空のandroid:textだと不便な場合など <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" android:text=“TextView” app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/>
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/> レイアウト確認で空のandroid:textだと不便な場合など
tools:text を活用すればデザイン確認も少し楽に <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf=“parent" tools:text=“わさびーふ”/>
RecycierView はエディタ上だと確認しずらい
サンプルデータを表示することができる
設定もエディタ上から簡単に
わかりやすい見た目になり、データ数の調整も可能 <androidx.recyclerview.widget.RecyclerView android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf=“@+id/bookmark" tools:listitem=“@layout/recycler_view_item_5” tools:itemCount=“5" />
Sample Data
Sample Data サンプル画像が用意されている
Sample Data 背景用サンプル画像も
Sample Data 自分で用意したサンプル画像も
独自で用意した画像などは フォルダを作って格納する sampledata/myavatars
カラーのサンプルデータ #f44336 #9c28b0 #3f51b5 #673ab7 sampledata/colors
sampledata/full_names ユーザ名のサンプルデータ Taro yamada Sho Otani Daichi Furiya
用意したカラーをエディタ上だけ反映してみる <ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero"/>
<ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero" tools:tint="@sample/colors" /> 用意したカラーをエディタ上だけ反映してみる
Names @tools:sample/first_names Cities @tools:sample/us_cities Lorem ipsum @tools:sample/lorem Avatars @tools:sample/avatars …
Predefined Sample Data
Demo
ConstraintLayout 2.0
柔軟なレイアウト ViewGroupの階層を深くしない UI Builderが充実 API 9 から利用可能で 99.99% の端末で動作 ライブラリサイズが
160kb 未満 ConstraintLayout
ConstraintLayout 1.1 (2018) dependencies { implementation 'androidx.constraintlayout:constraintlayout:1.1.0' }
相対・センタリング・バイアス グルーピング 非表示時のハンドリング ガイドライン ConstraintSet ConstraintLayout 1.0 (2017)
Chain サポートの向上 New Optimizer Barrier … more ConstraintLayout 1.1 (2018)
Helper
UIの作成を楽にするもの GuidlineやBarrier 各Viewの参照をまとめたりもできる Helper
Barrier 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Guidline 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Layout Manipulation Post-Layout Manipulation Rendering or Decorating Helper
Layer
表示・非表示サポート 変形アニメーションサポート Layer
Layer
Circular Revel
Circular Revel 自分で実装するとなる と難しい、このアニ メーションも簡単にで きる
Decorators
Lava Decorator
Lava Decorator Floating Action Button のアニメーションに応 用したりできる
Next future
MotionLayout
MotionLayout ConstraintLayoutのサブクラス MotionScene ConstraintLayoutStatesのアニ メーションをやってくれる
MotionLayout CustomViewのアニメーションサ ポート Custom attributeのサポート
MotionLayout
Motion Editor
Motion Editor
Motion Editor
Conclusion
2018/06/08(金) 19:00 〜 (株)メルカリ 福岡オフィス http://bit.ly/HKT-IO18
Thank you. twitter.com/wasabeef_jp wasabeef.jp github.com/wasabeef