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 - NYC
Effie Barak
August 30, 2018
0
62
Images 101 - NYC
Effie Barak
August 30, 2018
Tweet
Share
More Decks by Effie Barak
See All by Effie Barak
A talk about Talks- AndroidMarkerFR
codingchick
0
110
Inside The Room- DCBln21 revised edition
codingchick
0
77
A talk about Talks - the extended version
codingchick
0
51
A talk about Talks
codingchick
0
75
Inside the room- DC SF edition
codingchick
0
54
Inside the room
codingchick
2
120
Images 101
codingchick
1
180
Android Internals for Developers
codingchick
8
2.8k
Using Exoplayer
codingchick
2
35k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Building Applications with DynamoDB
mza
83
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Teambox: Starting and Learning
jrom
121
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Writing Fast Ruby
sferik
612
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Building Adaptive Systems
keathley
25
1.1k
Infographics Made Easy
chrislema
233
17k
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;
public void drawRect(float left, float top, float right, float bottom,
@NonNull Paint paint) { throwIfHasHwBitmapInSwMode(paint); nDrawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance()); }
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
public class View { draw(Canvas canvas) { ... updateDisplayListIfDirty(); ...
} }
public class View { @NonNull public RenderNode updateDisplayListIfDirty() { ...
final DisplayListCanvas canvas = renderNode.start(width, height); ... draw(canvas); ... } }
draw(Canvas canvas) { ... if (!dirtyOpaque) onDraw(canvas); ... }
public class View { protected void onDraw(Canvas 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!