Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!

1. Custom Views, Drawing, Styles, Themes, ViewProperties, Animations, oh my!

2. Custom Views • Android provides several helpful Views and ViewGroups • However sometimes… • you need something different • want to encapsulate functionality • want resuability

3. Wanting something different

4. Want to encapsulate functionality • Create a ViewGroup that encapsulates a group of widgets that closely interact with each other.

5. Want reusability • Logic that you reuse over and over again could easily be wrapped up in a custom view. • TextView doesn’t support an attribute to specify a custom font. • However, if you create a custom TextView, you can read in your own font and apply it to a TextView in code.

6. Extend Views • Simply create a new class that extends any preexisting View. • Usually you want to extend the View that provides the most functionality for your new view. • Override any public method the view has and add your own logic to tweak it to your needs.

7. package com.example.lecture2; publicclassCustomViewextendsTextView{ Paint mPaint=new Paint(); publicCustomView(Context context){ this(context,null); } publicCustomView(Context context,AttributeSetattrs){ this(context,attrs,0); } publicCustomView(Context context,AttributeSetattrs,intdefStyle){ super(context,attrs,defStyle); Typeface type = Typeface.createFromAsset(getContext().getAssets(),"fonts/calibri.ttf"); setTypeface(type); } }

8. package com.example.lecture2; publicclassCustomViewextendsTextView{ Paint mPaint=new Paint(); public CustomView(Context context){ this(context,null); } public CustomView(Context context,AttributeSetattrs){ this(context,attrs, 0); } public CustomView(Context context,AttributeSetattrs, int defStyle){ super(context,attrs,defStyle); Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf"); setTypeface(type); } }

9. package com.example.lecture2; public class CustomViewextendsTextView{ Paint mPaint=new Paint(); publicCustomView(Context context){ this(context,null); } publicCustomView(Context context,AttributeSetattrs){ this(context,attrs,0); } publicCustomView(Context context,AttributeSetattrs,intdefStyle){ super(context,attrs,defStyle); Typeface type = Typeface.createFromAsset(getContext().getAssets(),"fonts/calibri.ttf"); setTypeface(type); } }

10. Use your Custom Views in XML • You can access your custom views in XML to declaratively define them in your UI • You need to key things • The package name • The class name

11. Package name package com.example.lecture2; publicclassCustomViewextendsTextView{ Paint mPaint=new Paint(); publicCustomView(Context context){ this(context,null); } publicCustomView(Context context,AttributeSetattrs){ this(context,attrs,0); } publicCustomView(Context context,AttributeSetattrs,intdefStyle){ super(context,attrs,defStyle); Typeface type = Typeface.createFromAsset(getContext().getAssets(),"fonts/calibri.ttf"); setTypeface(type); } } Class Name

12. Access Custom View in XML <?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" > <com.example.lecture2.CustomView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" android:textSize="75dp" android:layout_centerVertical="true" /> <Button android:id="@+id/plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:layout_toRightOf="@id/text" android:textSize="20dp" /> <Button android:id="@+id/minus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-" android:layout_alignLeft="@id/plus" android:layout_below="@id/plus" android:textSize="20dp" /> </RelativeLayout>

13. Android Drawing

14. How a View Draws • In order to show on the screen, a View must be drawn. • Views have a few different draw calls that developers can override to completely change how a view is drawn or slightly modify it. • Use the appropriate method depending on your use case.

15. android.view draw methods • draw(Canvas canvas) – coordinates all the drawing for the view. Draws the view’s background, scrollbars, fading edges, etc. • onDraw(Canvas canvas) – draws the view’s contents • dispatchDraw(Canvas canvas) – draws the view’s children.

16. 4 basic components for drawing Drawing Primitive Bitmap Canvas Rect, Line, Arc, Text, Bitmap Paint Color, opacity, stroke, fill, text size

17. Draw commands • Draw commands are supported by the Canvas class. • Each of the View’s draw method receives a Canvas object. • Use the Canvas to draw

18. Canvas API – draw methods 1. drawRect() – draws a rectangle 2. drawArc() – draws an arc (used for drawing circles) 3. drawBitmap() – draws a bitmap 4. drawText() – draw text

19. Drawing a Rectangle // draw a rectangle starting at 0,0 and ending at the View's width and //height canvas.drawRect(0,0,getWidth(),getHeight(), paint);

20. Paint • Paint controls • Opacity • Color • Stroke • Fill • Text height, spacing, etc (When drawing Text)

21. How to get Paint • You’ll have to create your own Paint object. Paint paint=new Paint(); paint.setColor(0xFFFF0000); paint.setAlpha(128);//setAlpha() takes values 0-255 paint.setTextSize(20);

22. A canvas is backed by a Bitmap • The Canvas object is just a helper object that provides tools for drawing. • The “surface” where the drawing occurs is on a bitmap. • All Canvas object are backed by a Bitmap

23. Creating your own Canvas // Creates a bitmap the size of the View Bitmap bitmap=Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas=new Canvas(bitmap); // draw a rectangle starting at 0,0 and ending at the View's //width and height canvas.drawRect(0,0,getWidth(),getHeight(), paint);

24. Sharing the canvas <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android::background="#FF0000" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Drawing!“ /> </LinearLayout> LinearLayout TextView Android Drawing!

25. Styles

26. Notice any problems? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

27. What if I want to change the bg color? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />

28. What a difference style can make <TextView android:id="@+id/name" style="@style/loginTextTheme" /> <TextView android:id="@+id/serial" style="@style/loginTextTheme" />

29. O Style Where Art Thou • Place your styles in a new xml file in your res/values directory • Typically the file is called styles.xml

30. Defining Styles <style name="loginTheme" <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item> </style>

31. Style Inheritance • Your styles can inherit from the following: • Android Styles • Your own Styles

32. Themes • Themes are styles that are applied to an entire application or activity. • If you know how to do styles then Themes are easy. • See documentation here.

33. Android Holo Light Theme

34. Android Holo Dark Theme

35. Android Holo Theme Mixed Holo Light with dark action bar

36. Other Themes • Use theme to hide title bar/action bar

37. Android Animations

38. Animations • You can load animations from XML • Animate a single property of a View • Animate a set of properties on a View • In code, you can directly animate a View

39. XML Animations • To load animations from XML you’ll use ObjectAnimators • You can also declare ObjectAnimators in code • Object Animators allow you to animate any object property as long as it has a public setter and getter method.

40. Programmatic Animations • Use ViewPropertyAnimator • ViewPropertyAnimator only allows you to animate a few special View properties.

41. View Properties • translationX and translationY: These properties control where the View is located as a delta from its left and top coordinates which are set by its layout container. You can run a move animation on a button by animating these, like this: ObjectAnimator.ofFloat(view, "translationX", 0f, 100f);. • rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation) and 3D around the pivot point. • scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point.

42. View Properties • pivotX and pivotY: These properties control the location of the pivot point, around which the rotation and scaling transforms occur. By default, the pivot point is centered at the center of the object. • x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left/top and translationX/translationY values. • alpha: This value is 1 (opaque) by default, with a value of 0 representing full transparency (i.e., it won't be visible). To fade a View out, you can do this: ObjectAnimator.ofFloat(view, "alpha", 0f);

43. View Properties methods • All of the new View properties are accessible via setter and getter methods on the View itself. • For example, • setRotation() • getRotation()

44. ViewPropertyAnimator Example • myView.animate().x(50f).y(100f); • myView.animate().setDuration(2000); • myView.animate().alpha(0); • myView.animate().x(50f).y(100f).alpha(0).setDuration(2000).start();

45. Animations Auto-Start Auto-start: Note that we didn’t actually start() the animations. In this new API, starting the animations is implicit. As soon as you’re done declaring them, they will all begin.

46. Animation Resources • Animation in Honeycomb • Introducing ViewPropertyAnimator • Android 4.0 Graphics and Animations • Android ViewPropertyAnimator documentation • Property Animation: A good Overall Summary of all Animations in Android.