Images 101 - NYC

Transcript

1. 1.

   Images 101 Effie Barak (@CodingChick)

2. 2.

   What is an image/ a bitmap

3. 3.

   Bitmap is an array

4. 4.

   Bitmap with a color index

5. 5.

   Images formats GIF PNG JPEG

6. 6.

   Resolution

7. 7.

   Density Pixels per inch

8. 8.

   Vector Images

9. 9.

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

    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"/> ...
11. 11.

    None
12. 12.

    None
13. 13.

    Drawing in Android

14. 14.

    Canvas public class Canvas extends BaseCanvas { // may be

    null private Bitmap mBitmap; // optional field set by the caller private DrawFilter mDrawFilter;
15. 15.

    public void drawRect(float left, float top, float right, float bottom,

    @NonNull Paint paint) { throwIfHasHwBitmapInSwMode(paint); nDrawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance()); }
16. 16.

    Drawable public abstract class Drawable { public abstract void draw(@NonNull

    Canvas canvas); ... }
17. 17.

    Background Drawable <TextView android:background="@drawable/gradient_box" ... />

18. 18.

    Foreground Drawable <ImageView android:layout_width="400dp" android:layout_height="350dp" android:src="@drawable/ic_starship"/>

19. 19.

    Drawable hierarchy 4 Drawable 4 BitmapDrawble 4 StateListDrawable 4 GradientDrawable

    4 VectorDrawable
20. 20.

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

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

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

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

    View

25. 25.

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

    } }
26. 26.

    public class View { @NonNull public RenderNode updateDisplayListIfDirty() { ...

    final DisplayListCanvas canvas = renderNode.start(width, height); ... draw(canvas); ... } }
27. 27.

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

28. 28.

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

    }
29. 29.

    Static images

30. 30.

    Resource files

31. 31.

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

32. 32.

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

33. 33.

    None
34. 34.

    ImageView <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/starship" />

35. 35.

    ImageView properties 4 Tint 4 ScaleType 4 Src

36. 36.

    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"/>

37. 37.

    ScaleType

38. 38.

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

39. 39.

    Dynamic Images

40. 40.

    Load the image as a stream InputStream is = new

    URL(urlOfImage).openStream();
41. 41.

    Create a bitmap out of the stream Bitmap bitmap =

    BitmapFactory.decodeStream(is);
42. 42.

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

43. 43.

    Good image experience

44. 44.

    Good image experience 4 Load in background

45. 45.

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

    memory)
46. 46.

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

    memory) 4 Placeholder
47. 47.

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

    memory) 4 Placeholder 4 Resizing
48. 48.

    Resizing 4 Server side 4 Client side

49. 49.

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

    !

51. 51.

    Imaging libraries 4 Glide 4 Fresco 4 Picasso

52. 52.

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

53. 53.

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

54. 54.

    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" />

55. 55.

    Good experience - in a image library example GlideApp .with(myFragment)

    .load(url) .diskCacheStrategy(DiskCacheStrategy.ALL) .centerCrop() .placeholder(R.drawable.loading_spinner) .into(myImageView);
56. 56.

    Thank you!