Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Images 101
Effie Barak
July 20, 2018
Programming
1
180
Images 101
Effie Barak
July 20, 2018
Tweet
Share
More Decks by Effie Barak
See All by Effie Barak
A talk about Talks- AndroidMarkerFR
codingchick
0
130
Inside The Room- DCBln21 revised edition
codingchick
0
89
A talk about Talks - the extended version
codingchick
0
51
A talk about Talks
codingchick
0
78
Inside the room- DC SF edition
codingchick
0
55
Inside the room
codingchick
2
130
Images 101 - NYC
codingchick
0
63
Android Internals for Developers
codingchick
8
2.9k
Using Exoplayer
codingchick
2
35k
Other Decks in Programming
See All in Programming
レビュー駆動学習のススメ_StaPy#83
soogie
0
300
20220706_Google Apps Scriptを実演で学ぶ~ GAS × Slack ~
apachan
2
610
There's an API for that!
mariatta
PRO
0
100
ふんわり理解するcontext
rukiadia
1
180
ちょっとつよい足トラ
logilabo
0
350
Licences open source : entre guerre de clochers et radicalité
pylapp
2
550
Atomic Design とテストの○○な話
takfjp
2
790
Rust on Lambda 大きめCSV生成
atsuyokota
1
390
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
280
Register-based calling convention for Go functions
cjamhe01385
0
390
Reactは何を提供するLibraryなのか?
taro28
6
910
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
8.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Writing Fast Ruby
sferik
612
57k
Optimizing for Happiness
mojombo
365
63k
Code Reviewing Like a Champion
maltzj
506
37k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Ruby is Unlike a Banana
tanoku
91
9.3k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
How GitHub (no longer) Works
holman
297
140k
Transcript
Images 101 Effie Barak (@CodingChick)
What is an image/ a bitmap
Bitmap is an array
Bitmap with a color index
Images formats GIF PNG JPEG
Resolution
Density Pixels per inch
Vector Images
SVG xml <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.0.0,
SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1400px" height="980px" viewBox="0 0 1400 980" enable-background="new 0 0 1400 980" xml:space="preserve"> <g> <rect fill="#1E1D37" width="1400" height="980"/> <g> <circle fill="#666666" cx="158.2" cy="804" r="49"/> <path fill="#808080" d="M204.8,788.7c-0.1-0.4-0.3-0.9-0.4-1.3c0-0.1-0.1-0.2-0.1-0.3c-0.2-0.4-0.3-0.8-0.5-1.3c0,0,0,0,0,0 c-2.3-5.9-5.8-11.4-10.5-16.2c-12.5-12.8-30.4-17.2-46.6-13.3l-3.2,3.1c-2.1,2.1-2.2,5.5-0.1,7.6c2,2.1,5.3,2.2,7.5,0.2l-4.9,4.8 c-2.1,2.1-2.2,5.5-0.1,7.6h0c2.1,2.1,5.5,2.2,7.6,0.1l-11.6,11.4c-2.1,2.1-2.2,5.5-0.1,7.6l0,0c2.1,2.1,5.5,2.2,7.6,0.1l5.8-5.7 ...
Android Vector Images xml <vector android:height="24dp" android:viewportHeight="980" android:viewportWidth="1400" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#1E1D37" android:pathData="M0,0h1400v980h-1400z"/> <path android:fillColor="#666666" android:pathData="M158.2,804m-49,0a49,49 0,1 1,98 0a49,49 0,1 1,-98 0"/> <path android:fillColor="#808080" android:pathData="M204.8,788.7c-0.1,-0.4 -0.3,-0.9 -0.4,-1.3c0,-0.1 -0.1,-0.2 -0.1,-0.3c-0.2, -0.4 -0.3,-0.8 -0.5,-1.3c0,0 0,0 0,0c-2.3,-5.9 -5.8,-11.4 -10.5,-16.2c-12.5,-12.8 -30.4,-17.2 -46.6,-13.3l-3.2,3.1c-2.1,2.1 -2.2,5.5 -0.1,7.6c2,2.1 5.3,2.2 7.5,0.2l-4.9,4.8c-2.1,2.1 -2.2,5.5 -0.1,7.6h0c2.1,2.1 5.5,2.2 7.6,0.1l-11.6,11.4c-2.1,2.1 -2.2,5.5 -0.1,7.6l0,0c2.1,2.1 5.5,2.2 7.6,0.1l5.8,-5.7c-2.1,2.1 -2.2,5.5 -0.1,7.6l0,0c2.1,2.1 5.5,2.2 7.6,0.1l9.6,-9.5c-0.7,1.9 -0.3,4 1.2,5.6c2.1,2.1 5.5,2.2 7.6,0.1l-11.3,11.1c-2.1,2.1 -2.2,5.5 -0.1,7.6s5.5,2.2 7.6,0.1l9.5,-9.3c-2.1,2.1 -2.2,5.5 -0.1,7.6c2.1,2.1 5.5,2.2 7.6,0.1l4.5,-4.4c-0.9,2 -0.6,4.4 1,6h0c1.4,1.4 3.5,1.9 5.3,1.4C208,808 207.8,798 204.8,788.7L204.8,788.7z"/> ...
None
None
Drawing in Android
Canvas public class Canvas extends BaseCanvas { // may be
null private Bitmap mBitmap; // optional field set by the caller private DrawFilter mDrawFilter;
Drawable public abstract class Drawable { public abstract void draw(@NonNull
Canvas canvas); ... }
Background Drawable <TextView android:background="@drawable/gradient_box" ... />
Foreground Drawable <ImageView android:layout_width="400dp" android:layout_height="350dp" android:src="@drawable/ic_starship"/>
Drawable hierarchy 4 Drawable 4 BitmapDrawble 4 StateListDrawable 4 GradientDrawable
4 VectorDrawable
BitmapDrawable @Override public void draw(Canvas canvas) { final Bitmap bitmap
= mBitmapState.mBitmap; if (bitmap == null) { return; } final BitmapState state = mBitmapState; final Paint paint = state.mPaint; ...
StateListDrawable <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <!-- focused --> <item android:state_hovered="true" android:drawable="@drawable/button_focused" /> <!-- hovered --> <item android:drawable="@drawable/button_normal" /> <!-- default --> </selector>
GradientDrawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
android:angle="45"/> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape>
switch (st.mShape) { case RECTANGLE: ... } else if (st.mRadius
> 0.0f) { ... canvas.drawRoundRect(mRect, rad, rad, mFillPaint); if (haveStroke) { canvas.drawRoundRect(mRect, rad, rad, mStrokePaint); } } else { if (mFillPaint.getColor() != 0 || colorFilter != null || mFillPaint.getShader() != null) { canvas.drawRect(mRect, mFillPaint); } if (haveStroke) { canvas.drawRect(mRect, mStrokePaint); } } break; case OVAL: canvas.drawOval(mRect, mFillPaint); if (haveStroke) { canvas.drawOval(mRect, mStrokePaint); } break;
View
onDraw(Canvas canvas) @NonNull public RenderNode updateDisplayListIfDirty() { ... final DisplayListCanvas
canvas = renderNode.start(width, height); ... draw(canvas); ... }
Static images
Resource files
Different resolutions for different densities https://developer.android.com/training/multiscreen/ screendensities
https://github.com/winterDroid/android-drawable- importer-intellij-plugin
None
ImageView <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/starship" />
ImageView properties 4 Tint 4 ScaleType 4 Src
Tint <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/android"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/android" android:tint="@color/colorPrimary"/>
ScaleType
https://robots.thoughtbot.com/android-imageview- scaletype-a-visual-guide
Dynamic Images
Load the image as a stream InputStream is = new
URL(urlOfImage).openStream();
Create a bitmap out of the stream Bitmap bitmap =
BitmapFactory.decodeStream(is);
Set a bitmap to an ImageView imageView.setImageBitmap(bitmap);
Good image experience
Good image experience 4 Load in background
Good image experience 4 Load in background 4 Caching (disk/
memory)
Good image experience 4 Load in background 4 Caching (disk/
memory) 4 Placeholder
Good image experience 4 Load in background 4 Caching (disk/
memory) 4 Placeholder 4 Resizing
Resizing 4 Server side 4 Client side
BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; BitmapFactory.decodeResource(getResources(), R.id.myimage,
options); // Calculate inSampleSize options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); // Decode bitmap with inSampleSize set options.inJustDecodeBounds = false; return BitmapFactory.decodeResource(res, resId, options); https://developer.android.com/topic/performance/ graphics/load-bitmap
!
Imaging libraries 4 Glide 4 Fresco 4 Picasso
Glide https://github.com/bumptech/glide
Picasso https://square.github.io/picasso/
Fresco http://frescolib.org/ <com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" />
Good experience - in a image library example GlideApp .with(myFragment)
.load(url) .diskCacheStrategy(DiskCacheStrategy.ALL) .centerCrop() .placeholder(R.drawable.loading_spinner) .into(myImageView);
Thank you!