Custom views drawing styles themes viewproperties animations oh my
This presentation is the property of its rightful owner.
Sponsored Links
1 / 46

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


  • 91 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

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

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


Wanting something different

Wanting something different


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.


Custom views drawing styles themes viewproperties animations oh my

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

}

}


Custom views drawing styles themes viewproperties animations oh my

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

}

}


Custom views drawing styles themes viewproperties animations oh my

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


Custom views drawing styles themes viewproperties animations oh my

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>


Android drawing

Android Drawing


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!


Styles

Styles


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


Android animations

Android Animations


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.


  • Login