Android design and Custom views
15 likes4,316 views
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.
Android design and Custom views
- 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
- 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
- 7. Design principles implemented Never lose my stuff Decide for me but let me have the final say
- 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?
- 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
- 43. Shader Define content drawn be Paint BitmapShader LinearGradient RadialGradient SweepGradient
- 44. Extend an existing layout
- 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; }
- 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: [email protected] http://www.vogella.com