This document discusses implementing Android design principles in custom views. It begins by outlining principles like "Never lose my stuff" and "Only show what I need when I need it". It then provides examples of implementing these in custom views, such as using a NavigationDrawer or animations. It discusses different types of custom views like compound views that extend existing views. The document also covers performance optimization techniques for custom views like using Canvas versus extending a ViewGroup. Finally, it suggests ideas for implementing the principle of giving "tricks that work everywhere", such as touch gestures.

1. Android UI-Design and
customer views

2. Lars Vogel
Eclipse IDE and
platform developer
Android and Eclipse
developer and trainer
Founder of vogella
GmbH
http://www.vogella.com
visited by > 50 000
developers every day

3. Selected
design
principles
How
to
implement
them
(with
focus
on
custom
views)

4. Android design homepage

5. Android design principles
Never lose my stuff
Decide for me but let me have the final say
Only show what I need when I need it
Delight me in surprising ways
Give me tricks that work everywhere

6. Lets implements that!

7. Design principles implemented
Never lose my stuff
Decide for me but let me have the final say

8. http://www.vogella.com/tutorials/AndroidListView/article.html#listview_undoaction

9. FrameLayout

10. Never loose my stuf

11. Only show what I need when I
need it

12. Design principles implemented
Only show what I need when I
need it
http://www.vogella.com/tutorials/AndroidActionBar/article.html
Example
Navigation

13. Home screen Six Pack

14. Fixed tabs

15. Spinner

16. The winner: Navigation Drawer

17. Implementation of Navigation drawer

18. Implementation
mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity
*/
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
getActionBar().setTitle(title);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle("Open Drawer");
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);

19. Management
does
not allow
me to use the
support library

20. Navigation drawer
is old school

21. FrameLayout

22. Design principles implemented
Delight me in surprising
ways
Animations
http://www.vogella.com/tutorials/AndroidAnimations/article.html

23. Animation history
Properties API (3.0)
New simplified options for
Animations (4.1)
ActivityOptions for Activity
animations (4.1)
Scenes and transitions (4.4)
NineOldAndroids to support < 3.0
Android versions

24. aniView.animate().rotation(dest).setDuration(1000)
.scaleX(2)
.scaleY(2).withEndAction(new Runnable() {
@Override
public void run() {
//
aniView.animate().rotationXBy(100)
.rotation(
Math.abs(360 - aniView
.getRotation()))
.scaleX(0.4F).scaleY(0.4F)
.setDuration(1000);
}
});
Animations example

25. Scene animations with Android 4.4
mSceneRoot = (ViewGroup)
findViewById(R.id.sceneRoot);
TransitionInflater inflater =
TransitionInflater.from(this);
mScene1 =
Scene.getSceneForLayout(mSceneRoot,
R.layout.transition_scene1, this);
mTransitionManager.transitionTo(mScene1);

26. Animations
http://graphics-geek.blogspot.de/2013/06/devbytes-custom-activity-animations.html
Demo from Android developer team: com.vogella.android.animations.extended

27. Design principles implemented
Delight me in surprising ways
http://www.vogella.com/tutorials/AndroidCustomViews/article.html
Custom views

28. Custom views a can
be performance optimized,
simplify your developer life or
do something awesome
Why?

29. View drawing phases
Animate Measure Layout Draws
requestLayout() invalidate()animate()

30. View hierarchy
View
ImageView TextView ViewGroup
Button
LinearLayout FrameLayout ...

31. View class
It is the basic build block for UI
Rectangular area responsible for
drawing and event handling

32. Creating a custom view
Compound view
Extending an existing view
Custom view

33. Compound Views
Uses layout with existing views
Adds view interaction and API

34. Compound View - Layout
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:textSize="18sp"
/>
<View
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
/>
</merge>

35. Custom attributes
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ColorOptionsView">
<attr name="titleText" format="string"
localization="suggested" />
<attr name="valueColor" format="color" />
</declare-styleable>
</resources>

36. public class ColorOptionsView extends LinearLayout {
private View mValue;
private ImageView mImage;
public ColorOptionsView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ColorOptionsView, 0, 0);
String titleText = a.getString(R.styleable.ColorOptionsView_titleText);
int valueColor = a.getColor(R.styleable.ColorOptionsView_valueColor,
android.R.color.holo_blue_light);
a.recycle();
setOrientation(LinearLayout.HORIZONTAL);
setGravity(Gravity.CENTER_VERTICAL);
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.view_color_options, this, true);
TextView title = (TextView) getChildAt(0);
title.setText(titleText);
mValue = getChildAt(1);
mValue.setBackgroundColor(valueColor);
}
public ColorOptionsView(Context context) {
this(context, null);
}
public void setValueColor(int color) {
mValue.setBackgroundColor(color);
}
public void setImageVisible(boolean visible) {
mImage.setVisibility(visible ? View.VISIBLE : View.GONE);
}
}
Get layout
parameters
Additional API
Inflate layout,
wire views

37. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.vogella.android.view.compoundview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="?android:attr/listDivider"
android:orientation="vertical"
android:showDividers="middle"
tools:context=".MainActivity" >
<com.vogella.android.customview.compoundview.ColorOptionsView
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="?android:selectableItemBackground"
android:onClick="onClicked"
custom:titleText="Background color"
custom:valueColor="@android:color/holo_green_light" />
<com.vogella.android.customview.compoundview.ColorOptionsView
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="?android:selectableItemBackground"
android:onClick="onClicked"
custom:titleText="Foreground color"
custom:valueColor="@android:color/holo_orange_dark" />
</LinearLayout>

38. Performance optimization
Creating something
completely new
What can I NOT do with
compound views?

39. Performance
Flat Custom View

40. Custom View
Extend View class or its subclass
Override some methods
onDraw()
onTouchEvent()
…
Use new class in your layout

41. Canvas API
You draw on a surface creating a Bitmap
Canvas provides API to draw on the canvas
Note: As of Android 4.0, the runtime maps the Canvas API to
OpenGL calls

42. Paint
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(10f);
paint.setAlpha(122);

43. Shader
Define content drawn be Paint
BitmapShader
LinearGradient
RadialGradient
SweepGradient

44. Extend an existing layout

45. MyShinyLinearLayout extends LinearLayout

47. public MyShinyLinearLayout(Context context, AttributeSet
attrs) {
super(context, attrs);
setBackgroundResource(R.drawable.background);
}
private void createShineArea() {
int width = getWidth();
int height = (int) (0.9 * getHeight());
path = new Path();
path.moveTo(0, 0);
path.lineTo(width, 0);
path.lineTo(width, height);
path.close();
paint.setShader(new LinearGradient(0, 0, 0, height,
0x55ffffff,
0x10ffffff, Shader.TileMode.CLAMP));
}

48. @Override
protected void dispatchDraw(Canvas canvas) {
if (path == null) {
createShineArea();
}
// Draw the shine behind the children.
canvas.drawPath(path, paint);
// Draw the children
super.dispatchDraw(canvas);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
// Invalidate the path whenever the size changes.
path = null;
}

49. Alpha Compositioin

50. Matrix
@Override
protected void onDraw(Canvas canvas) {
Bitmap targetBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
Matrix matrix = new Matrix();
matrix.setRotate(50, targetBitmap.getWidth() / 2,
targetBitmap.getHeight() / 2);
matrix.setSkew(2, 2);
canvas.drawBitmap(targetBitmap, matrix, new Paint());
super.onDraw(canvas);
}

51. Demo:
Custom drawing & touch

52. View Persistence

53. View State
To save a view state, Activity calls
onSaveInstanceState() on every its child view which
has an android:id attribute.
To restore a view state, Activity calls
onRestoreInstanceState() on every its child view
which has an android:id attribute.
com.vogella.android.customview.persistence

54. Async custom view
See http://lucasr.org/2014/05/12/custom-layouts-on-android/

55. Thats about it, but real
implementations look
a bit more complex

56. Give me tricks
that work
everywhere
Design principle

57. Give me tricks that work everywhere
Implement Fling with Touch

58. Awesome code examples
SwipeToDismiss - https://github.com/romannurik/Android-
SwipeToDismiss
ListView3D - https://github.com/renard314/ListView3d
Rounded Corners with custom drawables -
http://www.curious-creature.org/2012/12/11/android-recipe-1-
image-with-rounded-corners/
Spotlight -
http://www.curious-creature.org/2012/12/13/android-recipe-2-
fun-with-shaders/
Path traces http://www.curious-
creature.org/2013/12/21/android-recipe-4-path-tracing/

59. Idea to develop an async custom
view
See http://lucasr.org/2014/05/12/custom-layouts-on-android/

60. Note: Learn about Drawables
http://www.vogella.com/tutorials/AndroidDrawables/article.html
Sometimes you don't need
custom views just a
combination of existing
Drawables

61. Thank you
For further questions:
lars.vogel@vogella.com
http://www.vogella.com