[ultracode munich meetup #7] android view customization in a nutshell

VIEW CUSTOMIZATIONIN A NUTSHELL

@bernhardpflug

plus.google.com/+BernhardPflug

Iconmobile170

Headquarter

BMW

BMW remote apps

The app

UX Don’t just start coding

Make it easy to send feedback

Analyse usage

One UX example

Custom view drawing with animation

public class TankView extends ViewGroup { ! . . . !

private void updateBoilerAppearance() { . . . liquidPaths[i] = new Path(); liquidPaints[i] = new Paint(liquidPaint); liquidPaints[i].setShader(new LinearGradient(. . .}, new float[] { . . . }, Shader.TileMode.CLAMP)); ! liquidPaths[i].moveTo(. . .); liquidPaths[i].lineTo(. . .); liquidPaths[i].quadTo(. . .);

. . . ! liquidPathEffects[i].add(new DashPathEffect(new float[] { . . . )); ! } !

. . . } !!

!@Overrideprotected void dispatchDraw(Canvas canvas) { canvas.saveLayerAlpha(0, 0, canvas.getWidth(), canvas.getHeight(), alpha, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG); canvas.drawPath(boilerContour, contourPaint); . . . if (state == State.HEATING) { // draw pipe canvas.drawRect(pipeBounds, fillPaint); canvas.drawLine(. . . ); canvas.drawLine(. . . ); // draw liquid for (int i = 0; i < liquidPaths.length; i++) { canvas.drawPath(liquidPaths[i], liquidPaints[i]); } liquidAnimHandler.postDelayed(liquidAnimation, 50); } }

Custom view drawing with animation

@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) { updateBoilerAppearance(); super.onSizeChanged(w, h, oldw, oldh);}

Custom view drawing with animation

public class SvgView extends View { ! . . . ! @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (w > 0 && h > 0 && svg != null) { svg.setDocumentWidth(w); svg.setDocumentHeight(h); Bitmap svgBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); Canvas bitmapCanvas = new Canvas(svgBitmap); // Render our document onto our canvas svg.renderToCanvas(bitmapCanvas); setBackgroundDrawable(new BitmapDrawable(getResources(), svgBitmap)); } } ! . . . }

Consider SVG instead of dpi graphics

{} @ github.com/bernhardpflug/AndroidUtilities

Custom swipe component

Custom swipe component

Ground View

Sky View

public class VerticalViewPager extends ViewGroup { . . . ! @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = getDefaultSize(0, widthMeasureSpec); int height = getDefaultSize(0, heightMeasureSpec); setMeasuredDimension(width, height); int hPadding = getPaddingLeft()+getPaddingRight(); int vPadding = getPaddingTop()+getPaddingBottom(); int contentWidth = getChildMeasureSpec(widthMeasureSpec, hPadding , width); int contentHeight = getChildMeasureSpec(heightMeasureSpec,vPadding , height); groundView.measure(contentWidth, contentHeight); int skyViewHeight = skyView.getLayoutParams().height; int skyHeight = getChildMeasureSpec(heightMeasureSpec, vPadding, skyViewHeight); skyView.measure(contentWidth, skyHeight); } ! . . . !}

Implementing custom swipe components

{} @ github.com/bernhardpflug/AndroidUtilities

Ground View

Sky View

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int width = r - l; final int height = b - t; int skyViewHeight = skyView.getMeasuredHeight(); skyView.layout(0, 0, width, skyView.getMeasuredHeight()); groundView.layout(0, skyViewHeight, width, height + skyViewHeight); }

Implementing custom swipe components

{} @ github.com/bernhardpflug/AndroidUtilities

Ground View

Sky View

@Overridepublic boolean onTouchEvent(MotionEvent event) { ! . . . ! switch (event.getAction()) {

. . . case MotionEvent.ACTION_MOVE: ! int touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); if (!verticalScrolling && Math.abs(deltaY) > touchSlop) { verticalScrolling = true; requestDisallowInterceptTouchEvent(true); ! if (getScrollY() + deltaY <= State.CLOSED && getScrollY() + deltaY >= State.OPEN) { scrollBy(0, (int) deltaY); } } !!}

Implementing custom swipe components

{} @ github.com/bernhardpflug/AndroidUtilities

@Overridepublic boolean onTouchEvent(MotionEvent event) { ! . . . ! switch (event.getAction()) {

. . . case MotionEvent.ACTION_UP: scroller.startScroll(0, getScrollY(), 0, getY(destinationState) - getScrollY()); break; !!}

Implementing custom swipe components

{} @ github.com/bernhardpflug/AndroidUtilities

@Overridepublic void computeScroll() { if (scroller.computeScrollOffset()) { int x = scroller.getCurrX(); int y = scroller.getCurrY(); scrollTo(x, y); postInvalidate(); } }

Implementing custom swipe components

{} @ github.com/bernhardpflug/AndroidUtilities

at.bernhardpflug.heating

Give it a try

Google Play

{} @ github.com/bernhardpflug/AndroidUtilities

Thank you!

plus.google.com/+BernhardPflug

@bernhardpflug