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
Android - Bitmapは怖くない
Search
Daichi Furiya (Wasabeef)
April 25, 2015
Programming
10
17k
Android - Bitmapは怖くない
Bitmapってどういうことが出来るか
・Picasso, GlideでのTransformationについて
・Frescoとは?
・GPUImage for Android
Daichi Furiya (Wasabeef)
April 25, 2015
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
1.4k
About Flutter Architecture
wasabeef
1
190
2023 Flutter/Dart Summary
wasabeef
0
55
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
160
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
2.8k
What it Takes to be a Flutter Developer
wasabeef
0
180
FlutterKaigi 2022 Keynote
wasabeef
1
570
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.3k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.1k
Other Decks in Programming
See All in Programming
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Spring gRPC について / About Spring gRPC
mackey0225
0
230
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
15k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
CI改善もDatadogとともに
taumu
0
170
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
380
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Rails アプリ地図考 Flush Cut
makicamel
1
120
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Agile that works and the tools we love
rasmusluckow
328
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Into the Great Unknown - MozCon
thekraken
35
1.6k
Thoughts on Productivity
jonyablonski
69
4.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Transcript
Bitmapා͘ͳ͍ Wasabeef
About Me wasabeef CyberAgent, Inc.
Ͳ͏ߟ͑ͯBitmapා͍Ͱ͢
OutOfMemoryError…
About Bitmap
Bitmap • ը૾Λѻ͏جຊతͳAPI • BitmapFactoryͰΦϒδΣΫτੜ͢Δ • OutOfMemoryΛى͜͢ݪҼʹͳΓ͍͢
Supported Image Formats Format Encoder Decoder Details File Type JPEG
! ! Base+Progressive .jpg GIF ! .gif PNG ! ! .png BMP ! .bmp WebP !# 4.0+ !# 4.0+ .webp
About BitmapFactory.Options
inJustDecodeBounds • Bitmapͷϝλใ͚ͩऔಘ • ͋Β͔͡Ίը૾αΠζ͚ͩऔಘ͢Δ߹ͳͲ
inSampleSize • σϑΥϧτ1 • 2ʹઃఆ͢Δͱ1/2αΠζ • 4ʹઃఆ͢Δͱ1/4αΠζ • BitmapʹFilter͔͚Δ࣌ʹͱͯ༗ޮ
inPreferredConfig • BitmapΛಡΈࠐΉFormatΛࢦఆ͢Δ • σϑΥϧτ Bitmap.Config.ARGB_8888
About Bitmap.Config
ARGB_8888 • 32bit • Alpha, Red, Green, Blue ֤8bit •
Default
ARGB_4444 • 16bit • Alpha, Red, Green, Blue ֤4bit •
Deprecated in API 13
RGB_565 • 16bit • Alpha͕ͳ͍ը૾ʹ༗ޮ • ߹ʹΑͬͯARGB_8888ͷۙ͘
ALPHA_8 • 8bit • AlphaͷΈͷ߹ʹ༗ޮ
Open Source
Open Source • Universal Image Loader • Picasso • Glide
• Fresco • Volley
Picasso by Square
Picasso • Image Library • Transformation • Cache • Save
the world
Picasso Picasso.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView);
Picasso .fit()
Picasso .centerCrop()
Picasso .resize(800,800).centerInside()
Glide by Bump (sjudd)
Glide • Picasso like • Video, Gif support • Sampling
support • BitmapPool • Thumbnail change the world
Glide Glide.with(this) .load(“http://i.imgur.com/4rBHm4Q.jpg”) .transform(new CircleTransform()) .into(imageView); #
.fitCenter() Glide
.centerCrop() Glide
.override(800, 800) Glide
Picasso and Glide Transform
Transform ը૾ΛಡΈࠐΜͰImageViewʹ දࣔ͢Δલʹը૾Λมܗͤ͞Δ
RoundedCorners
CropCircle
BitmapShader
BitmapShader public static Bitmap shader(Bitmap src) { int width =
src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); # Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); BitmapShader shader = new BitmapShader( src, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); # paint.setShader(shader); RectF rectF = new RectF(margin, margin, width - margin, height - margin); canvas.drawRoundRect(recfF, radius, radius, paint); # return bitmap; }
Blur
RenderScript
RenderScript ScriptIntrinsicBlur public static Bitmap blur(Bitmap src) { int width
= src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); RenderScript rs = RenderScript.create(mContext); Allocation alloc = Allocation.createFromBitmap(rs, src); ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(rs, alloc.getElement()); blur.setInput(alloc); blur.setRadius(mRadius); blur.forEach(alloc); alloc.copyTo(bitmap); source.recycle(); # return bitmap; }
ColorFilter
ColorFilter
ColorFilter public static Bitmap color(Bitmap src, int color) { int
width = src.getWidth(); int height = src.getHeight(); # bitmap = Bitmap.createBitmap(width, height, config); Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(); paint.setAntiAlias(true); PorterDuffColorFilter filter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP); paint.setColorFilter(filter); canvas.drawBitmap(src, 0, 0, paint); # return bitmap; }
Open Source
Transform • picasso-transformations • glide-transformations wasabeef
GPUImage for Android CyberAgent, Inc.
GPUImage for Android • iOSͷGPUImageΛݩʹAndroidʹҠ২ • ImageViewʹରͯ͠FilterΛ͔͚ΕΔ • Filterͷछྨ70ݸ •
PhotoshopͷACVʹରԠ • API 8 (2.2+)
GPUImage for Android @Override public void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity); # Uri imageUri = Uri.parse(“http://i.imgur.com/4rBHm4Q.jpg”); mGPUImage = new GPUImage(this); mGPUImage.setImage(imageUri); mGPUImage.setFilter(new GPUImageToonFilter()); # mGPUImage.saveToPictures(mGPUImage, “sample.jpg”, null); }
Fresco by Facebook
Fresco • streaming of progressive JPEGs • Gif, WebP support
• Loading customization
Fresco <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="200dp" android:layout_height="200dp" 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"/>
OutOfMemoryError
࠷ޙͷखஈ
android:largeHeap=“true"
largeHeap == true? • Google+ • Amazon Kindle • Facebook
• Hulu • Tumblr • Youtube • Ameba Ownd
Wasabeef
Thanks.