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
Daichi Furiya (Wasabeef)
April 14, 2015
Programming
2
3.2k
Introduction of the Facebook’s Fresco
An Android library for managing images and the memory they use.
Daichi Furiya (Wasabeef)
April 14, 2015
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
6
2k
About Flutter Architecture
wasabeef
1
260
2023 Flutter/Dart Summary
wasabeef
0
82
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
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
250
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
OSS開発者という働き方
andpad
5
1.7k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.1k
速いWebフレームワークを作る
yusukebe
5
1.7k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
1
340
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.3k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
530
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How to train your dragon (web standard)
notwaldorf
96
6.2k
A Tale of Four Properties
chriscoyier
160
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
96
6.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Art, The Web, and Tiny UX
lynnandtonic
302
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.