Slides by Bernhard Pflug, Senior Android developer @ Iconmobile during the Ulracode Munich Meetup #7 http://www.meetup.com/Ultracode-Munich/events/219689131/

1. VIEW CUSTOMIZATION
IN A NUTSHELL

2. @bernhardpflug
plus.google.com/+BernhardPflug

3. Iconmobile
170
Headquarter
BMW

4. BMW remote apps

5. The app

6. UX Don’t just start coding
Make it easy to
send feedback
Analyse usage

7. One UX example

8. 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[] { . . . ));
!
}
!
. . .
}
!
!

9. !
@Override
protected 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

10. @Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
updateBoilerAppearance();
super.onSizeChanged(w, h, oldw, oldh);
}
Custom view drawing with animation

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

12. Custom swipe component

13. Custom swipe component
Ground View
Sky View

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

15. @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

16. @Override
public 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

17. @Override
public 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

18. @Override
public 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

19. at.bernhardpflug.heating
Give it a try
Google Play
{} @ github.com/bernhardpflug/AndroidUtilities

20. Thank you!
plus.google.com/+BernhardPflug
@bernhardpflug