Images 101 - NYC - Speaker Deck

Slide 1

Slide 1 text

Images 101 Effie Barak (@CodingChick)

Slide 2

Slide 2 text

What is an image/ a bitmap

Slide 3

Slide 3 text

Bitmap is an array

Slide 4

Slide 4 text

Bitmap with a color index

Slide 5

Slide 5 text

Images formats GIF PNG JPEG

Slide 6

Slide 6 text

Resolution

Slide 7

Slide 7 text

Density Pixels per inch

Slide 8

Slide 8 text

Vector Images

Slide 9

Slide 9 text

SVG xml

Slide 10

Slide 10 text

Android Vector Images xml ...

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Drawing in Android

Slide 14

Slide 14 text

Canvas public class Canvas extends BaseCanvas { // may be null private Bitmap mBitmap; // optional field set by the caller private DrawFilter mDrawFilter;

Slide 15

Slide 15 text

public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) { throwIfHasHwBitmapInSwMode(paint); nDrawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance()); }

Slide 16

Slide 16 text

Drawable public abstract class Drawable { public abstract void draw(@NonNull Canvas canvas); ... }

Slide 17

Slide 17 text

Background Drawable

Slide 18

Slide 18 text

Foreground Drawable

Slide 19

Slide 19 text

Drawable hierarchy 4 Drawable 4 BitmapDrawble 4 StateListDrawable 4 GradientDrawable 4 VectorDrawable

Slide 20

Slide 20 text

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; ...

Slide 21

Slide 21 text

StateListDrawable

Slide 22

Slide 22 text

GradientDrawable

Slide 23

Slide 23 text

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;

Slide 24

Slide 24 text

View

Slide 25

Slide 25 text

public class View { draw(Canvas canvas) { ... updateDisplayListIfDirty(); ... } }

Slide 26

Slide 26 text

public class View { @NonNull public RenderNode updateDisplayListIfDirty() { ... final DisplayListCanvas canvas = renderNode.start(width, height); ... draw(canvas); ... } }

Slide 27

Slide 27 text

draw(Canvas canvas) { ... if (!dirtyOpaque) onDraw(canvas); ... }

Slide 28

Slide 28 text

public class View { protected void onDraw(Canvas canvas) { } }

Slide 29

Slide 29 text

Static images

Slide 30

Slide 30 text

Resource files

Slide 31

Slide 31 text

Different resolutions for different densities https://developer.android.com/training/multiscreen/ screendensities

Slide 32

Slide 32 text

https://github.com/winterDroid/android-drawable- importer-intellij-plugin

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

ImageView

Slide 35

Slide 35 text

ImageView properties 4 Tint 4 ScaleType 4 Src

Slide 36

Slide 36 text

Tint

Slide 37

Slide 37 text

ScaleType

Slide 38

Slide 38 text

https://robots.thoughtbot.com/android-imageview- scaletype-a-visual-guide

Slide 39

Slide 39 text

Dynamic Images

Slide 40

Slide 40 text

Load the image as a stream InputStream is = new URL(urlOfImage).openStream();

Slide 41

Slide 41 text

Create a bitmap out of the stream Bitmap bitmap = BitmapFactory.decodeStream(is);

Slide 42

Slide 42 text

Set a bitmap to an ImageView imageView.setImageBitmap(bitmap);

Slide 43

Slide 43 text

Good image experience

Slide 44

Slide 44 text

Good image experience 4 Load in background

Slide 45

Slide 45 text

Good image experience 4 Load in background 4 Caching (disk/ memory)

Slide 46

Slide 46 text

Good image experience 4 Load in background 4 Caching (disk/ memory) 4 Placeholder

Slide 47

Slide 47 text

Good image experience 4 Load in background 4 Caching (disk/ memory) 4 Placeholder 4 Resizing

Slide 48

Slide 48 text

Resizing 4 Server side 4 Client side

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Imaging libraries 4 Glide 4 Fresco 4 Picasso

Slide 52

Slide 52 text

Glide https://github.com/bumptech/glide

Slide 53

Slide 53 text

Picasso https://square.github.io/picasso/

Slide 54

Slide 54 text

Fresco http://frescolib.org/

Slide 55

Slide 55 text

Good experience - in a image library example GlideApp .with(myFragment) .load(url) .diskCacheStrategy(DiskCacheStrategy.ALL) .centerCrop() .placeholder(R.drawable.loading_spinner) .into(myImageView);

Slide 56

Slide 56 text

Thank you!