Custom Views for Profit and Pleasure (TC GDG)

All about custom Views and their uses.

1. Custom Views for Profit and Pleasure September 2, 2014
2. Custom Views (as viewed by your average Android developer) Image source: http://goo.gl/JLdYHW
3. Framework Views are huge! View Lines View 19,572 TextView 9,220 ImageView 1,260 ViewGroup 6,771 LinearLayout 1,898 RelativeLayout 1,812 AdapterView 1,208 AbsListView 6,919 ListView 3,799 (Data as of API 19)
4. Too Many Methods! Category Methods Creation Constructors onFinishInflate() Layout onMeasure() onLayout() Drawing onSizeChanged() onDraw() Event processing onKeyDown() onKeyUp() onTrackballEvent() onTouchEvent() Focus onFocusChanged() onWindowFocusChanged() Attaching onAttachedToWindow() onDetachedFromWindow() onWindowVisibilityChanged()
5. Library Views != Custom Views
6. Why custom Views?
7. • View reuse
8. • View reuse • Encapsulation
9. • View reuse • Encapsulation • Compound Views
10. • View reuse • Encapsulation • Compound Views • XML styling <net.danlew.app.FontTextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          app:font="comicSans"  />   ! <net.danlew.app.FontTextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          app:font="papyrus"  />
11. • View reuse • Encapsulation • Compound Views • XML styling • Custom drawing
12. • View reuse • Encapsulation • Compound Views • XML styling • Custom drawing • Performance
13. • View reuse • Encapsulation • Compound Views • XML styling • Custom drawing • Performance • Awesomeness
14. One downside…
15. …no custom View composition
16. Avoid Custom Views • …when you can set a listener: !        view.setOnClickListener(new  OnClickListener()  {  ...  });   • …when you could just use a custom Drawable: !        imageView.setImageDrawable(new  CustomDrawable());   (See “Mastering Android drawables”: http://goo.gl/ENfzW6)
17. A Simple Custom View
18. Step 1: Subclass public  class  CustomView  extends  View  {   ! ! ! }
19. Step 2: Constructor public  class  CustomView  extends  View  {          public  CustomView(Context  context)  {                  super(context);          }   }
20. Step 3: Add CustomView  customView  =  new  CustomView(context);   viewGroup.addView(customView);
21. You’re done!
22. UserView Our brave illustrative warrior
23. Without Custom Views
24. Without Custom Views <LinearLayout          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:gravity="center"          android:orientation="vertical">   !        <ImageView                  android:id="@+id/icon"                  android:layout_width="128dp"                  android:layout_height="128dp"  />   !        <TextView                  android:id="@+id/name"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_marginTop="4dp"                  android:textSize="22sp"  />   ! </LinearLayout>
25. Without Custom Views View  userView  =  LayoutInflater.from(context)          .inflate(R.layout.user_view,  parent,  false);   ! TextView  nameView  =  (TextView)  view.findViewById(R.id.name);   nameView.setText(user.getName());   ! ImageView  iconView  =  (ImageView)  view.findViewById(R.id.icon);   iconView.setImageResource(user.getIcon());
26. Compound Views public  class  UserView  extends  LinearLayout  {   !        private  ImageView  mIconView;          private  TextView  mNameView;   !        public  UserView(Context  context)  {                  super(context);   !                setOrientation(LinearLayout.VERTICAL);                  setGravity(Gravity.CENTER);   !                LayoutInflater.from(context).inflate(R.layout.user_view_merge,  this);                  mIconView  =  (ImageView)  findViewById(R.id.icon);                  mNameView  =  (TextView)  findViewById(R.id.name);          }   !        public  void  setIcon(int  drawable)  {                  mIconView.setImageResource(drawable);          }   !        public  void  setName(CharSequence  name)  {                  mNameView.setText(name);          }   }
27. Compound Views <merge>   !      <ImageView                  android:id="@+id/icon"                  android:layout_width="128dp"                  android:layout_height="128dp"  />   !        <TextView                  android:id="@+id/name"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_marginTop="4dp"                  android:textSize="22sp"  />   ! </merge>
28. Compound Views UserView  userView  =  new  UserView(context);   userView.setName(user.getName());   userView.setIcon(user.getIcon());
29. Encapsulation public  class  UserView  extends  LinearLayout  {   !        /*  ...same  code  as  before...  */       !        public  void  bind(User  user)  {                  mIconView.setImageResource(user.getIcon());                  mNameView.setText(user.getName());          }   }
30. Encapsulation UserView  userView  =  new  UserView(this);   userView.bind(user);
31. XML Styling
32. XML Styling <resources>          <declare-­‐styleable  name="UserView">                  <attr  name="tint"  format="color"  />          </declare-­‐styleable>   </resources>
33. XML Styling <net.danlew.customviews.view.UserView          xmlns:android="http://schemas.android.com/apk/res/android"          xmlns:app="http://schemas.android.com/apk/res-­‐auto"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          app:tint="#500F"  />
34. Reading Styles in Code public  class  UserView  extends  LinearLayout  {   !        public  UserView(Context  context,  AttributeSet  attrs)  {                  super(context,  attrs);   !                /*  ...Same  constructor  code  as  before...  */   !                TypedArray  ta  =  context.obtainStyledAttributes(attrs,                            R.styleable.UserView);                  setTint(ta.getColor(R.styleable.UserView_tint,                          Color.TRANSPARENT));                  ta.recycle();          }   !        public  void  setTint(int  color)  {                  mIconView.setColorFilter(color);          }   }
35. Note on Constructors • Java constructor: !        public  View(Context  context)   • XML constructor: !        public  View(Context  context,  AttributeSet  attrs)   • XML w/ styled defaults (rarely necessary): !        public  View(Context  context,  AttributeSet  attrs,  int  defStyleAttr)
36. Custom Drawing
37. Custom Drawing ublic  class  CircleView  extends  View  {   !        @Override          protected  void  onDraw(Canvas  canvas)  {                  Paint  paint  =  new  Paint();   !                /*                        ...Configure  paint  here  to  draw  icon...                      ...yadda  yadda  yadda...                  */   !                int  radius  =  getWidth()  /  2;                  canvas.drawCircle(radius,  radius,  radius,  paint);          }   } yadda: http://goo.gl/W8d17V
38. Performance • UserView is simple… • …don’t prematurely optimize! • One possibility: customized onLayout()
39. Thank you! • Samples: https://github.com/dlew/android-custom- views-sample • http://danlew.net/ • @danlew42 • +DanielLew