Images 101 - 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

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

Slide 16

Slide 16 text

Background Drawable

Slide 17

Slide 17 text

Foreground Drawable

Slide 18

Slide 18 text

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

Slide 19

Slide 19 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 20

Slide 20 text

StateListDrawable

Slide 21

Slide 21 text

GradientDrawable

Slide 22

Slide 22 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 23

Slide 23 text

View

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Static images

Slide 26

Slide 26 text

Resource files

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

ImageView

Slide 31

Slide 31 text

ImageView properties 4 Tint 4 ScaleType 4 Src

Slide 32

Slide 32 text

Tint

Slide 33

Slide 33 text

ScaleType

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Dynamic Images

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Good image experience

Slide 40

Slide 40 text

Good image experience 4 Load in background

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Resizing 4 Server side 4 Client side

Slide 45

Slide 45 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 46

Slide 46 text

Slide 47

Slide 47 text

Imaging libraries 4 Glide 4 Fresco 4 Picasso

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Fresco http://frescolib.org/

Slide 51

Slide 51 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 52

Slide 52 text

Thank you!