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

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


  • 107 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.

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

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

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

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

  • 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

<?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


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

  • 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

Drawing Primitive

Bitmap

Canvas

Rect, Line, Arc, Text, Bitmap

Paint

Color, opacity, stroke, fill, text size


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

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


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


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.


ad
  • Login