Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!
description
Transcript of Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!
![Page 1: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/1.jpg)
Custom Views, Drawing, Styles, Themes, ViewProperties, Animations, oh my!
![Page 2: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/2.jpg)
Custom Views
• Android provides several helpful Views and ViewGroups
• However sometimes…– you need something different– want to encapsulate functionality– want resuability
![Page 3: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/3.jpg)
Wanting something different
![Page 4: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/4.jpg)
Want to encapsulate functionality
• Create a ViewGroup that encapsulates a group of widgets that closely interact with each other.
![Page 5: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/5.jpg)
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.
![Page 6: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/6.jpg)
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.
![Page 7: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/7.jpg)
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);
}}
![Page 8: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/8.jpg)
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);
}}
![Page 9: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/9.jpg)
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);
}}
![Page 10: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/10.jpg)
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
![Page 11: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/11.jpg)
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
![Page 12: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/12.jpg)
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>
![Page 13: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/13.jpg)
Android Drawing
![Page 14: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/14.jpg)
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.
![Page 15: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/15.jpg)
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.
![Page 16: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/16.jpg)
4 basic components for drawing
16
Drawing Primitive
Rect, Line, Arc, Text, Bitmap
Paint
Color, opacity, stroke, fill, text size
Canvas
Bitmap
![Page 17: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/17.jpg)
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
![Page 18: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/18.jpg)
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
![Page 19: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/19.jpg)
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);
![Page 20: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/20.jpg)
Paint
• Paint controls– Opacity– Color– Stroke– Fill– Text height, spacing, etc (When drawing Text)
![Page 21: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/21.jpg)
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);
![Page 22: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/22.jpg)
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
![Page 23: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/23.jpg)
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);
![Page 24: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/24.jpg)
<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
![Page 25: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/25.jpg)
Styles
![Page 26: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/26.jpg)
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" />
![Page 27: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/27.jpg)
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" />
![Page 28: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/28.jpg)
What a difference style can make<TextView android:id="@+id/name" style="@style/loginTextTheme"/><TextView android:id="@+id/serial" style="@style/loginTextTheme" />
![Page 29: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/29.jpg)
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
![Page 30: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/30.jpg)
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>
![Page 31: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/31.jpg)
Style Inheritance
• Your styles can inherit from the following:– Android Styles– Your own Styles
![Page 32: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/32.jpg)
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.
![Page 33: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/33.jpg)
Android Holo Light Theme
![Page 34: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/34.jpg)
Android Holo Dark Theme
![Page 35: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/35.jpg)
Android Holo Theme Mixed
Holo Light with dark action bar
![Page 36: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/36.jpg)
Other Themes
• Use theme to hide title bar/action bar
![Page 37: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/37.jpg)
Android Animations
![Page 38: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/38.jpg)
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
![Page 39: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/39.jpg)
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.
![Page 40: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/40.jpg)
Programmatic Animations
• Use ViewPropertyAnimator
• ViewPropertyAnimator only allows you to animate a few special View properties.
![Page 41: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/41.jpg)
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.
![Page 42: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/42.jpg)
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);
![Page 43: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/43.jpg)
View Properties methods
• All of the new View properties are accessible via setter and getter methods on the View itself.
• For example,– setRotation()– getRotation()
![Page 44: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/44.jpg)
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();
![Page 45: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/45.jpg)
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.
![Page 46: Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!](https://reader036.fdocuments.in/reader036/viewer/2022070419/56815c3d550346895dca3b19/html5/thumbnails/46.jpg)
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.