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
Facebook Litho
Search
Merab Tato Kutalia
May 04, 2017
Programming
2
84
Facebook Litho
Droid Up 7.0 , 2017 talk about Facebook Litho
Merab Tato Kutalia
May 04, 2017
Tweet
Share
More Decks by Merab Tato Kutalia
See All by Merab Tato Kutalia
What's new in Android 14?
tatocaster
0
160
Migrate to Gradle version catalog and convention plugins
tatocaster
3
1.9k
Make Codebases Secure with OWASP
tatocaster
0
190
Secure Coding Standards
tatocaster
0
150
ტანგო ანდროიდთან
tatocaster
0
250
Adopting Huawei Mobile Services
tatocaster
0
58
Android UI Testing & Challenges
tatocaster
1
100
Reverse & Inject - droidcon
tatocaster
3
290
mobile DevOps
tatocaster
1
130
Other Decks in Programming
See All in Programming
MLH State of the League: 2026 Season
theycallmeswift
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
170
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
150
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
480
CSC305 Summer Lecture 05
javiergs
PRO
0
110
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Facilitating Awesome Meetings
lara
55
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Designing for humans not robots
tammielis
253
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Code Review Best Practice
trishagee
70
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Optimizing for Happiness
mojombo
379
70k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
Facebook Litho A declarative UI framework for Android
Tato Kutalia tatocaster tatocaster.me github.com/tatocaster twitter.com/@tatokutalia
Litho’s History
Litho’s History iOS Platform, now known as Texture(Pinterest).
Litho Appeared @ Facebook F8 primarily built to implement complex
scrollable UIs based on RecyclerView.
Litho - View flattening - Declarative - AsyncLayout - Recycling
- Good Debugging Tools a declarative framework for building efficient UIs
Litho uses Yoga, also by Facebook cross-platform layout engine Everything
is a component immutable inputs knowns as Props React Terminology
Litho Core Elements State Props LayoutSpec - groups existing components
together in an immutable layout tree. MountSpec - defines a component that can render views or drawables.
Litho Recycler
Litho Touch and Click @LayoutSpec class ListItemSpec { @OnCreateLayout static
ComponentLayout onCreateLayout( ComponentContext c, @Prop(optional = true, resType = ResType.DIMEN_OFFSET) int shadowRadius, @Prop int color, @Prop String title, @Prop String subtitle) { return Column.create(c) .paddingDip(ALL, 16) .backgroundColor(color) .child( Text.create(c) .text(title) .textSizeSp(40)) .child( Text.create(c) .text(subtitle) .textStyle(ITALIC) .textSizeSp(20)) .clickHandler(ListItem.onClick(c)) .build(); } @OnEvent(ClickEvent.class) static void onClick(ComponentContext c, @FromEvent View view, @Prop OnListItemClickListener listener) { listener.onListItemClick(view); }
Litho Custom View
Litho Install // Litho compile 'com.facebook.litho:litho-core:0.2.0' compile 'com.facebook.litho:litho-widget:0.2.0' provided 'com.facebook.litho:litho-annotations:0.2.0'
annotationProcessor 'com.facebook.litho:litho-processor:0.2.0' // SoLoader compile 'com.facebook.soloader:soloader:0.2.0' // Optional // For debugging debugCompile 'com.facebook.litho:litho-stetho:0.2.0' //stetho itself compile 'com.facebook.stetho:stetho:1.5.0'
Litho Summary and Demo