Beautiful Android by Eric Burke Square Inc. Friday, October 7, - PowerPoint PPT Presentation

Beautiful Android by Eric Burke Square Inc. Friday, October 7, 2011

Android Developers? Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Time for Code Friday, October 7, 2011

Keep it Square public class EditablePhoto extends View { @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int measuredWidth = getDefaultSize( getSuggestedMinimumWidth(), widthMeasureSpec); int measuredHeight = getDefaultSize( getSuggestedMinimumHeight(), heightMeasureSpec); // Ensure this view is always square. int min = Math.min(measuredHeight, measuredWidth); setMeasuredDimension(min, min); } } Friday, October 7, 2011

Keep it Square public class EditablePhoto extends View { @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int measuredWidth = getDefaultSize( getSuggestedMinimumWidth(), widthMeasureSpec); int measuredHeight = getDefaultSize( getSuggestedMinimumHeight(), heightMeasureSpec); // Ensure this view is always square. int min = Math.min(measuredHeight, measuredWidth); setMeasuredDimension(min, min); } } Friday, October 7, 2011

Keep it Square public class EditablePhoto extends View { @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int measuredWidth = getDefaultSize( getSuggestedMinimumWidth(), widthMeasureSpec); int measuredHeight = getDefaultSize( getSuggestedMinimumHeight(), heightMeasureSpec); // Ensure this view is always square. int min = Math.min(measuredHeight, measuredWidth); setMeasuredDimension(min, min); } } Friday, October 7, 2011

Friday, October 7, 2011

Let’s round these corners. Friday, October 7, 2011

Don’t Do This. Path clip = new Path(); clip.addRoundRect(...); canvas.clipPath(clip); canvas.drawBitmap(photo, 0, 0, null); canvas.restore(); Friday, October 7, 2011

Ugly Corners Friday, October 7, 2011

Lazy Bitmap public class EditablePhoto extends View { private Bitmap image; private Drawable placeholder; private Bitmap framedPhoto; ... @Override protected void onDraw(Canvas canvas) { if (placeholder == null && image == null) return; if (framedPhoto == null) { createFramedPhoto(Math.min(getWidth(), getHeight())); } canvas.drawBitmap(framedPhoto, 0, 0, null); } ... Friday, October 7, 2011

Lazy Bitmap public class EditablePhoto extends View { private Bitmap image; private Drawable placeholder; private Bitmap framedPhoto; ... @Override protected void onDraw(Canvas canvas) { if (placeholder == null && image == null) return; if (framedPhoto == null) { createFramedPhoto(Math.min(getWidth(), getHeight())); } canvas.drawBitmap(framedPhoto, 0, 0, null); } ... Friday, October 7, 2011

Lazy Bitmap public class EditablePhoto extends View { private Bitmap image; private Drawable placeholder; private Bitmap framedPhoto; ... @Override protected void onDraw(Canvas canvas) { if (placeholder == null && image == null) return; if (framedPhoto == null) { createFramedPhoto(Math.min(getWidth(), getHeight())); } canvas.drawBitmap(framedPhoto, 0, 0, null); } ... Friday, October 7, 2011

Lazy Bitmap public class EditablePhoto extends View { private Bitmap image; private Drawable placeholder; private Bitmap framedPhoto; ... @Override protected void onDraw(Canvas canvas) { if (placeholder == null && image == null) return; if (framedPhoto == null) { createFramedPhoto(Math.min(getWidth(), getHeight())); } canvas.drawBitmap(framedPhoto, 0, 0, null); } ... Friday, October 7, 2011

Alpha Compositing Source: http://en.wikipedia.org/wiki/Alpha_compositing Friday, October 7, 2011

Offscreen Bitmap private void createFramedPhoto(int size) { // Start with either the placeholder or the image. Drawable imageDrawable = (image != null) ? new BitmapDrawable(image) : placeholder; Bitmap output = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); RectF outerRect = new RectF(0, 0, size, size); float outerRadius = size / 18f; Friday, October 7, 2011

Offscreen Bitmap private void createFramedPhoto(int size) { // Start with either the placeholder or the image. Drawable imageDrawable = (image != null) ? new BitmapDrawable(image) : placeholder; Bitmap output = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); RectF outerRect = new RectF(0, 0, size, size); float outerRadius = size / 18f; Friday, October 7, 2011

Offscreen Bitmap private void createFramedPhoto(int size) { // Start with either the placeholder or the image. Drawable imageDrawable = (image != null) ? new BitmapDrawable(image) : placeholder; Bitmap output = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); RectF outerRect = new RectF(0, 0, size, size); float outerRadius = size / 18f; Friday, October 7, 2011

Offscreen Bitmap private void createFramedPhoto(int size) { // Start with either the placeholder or the image. Drawable imageDrawable = (image != null) ? new BitmapDrawable(image) : placeholder; Bitmap output = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); RectF outerRect = new RectF(0, 0, size, size); float outerRadius = size / 18f; Friday, October 7, 2011

Draw a Red Rectangle Paint paint = new Paint( Paint.ANTI_ALIAS_FLAG ); paint.setColor(Color.RED); canvas.drawRoundRect (outerRect, outerRadius, outerRadius, paint); Friday, October 7, 2011

paint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_IN)); Transparent Corners Friday, October 7, 2011

Composing the Image // Compose the image with the red rectangle. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); imageDrawable.setBounds(0, 0, size, size); // Save the layer to apply the paint. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); imageDrawable.draw(canvas); canvas.restore(); Friday, October 7, 2011

Composing the Image // Compose the image with the red rectangle. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); imageDrawable.setBounds(0, 0, size, size); // Save the layer to apply the paint. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); imageDrawable.draw(canvas); canvas.restore(); Friday, October 7, 2011

Composing the Image // Compose the image with the red rectangle. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); imageDrawable.setBounds(0, 0, size, size); // Save the layer to apply the paint. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); imageDrawable.draw(canvas); canvas.restore(); Friday, October 7, 2011

Composing the Image // Compose the image with the red rectangle. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); imageDrawable.setBounds(0, 0, size, size); // Save the layer to apply the paint. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); imageDrawable.draw(canvas); canvas.restore(); Drawing over the red rectangle. Friday, October 7, 2011

Composing the Image // Compose the image with the red rectangle. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); imageDrawable.setBounds(0, 0, size, size); // Save the layer to apply the paint. canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG); imageDrawable.draw(canvas); canvas.restore(); Friday, October 7, 2011

Rounded Corners Friday, October 7, 2011

Framing the Photo 1. Create offscreen bitmap. Friday, October 7, 2011

Framing the Photo 2. Draw an opaque rounded rectangle. Friday, October 7, 2011

Framing the Photo paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); 3. Set the Porter Duff mode. Friday, October 7, 2011

Framing the Photo Transparent center viewport. 4. Draw a translucent rounded rectangle. Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

plastic_background.xml res/drawable/plastic_background.xml <shape xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Nearly white at the top, light gray at the bottom. --> <gradient android:startColor="#fff7f7f7" android:endColor="#ffe2e3e5" android:angle="270"/> </shape> Friday, October 7, 2011

PlasticLinearLayout public class PlasticLinearLayout extends LinearLayout { public PlasticLinearLayout(Context context, AttributeSet attrs) { super(context, attrs); // The subtle gradient draws behind everything. setBackgroundResource(R.drawable.plastic_window_background); } } Friday, October 7, 2011

Friday, October 7, 2011

Friday, October 7, 2011

Triangular Shine private void createShinePath() { int width = getWidth(); int height = (int) (0.85 * getHeight()); shinePath = new Path(); shinePath.moveTo(0, 0); shinePath.lineTo(width, 0); shinePath.lineTo(width, height); shinePath.close(); shinePaint.setShader(new LinearGradient(0, 0, 0, height, 0x66ffffff, 0x10ffffff, CLAMP)); } Friday, October 7, 2011