Custom views drawing styles themes viewproperties animations oh my
Download
1 / 46

Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my! - PowerPoint PPT Presentation


  • 114 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Custom Views, Drawing, Styles, Themes, ViewProperties , Animations, oh my!' - kevina


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Custom views drawing styles themes viewproperties animations oh my

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


Custom views
Custom Views

  • Android provides several helpful Views and ViewGroups

  • However sometimes…

    • you need something different

    • want to encapsulate functionality

    • want resuability



Want to encapsulate functionality
Want to encapsulate functionality

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


Want reusability
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
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;

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

}

}


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

}

}


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

}

}


Use your custom views in xml
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


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


Access custom view in xml
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>



How a view draws
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
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.


4 basic components for drawing
4 basic components for drawing

Drawing Primitive

Bitmap

Canvas

Rect, Line, Arc, Text, Bitmap

Paint

Color, opacity, stroke, fill, text size


Draw commands
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
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


Drawing a rectangle
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

  • Paint controls

    • Opacity

    • Color

    • Stroke

    • Fill

    • Text height, spacing, etc (When drawing Text)


How to get paint
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
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
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);


Sharing the canvas
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!



Notice any problems
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
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
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
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
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
Style Inheritance

  • Your styles can inherit from the following:

    • Android Styles

    • Your own Styles


Themes
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 Light Theme


Android holo dark theme
Android Holo Dark Theme


Android holo theme mixed
Android Holo Theme Mixed

Holo Light with dark action bar


Other themes
Other Themes

  • Use theme to hide title bar/action bar



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
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
Programmatic Animations

  • Use ViewPropertyAnimator

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


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 properties1
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
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
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
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 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.


ad