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

Custom Views

• Android provides several helpful Views and ViewGroups

• However sometimes…– you need something different– want to encapsulate functionality– want resuability

Wanting something different

Want to encapsulate functionality

• Create a ViewGroup that encapsulates a group of widgets that closely interact with each other.

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.

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.

package com.example.lecture2;

public class CustomView extends TextView {

Paint mPaint = new Paint();public CustomView(Context context) {

this(context, null);}public CustomView(Context context, AttributeSet attrs) {

this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);

}}

package com.example.lecture2;

public class CustomView extends TextView {

Paint mPaint = new Paint();public CustomView(Context context) {

this(context, null);}public CustomView(Context context, AttributeSet attrs) {

this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);

}}

package com.example.lecture2;

public class CustomView extends TextView {

Paint mPaint = new Paint();public CustomView(Context context) {

this(context, null);}public CustomView(Context context, AttributeSet attrs) {

this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);

}}

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 things1. The package name2. The class name

package com.example.lecture2;

public class CustomView extends TextView {

Paint mPaint = new Paint();public CustomView(Context context) {

this(context, null);}public CustomView(Context context, AttributeSet attrs) {

this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);

}}

Package name

Class Name

Access Custom View in XML<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns: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>

Android Drawing

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.

android.view draw methods

15

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.

4 basic components for drawing

16

Drawing Primitive

Rect, Line, Arc, Text, Bitmap

Paint

Color, opacity, stroke, fill, text size

Canvas

Bitmap

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

Canvas API – draw methods

18

1. drawRect() – draws a rectangle

2. drawArc() – draws an arc (used for drawing circles)

3. drawBitmap() – draws a bitmap

4. drawText() – draw text

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);

Paint

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

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);

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

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);

<LinearLayout xmlns: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>

Sharing the canvas

24

LinearLayout

Android Drawing!TextView

Styles

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" />

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" />

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

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

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>

Style Inheritance

• Your styles can inherit from the following:– Android Styles– Your own Styles

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.

Android Holo Light Theme

Android Holo Dark Theme

Android Holo Theme Mixed

Holo Light with dark action bar

Other Themes

• Use theme to hide title bar/action bar

Android Animations

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

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.

Programmatic Animations

• Use ViewPropertyAnimator

• ViewPropertyAnimator only allows you to animate a few special View properties.

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.

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);

View Properties methods

• All of the new View properties are accessible via setter and getter methods on the View itself.

• For example,– setRotation()– getRotation()

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();

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.

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.