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
Introduction of the Facebook’s Fresco
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Daichi Furiya (Wasabeef)
April 14, 2015
Programming
3.3k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Introduction of the Facebook’s Fresco
An Android library for managing images and the memory they use.
Daichi Furiya (Wasabeef)
April 14, 2015
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
6
2.8k
About Flutter Architecture
wasabeef
1
320
2023 Flutter/Dart Summary
wasabeef
0
130
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
230
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
3.1k
What it Takes to be a Flutter Developer
wasabeef
0
250
FlutterKaigi 2022 Keynote
wasabeef
1
720
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.5k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.2k
Other Decks in Programming
See All in Programming
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
minodriven
12
6.2k
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.8k
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
610
Creating Composable Callables in Contemporary C++
rollbear
0
160
AI 輔助遺留系統現代化的經驗分享
jame2408
1
970
1B+ /day規模のログを管理する技術
broadleaf
0
110
才能?センス?知らん、 続けたもん勝ちだ。-- 結婚・出産・癌を越えてなお、私がプロダクトを創り続ける理由
16bitidol
1
120
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
180
AIだと陥りがちなJakarta EE最新技術への移行時の落とし穴と解決策
tnagao7
0
120
ローカルLLMを使ってB2Bサービスを作っていての学び
yaotti
0
210
エージェンティックRAGにAWSで入門しよう!
har1101
9
1.7k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
230
Featured
See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
150
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
310
Paper Plane (Part 1)
katiecoart
PRO
0
9.2k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.1k
Chasing Engaging Ingredients in Design
codingconduct
0
230
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.7k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
It's Worth the Effort
3n
188
29k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
750
A Tale of Four Properties
chriscoyier
163
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Transcript
Introduction of the Facebook’s Fresco CyberAgent, Inc. ߱ େ
About Me wasabeef @wasabeef_jp
About Fresco • Image Manager • Streaming • Animations •
Drawing • Loading
Quick Start
Adding Fresco to your Project dependencies { // your app's
other dependencies compile 'com.facebook.fresco:fresco:0.2.0+' }
Adding Fresco to your Project public class MainApplication extends Application
{ ! @Override public void onCreate() { super.onCreate(); Fresco.initialize(this); } }
Adding Fresco to your Project <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> !
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/image" android:layout_width="300dp" android:layout_height="300dp"/> ! </RelativeLayout>
Adding Fresco to your Project public class MainActivity extends ActionBarActivity
{ ! @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ! SimpleDraweeView drawee = (SimpleDraweeView) findViewById(R.id.image); ! Uri uri = Uri.parse(“http://bit.ly/1PDoTv2"); drawee.setImageURI(uri); } }
Supported URIs 5ZQF 4DIFNF 'FUDINFUIPEVTFE 'JMFPOOFUXPSL http://, https:// HttpURLConnection or
network layer 'JMFPOEFWJDF pMF 'JMF*OQVU4USFBN $POUFOUQSPWJEFS DPOUFOU $POUFOU3FTPMWFS "TTFUJOBQQ BTTFU "TTFU.BOBHFS 3FTPVSDFJOBQQ SFT 3FTPVSDFTPQFO3BX3FTPVSDF
Concepts • DraweeView • DraweeHierarchy • DraweeController • The Image
Pipeline
Drawee Guide
Using Drawees in XML <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="20dp" android:layout_height="20dp" fresco:fadeDuration="300" fresco:actualImageScaleType="focusCrop"
fresco:placeholderImage="@color/wait_color" fresco:placeholderImageScaleType="fitCenter" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retrying" fresco:retryImageScaleType="centerCrop" fresco:progressBarImage="@drawable/progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="1000" fresco:backgroundImage="@color/blue" fresco:overlayImage="@drawable/watermark" fresco:pressedStateOverlayImage="@color/red" fresco:roundAsCircle="false" fresco:roundedCornerRadius="1dp" fresco:roundTopLeft="true" fresco:roundTopRight="false" fresco:roundBottomLeft="false" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/corner_color" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor=“@color/border_color"/>
Animated Images • Fresco supports animated GIF and WebP images.
• Control of animation
Resizing and Rotating public class ResizeOptions { public final int
width; public final int height; ! public ResizeOptions(int width, int height) { /** **/ } }
Listening to Download Events public interface ControllerListener<INFO> { void onSubmit(String
var1, Object var2); ! void onFinalImageSet(String var1, INFO var2, Animatable var3); ! void onIntermediateImageSet(String var1, INFO var2); ! void onIntermediateImageFailed(String var1, Throwable var2); ! void onFailure(String var1, Throwable var2); ! void onRelease(String var1); }
Modifying the Image public interface Postprocessor { void process(Bitmap var1);
! String getName(); } public interface Postprocessor { ! void process(Bitmap var1); ! String getName(); }
Image Pipeline Guide
Modifying the Image public interface Postprocessor { void process(Bitmap var1);
! String getName(); }
Configuring the Image Pipeline • Progressive JPEGs • Configuring the
disk cache • Keeping cache stats
Third Party Libraries
Using Other Network Layers public interface Postprocessor { void process(Bitmap
var1); ! String getName(); } dependencies { // your app's other dependencies compile ‘com.facebook.fresco:fresco:0.2.0+’ compile ‘com.facebook.fresco:imagepipeline-okhttp:0.2.0+' }
Using Other Image Loaders public interface Postprocessor { void process(Bitmap
var1); ! String getName(); } dependencies { // your app's other dependencies compile ‘com.facebook.fresco:fresco:0.2.0+’ compile ‘com.facebook.fresco:drawee-volley:0.2.0+' }
Thanks.